SASS摘要

SASS提高了代码的重复利用率，提高了效率。不用去记或者查找复杂或者繁琐的参数和书写规则。

这里简单整理了实际业务中常常用到的几个功能。

1. 父元素引用 &

a {
  &:hover { text-decoration: underline; }
}

 

2. 嵌套（包括css的种类的名字，如font-size,font-weight等类似）

.lucky {
  font: {
    family: ’fantasy’;
    size: 30em;
    weight: bold;
  }
}

 

3. $定义变量

$dark:#333;
p{color:$dark;}

 

4. 自定义函数@mixin

$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; 

//浏览器前缀
@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {

    @if $prefix == webkit and $prefix-for-webkit == true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix == moz and $prefix-for-mozilla == true {
      -moz-#{$property}: $value;
    }
    @else if $prefix == ms and $prefix-for-microsoft == true {
      -ms-#{$property}: $value;
    }
    @else if $prefix == o and $prefix-for-opera == true {
      -o-#{$property}: $value;
    }
    @else if $prefix == spec and $prefix-for-spec == true {
      #{$property}: $value;
    }
    @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

以上为例，引用方式如下

.lucky{
    @include prefixer(border-radius,5px,webkit moz ms o spec);
)

或

$pre:webkit moz ms o spec;
.lucky{
    @include prefixer(border-radius,5px,$pre);
)

 

5. @include 引用

对@mixin 的引用，如4.

ps: jade中对文件的引用

include ./template/_footer

 

6. #{}

用#{ }在选择器中使用SASS变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

 

7.!default

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

结果：

#main {
  content: "First content";
  new-content: "First time reference"; }

变量是 null 空值时将视为未被赋值。

 

8.@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

 

9. 控制指令（control directives）

 @if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

 

 @for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译结果

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

 

eg2.

@for $number from 1 through 10{
    .w#{$number*10}{width:$number*10px;}       //宽度10px~100px的整数
    .w#{$number*100}{width:$number*100px;}     //宽度100px~1000px的整数
    .w#{$number*10}p{width:$number*10%;}       //宽度10%~100%的整数
}

@for $num from 0 through 5{
    .mt#{$num}{margin-top: $num*1px;}
    .mb#{$num}{margin-bottom: $num*1px;}
    .ml#{$num}{margin-left: $num*1px;}
    .mr#{$num}{margin-right: $num*1px;}
    .p#{$num}{padding:$num*1px;}
    .pt#{$num}{padding-top: $num*1px;}
    .pb#{$num}{padding-bottom: $num*1px;}
    .pl#{$num}{padding-left: $num*1px;}
    .pr#{$num}{padding-right: $num*1px;}
}

 

 @each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译结果

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

 

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译结果

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }