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; }

巴特西

SASS摘要

最新文章

热门文章