Sass

一.使用变量

1) 变量声明

2) 变量引用

3) 变量中中划线和下划线指向同一个变量

$font-color:red;
$font-border:1px solid $font-color;

.box{
    border:$font_border;//$font-border===font_border
    color:$font-color;
}

二. 嵌套CSS 规则

1) 父选择器的标识符&

应用：添加伪类； 在父选择器之前添加选择器

$font-color:red;
.box{
    color:$font-color;
    &:hover{
        color:blue;
    }
    body.ie & { color: green }//编译后 body.ie .box {color: green; }
    
}

 2) 群组选择器的嵌套

.box {
    h1, h2, h3 {
      color:red;
    }
}

 3) 子组合选择器和同层组合选择器：>、+和~

 

//  >:选择.box下紧跟着的子元素,
.box > span{
    color:red;
}

//  +:选择.box后紧跟着同层的元素,
.box + span{
    color:red;
}

//  ~:选择.box后同层的元素,不管它们之间隔了多少其他元素：
.box ~ span{
    color:red;
}

 

4) 嵌套属性

.box{
    background: {
        image:url('http://upcdn.file.m.mvbox.cn/upload/vvmusic/authtype2@3x.png');
        repeat:no-repeat;
        size:contain;
    };
    border: 1px solid #ccc{
        left:0;
        right:0;
    };//编译后：border: 1px solid #ccc; border-left: 0px;  border-right: 0px
 
}

 

三. 导入SASS文件

1) 使用SASS部分文件

2) 默认变量值 default

// 如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值
$font-color:blue;
$font-color:red !default;
.box{
   color:$font-color;//color:blue
}

3) 嵌套导入 .box {@import "blue-theme"}

4) 原生的CSS导入

下列三种情况下会生成原生的CSS@import

被导入文件的名字以.css结尾；

被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css）

被导入文件的名字是CSS的url()值。

四.混合器

1) 使用@mixin标识符定义,通过@include来使用这个混合器

 

@mixin radius{
    border-radius: 6px;
    -webkit-border-radius:6px;
}

.box{
    color: red;
    border: 1px solid #ccc;
    @include radius;
}

 

2) 混合器中不仅可以包含属性，也可以包含css规则

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
.box {
  color: #ccc;
  @include no-bullets;
}

 

3) 给混合器传参,参数默认值使用$name: default-value

 

@mixin link-colors($normal,$hover:$normal,$active:$normal){
    color:$normal;
    &:hover{ color:$hover;}
    &:active{ color:$active;}
}
.box {
    @include link-colors(blue,red,green);
    @include link-colors( $normal: blue,$hover:red,$active:green);//这种形式的传参，参数顺序就不必再在乎了
    @include link-colors(blue);//$hover和$active也会被自动赋值为blue
}

 

五.使用选择器继承来精简CSS  @extend

.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.box{
    width:100px;
    @extend .ellipsis;
}

 

 六.插值语句 #{}

 通过 #{} 插值语句可以在选择器或属性名中使用变量

 可以避免 Sass 运行运算表达式，直接编译 CSS

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
  .box{
        $font-size: 12px;
        $line-height: 30px;
        font: #{$font-size}/#{$line-height};
  }
}
// 编译为
p.foo {border-color: blue; }
p.foo .box{font: 12px/30px; }

 

 

七.控制指令

　1）@if @else if

$type: monster;
.box {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
// 编译后
.box{
    color:green;
}

 

 

2) @for

@for $var from <start> through <end> 条件范围包含 <start> 与 <end> 的值

@for $var from <start> to <end> 条件范围包含 <start> 的值不包含 <end> 的值

@for $i from 1 through 3 {
  .item-#{$i} { width: 2px * $i; }
}
// 编译为
.item-1 {width: 2px; }
.item-2 {width: 4px; }
.item-3 {width: 6px; }

 

3) @each

$var in <list> : $var 变量名, <list> 是一连串的值，也就是值列表

@each $item in like, comment, share {
  .#{$item}-icon {
    background-image: url('/images/#{$item}.png');
  }
}
// 编译为
.like-icon {
  background-image: url('/images/like.png'); }
.comment-icon {
  background-image: url('/images/comment.png'); }
.share-icon {
  background-image: url('/images/share.png'); }

 

 

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
// 编译后
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

 

 

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
// 编译后
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

4) @while

@while 指令重复输出格式直到表达式返回结果为 false

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

 

 

八.函数指令

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

.box { width: grid-width(5); }

// 编译后
.box {
  width: 240px; }