less and sass

Less

• 变量

  @width: 10px;
  @height: @width + 10px;
  
  #header {
    width: @width;
    height: @height;
  }
  

• Mixin

  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }
  
  #menu a {
    color: #111;
    .bordered();
  }
  
  .post a {
    color: red;
    .bordered();
  }
  

• nesting

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

Sass

• 变量

  SASS允许使用变量，所有变量以$开头。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

  　　$blue : #1875e7;　
  
  　　div {
  　　　color : $blue;
  　　}
  　　
  　　$side : left;
  
  　　.rounded {
  　　　　border-#{$side}-radius: 5px;
  　　}
  

• 嵌套

  在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

  　　div {
  　　　　hi {
  　　　　　　color:red;
  　　　　}
  　　}
  　　
  　　　p {
  　　　　border: {
  　　　　　　color: red;
  　　　　}
  　　}
  　　
  　　a {
  　　　　&:hover { color: #ffb3ff; }
  　　}
  

• 继承 @extend

  .class1 {
  　　　　border: 1px solid #ddd;
  　　}
  　　
  .class2 {
  　　　　@extend .class1;
  　　　　font-size:120%;
  　　}
  

• Mixin

  Mixin有点像C语言的宏（macro），是可以重用的代码块。

  使用@mixin命令，定义一个代码块。

  使用@include命令，调用这个mixin。

  　@mixin left {
  　　　　float: left;
  　　　　margin-left: 10px;
  　　}
  　　
  　div {
  　　　　@include left;
  　　}
  

  mixin的强大之处，在于可以指定参数和缺省值。

  @mixin left($value: 10px) {
  　　　　float: left;
  　　　　margin-right: $value;
  　　}
  　　　div {
  　　　　@include left(20px);
  　　}