sass语法总结

sass语法总结

1.导入

@import "reset.css"; css不会被合并在一个文件里
@import "a"; scss导入时可以去掉后缀，会和导入文件合并在一个文件里

2.注释

/* */ 会在css中生成注释
// 不会在css中生成

3.变量

3.1普通变量

$fontSize: 12px;
body{
    font-size:$fontSize;
}

3.2默认变量

$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}


注意：覆盖默认变量只需在默认前增加新的定义即可


$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

3.3特殊变量（变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。）

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;


//应用于class和属性
.border-#{$borderDirection}{
  border- #{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

3.4多值变量

3.4.1 List:

//一维数据
$px: 5px 10px 20px 30px;


//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);


$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);


  &:hover{
    color:nth($linkColor,2);
  }
}

3.4.2 Map:

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

3.5全局变量(sass 3.4后的版本中正式应用)

$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;        
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}

4.嵌套(选择器、属性)

4.1 选择器嵌套：

#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;


    &:hover{
      color:#ddd;
    }
  }
}
}

4.2 属性嵌套（一般不推荐这种方式，看个人使用情况而定）

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

5.跳出嵌套（@at-root）

5.1 普通跳出嵌套

//没有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}


//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}


//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

5.2 @at-root (without: ...)和@at-root (with: ...)

//跳出父级元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}


//跳出media嵌套，父级有效
@media print {
  .parent2{
    color:#f00;


    @at-root (without: media) {
      .child2 {
        width:200px;
      } 
    }
  }
}


//跳出media和父级
@media print {
  .parent3{
    color:#f00;


    @at-root (without: all) {
      .child3 {
        width:200px;
      } 
    }
  }
}

5.3 @at-root与&配合使用

.child{
    @at-root .parent &{
        color:#f00;
    }
}

5.4 应用于@keyframe

.demo {
    ...
    animation: motion 3s infinite;


    @at-root {
        @keyframes motion {
          ...
        }
    }
}

6.混合(mixin)

6.1 无参数mixin

@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

6.2 有参数mixin

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

6.3 多个参数mixin

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

6.4 多组值参数mixin

//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

7 @content

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}


@include max-screen(480px) {
  body { color: red }
}

8. 继承

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

9. 占位选择器%（如果没有地方引用不会在css中生成，避免了很多无用代码产生）

%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}


注意：以%标识定义，通过@extend调用


#header{
  h1{
    @extend %ir;
    width:300px;
  }
}

10. 函数

$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        


// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

11、运算（支持+ - * / ，运算符两边留一个空格，否则会报错）

12.条件判断

12.1 条件判断if（@if可以单独使用，也可以和@else结合使用）

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

12.2 三目判断

if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

13 、循环

13.1 for循环(@for $var from through 和@for $var from to ,through表示包括end这个数，而to则不包括end这个数。)

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

13.2 @each循环

1.单个字段list数据循环
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}




2.多个字段list数据循环


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




3.多个字段map数据循环


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