首页 > sass 和less选择问题

sass 和less选择问题

现在bootstrap也有官方sass版本

用了一段时间bootstrap less
sass没有实践过,大概看了下文档,中文SASS文档

看了下compass,源码很久没更新了,感觉很多功能bootstrap mixins有类似的

另外发现一个extend的区别
less to css

//less
.text-left           { text-align: left; }
.text-right           { text-align: right; }

.important {
  &:extend(.text-left);
  &:extend(.text-right);
}

.mm {
  .text-left{
    color:#ff0;
  }
}
.text-left,.important{text-align:left}
.text-right,.important{text-align:right}
.mm .text-left{color:#ff0}

scss to css

//scss
.text-left           { text-align: left; }
.text-right           { text-align: right; }

.important {
  @extend .text-left;
  @extend .text-right;
}

.mm {
  .text-left{

    color:#ff0;
  }
}
.text-left, .important {
  text-align: left; }

.text-right, .important {
  text-align: right; }

.mm .text-left, .mm .important {
  color: #ff0; }

sass会生成.mm .important这个预期不想要的选择器

sass在合并选择器时似乎会生成多余的选择器,而less就不会

bootstrap源码

.btn-group-xs > .btn { @extend .btn-xs; }

sass版本的最终会生成

.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
    margin-top: 14px;
    margin-bottom: 14px; }

而less的只是

.navbar-btn.btn-xs {
  margin-top: 14px;
  margin-bottom: 14px;
}

另外less也可以不用extend直接

.important {
  .text-left;
  .text-right;
}

像.clearfix这种包含伪类的还是得用extend避免生成多余选择器

不考虑ruby on rails和sass的语法简洁特性
webstorm emmet时.scss自动换行.sass不换
bourbon 和 lesshat 这些文档还没看,求讨论下sass less如何选择?


看看 sass的 %placeholder ,你就会放弃less了.


不考虑IDE/普及度等,只看语言本身的话,Stylus碾压**ss无压力

然后考虑上所有要素的话,bootstrap用less,这就够我选less了


有些框架比如Bootstrap带less版支持,而Ruby on Rails默认支持的是sass。一个工具而已,用着顺手就好。

【热门文章】
【热门文章】