现在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如何选择？