预编译语言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 <list or map>。其中$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 <start> through <end>和@for $var from <start> to <end>。$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;  }}