generator-zl-fis3-less/app/templates/page/web1/css/__inc-index-height.less

基于 Yeoman 的 FIS3 主题模板制作框架初始化脚手架

///* 定义函数 */
.height_lineHeight(@height:36px){
  height: @height;
  line-height: @height;
}
// 定义用于扩展的参考样式
// 为什么要定义这个样式?
// 因为 less 的 :extend(selector) 在嵌套使用时存在复写 selector 的问题
// 为了不影响正常的样式,所以采用使用参考样式扩展的方式解决此问题
// 这个 bug 的修复好辛苦, 花了 6 个小时解决, 给自己点个赞.
.__hl36{
  .height_lineHeight(36px);
}
.__hl50{
  .height_lineHeight(50px);
}
.__hl150{
  .height_lineHeight(150px);
}
// /* 扩展嵌套选择器 */
#topArea:extend(.__hl36){
  .topAreaBar:extend(.__hl36){}
}

// /* 扩展嵌套选择器 */
#header:extend(.__hl150){
  .headerBar:extend(.__hl150){
    .logoWraper:extend(.__hl150){
    }
  }
}

//  扩展嵌套选择器
//  直接使用 #webNav 扩展 会影响 后面 #webNav 的值
//  所以采用一个中间样式来完成扩展
//  output:
//  .__hl150,
// #webNav,
// #webNav .webNavBar,
// #webNav .webNavBar .nav,
// #webNav .webNavBar .nav a {
//   height: 150px;
//   line-height: 150px;
// }
#webNav:extend(.__hl50){
  .webNavBar:extend(.__hl50){
    .nav:extend(.__hl50){
      a:extend(.__hl50){}
    }
  }
}

// 以下扩展虽然能产生向上面一样的样式
// 但由于是直接扩展了 #webNav 对象
// 在当前样式的其他地方,如果使用了 #webNav
// 则在编译时将会被解析为
// #webNav,
// #webNav .webNavBar,
// #webNav .webNavBar .nav,
// #webNav .webNavBar .nav a
// 这显然不是我们想要的.
//#webNav{
//.height_lineHeight(50px);
//  扩展嵌套选择器
//  直接使用 #webNav 扩展 会影响 后面 #webNav 的值
//  所以采用一个中间样式来完成扩展
// .webNavBar:extend(#webNav){
//     .nav:extend(#webNav){
//         a:extend(#webNav){}
//     }
// }
//}

.__h{
  height: 200px;
}
#footer:extend(.__h){
  .footerBar:extend(.__h){

  }
}