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不换
bourbonlesshat 这些文档还没看,求讨论下sass less如何选择?

阅读 16.8k
3 个回答

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进