预编译语言Sass中几种常用的写法

在项目中用到了预编译语言sass，平时用到最多的就是选择器嵌套，有好多的使用语句或方式没有用到， sass很强大，不是简简单单的使用一个选择器嵌套而已，根据页面的布局结合sass的语法可以写出更清晰的、扩展性好的结构，所以今天把sass的语法温习了一遍；

提供一个在线编译工具:sass编译工具

.box {
  font-size:10px;
  // sass3.3.0中新增的功能，用来跳出选择器嵌套的。
  // 默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
  // 普通跳出嵌套 单个选择器跳出
  @at-root .child {
    color:red;
  }
  // //多个选择器跳出
  @at-root {
    .child1 {
      color:red;
    }
    .child2 {
      color:blue;
    }
  }
  /**
  默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，
  则需使用@at-root (without: media)，@at-root (without: support)。
  这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，
  因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)
  */
  @at-root (without:rule) {
    .child {
      color:blue;
    }
  }

}

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

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

@media screen and (max-device-width:320px) {
  body {
    color:#fefefe;

    @at-root (without:media) {
      & {
        color:#f5f5f5;
      }
    }

  }
}


/**
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，
多个参数以逗号分开，也可以给参数设置默认值。
声明的@mixin通过@include来调用
*/
@mixin float($float:left) {
  float:$float;
}

.fl {
  @include float;
}
.fr {
  @include float(right);
}

/**
占位选择器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：
如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，
然后实际应用中不管是否使用了@extend去继承相应的样式，
都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
*/
%flex{
  display:flex;
  justify-content:center;
  align-items:cener;
}

// 这是一个变通的class选择器无法是否使用都存在
.box {
    width:100px;
  height:100px;
}

.parent {
  @extend %flex;
  @extend .box;

  border: {
    style:solid;
    width:2;
    color:red;
  };

  $color: red blue;
  color:nth($color,1);
}


//函数 注意返回的关键字是@return;
@function size($size:12px) {

  @return $size * 2px;
}

.f24 {
  font-size: size(12);
}

/**
三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。
*/

.f12 {
  font-size:if(true,12px,14);
}

/**
语法为：@each $var in 。其中$var表示变量，
而list和map表示list类型数据和map类型数据。
sass 3.3.0新加入了多字段循环和map数据循环。
*/
//list
$colors: red,blue,green;
@each $color in $colors {
  .color-#{$color} {
    color:$color;
  }
}
// map
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
  @each $name, $value in $heading {
    #{$name} {
      color:$value;
  }

}
// map
$map: (blue, blue, white),(red, red,white);
@each $name, $bg, $color in $map {
  .#{$name}-icon {
    color:$color;
    background-color:$bg;
  }

}

/**
for循环有两种形式，分别为：@for $var from  through 和@for $var from  to 。
$i表示变量，start表示起始值，end表示结束值，
这两个的区别是关键字through表示包括end这个数，
而to则不包括end这个数。
*/
// 输出到10
@for $i from 1 through  10 {

  .mt-#{$i} {
    margin-top:$i*5px;
  }

}

//输出到9
@for $i from 1 to  10 {

  .mt-#{$i} {
    margin-bottom:$i*5px;
  }

}