Bootstrap

Sass与Less的区别

Less

Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像,Less 仅对 CSS 语言增加了少许方便的扩展,学习很容易。
使用方法:

// Node.js 环境中使用 Less
npm install -g less
// 编译: 
lessc styles.less styles.css
// 在浏览器环境中使用 Less:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>

主要亮点语法:

Mixins 混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
//等价于
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Nesting 嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
//等价于
#header {
  color: black;
;