猿问

sass 和less选择问题

现在bootstrap也有官方sass版本
用了一段时间bootstrapless
sass没有实践过,大概看了下文档,中文SASS文档
看了下compass,源码很久没更新了,感觉很多功能bootstrapmixins有类似的
另外发现一个extend的区别
lesstocss
//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}
scsstocss
//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避免生成多余选择器
不考虑rubyonrails和sass的语法简洁特性
webstormemmet时.scss自动换行.sass不换bourbon和lesshat这些文档还没看,求讨论下sassless如何选择?
明月笑刀无情
浏览 1344回答 2
2回答

慕丝7291255

不考虑IDE/普及度等,只看语言本身的话,Stylus碾压**ss无压力然后考虑上所有要素的话,bootstrap用less,这就够我选less了

ibeautiful

有些框架比如Bootstrap带less版支持,而RubyonRails默认支持的是sass。一个工具而已,用着顺手就好。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答