前端的Sass高级语法

Sass高级语法

@at-root跳出嵌套

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

上面的代码经过编译以后，会生成如下代码

.parent-2 {
    color:#f00;
}
.child{
    width:200px;
}

说明：默认情况下@ar-root是不能跳出@media的嵌套的，如果要跳出这些嵌套，我们需要使用@at-root (without: media)

@media only screen and (max-width:768px) {
  .parent2{
    color:#f00;
    @at-root (without: media) {
      .child2 {
        width:200px;
      } 
    }
  }
}

说明：上面的代码经过编译以后，我们可以生成如下代码

@media only screen and (max-width: 768px) {
  .parent2 {
        color: #f00; 
    } 
}
.child2 {
    width: 200px; 
}

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始

$baseFontSize:      10px !default;
$gray:              #ccc !defualt; 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);  //注意这里的darken是系统的方法
}

说明：上面的代码经过编译以后，生成如五CSS代码

body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

条件判断及循环

条件判断

@if判断

@if可一个条件单独使用，也可以和 @else结合多条件使用

$type:1;
p {
  @if $type == 1 {
    color: blue;
  } @else if $type == 2 {
    color: red;
  } @else if $type == 3 {
    color: green;
  } @else {
    color: black;
  }
}

说明：上面的代码经过编译以后，得到的CSS如下

p{
    color:blue;
}

for循环

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

@for $i from 1 through 3 {
  .div#{$i} { width: 2em * $i; }
}

说明：上面的代码经过编译以后，得出的结果如下：

.div1 {
  width: 2em; 
}
.div2 {
  width: 4em; 
}
.div3 {
  width: 6em; 
}

三目运算符

三目运算符的语法为： if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。如下代码所示：

$type:1;
p{
    color:if($type==1,red, black);
}

说明：上面的代码经过编译以后，如下所示：

p {
  color: red; 
}

@each list遍历

语法为： @each $var in <list or map>。其中 $var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

$imgList: "01", "02", "03", "04";
@each $index in $imgList{
    .icon-#{$index}{
        background-image: url(images/#{$index}.jpg);
    }
}

说明：上面的代码经过编译以后，生成如下CSS

.icon-01 {
  background-image: url(images/01.jpg); 
}
.icon-02 {
  background-image: url(images/02.jpg); 
}
 
.icon-03 {
  background-image: url(images/03.jpg); 
}
.icon-04 {
  background-image: url(images/04.jpg); 
}

---

上面的@each在循环的时候，使用的是普通的list,我们也可以使用map健值对来进行遍历，现在，我们就采用键值对的形式来完成一次遍历，代码如下：

$imgList:(1:"img1",2:"img2",3:"img3",4:"img4");
@each $index,$content  in $imgList{
    .div#{$index}{
        background-image: url(images/#{$content}.jpg);
    }
}

说明：上面的代码经过编译后，如下所示

.div1 {
  background-image: url(images/img1.jpg); 
}
.div2 {
  background-image: url(images/img2.jpg); 
}
.div3 {
  background-image: url(images/img3.jpg);
}
.div4 {
  background-image: url(images/img4.jpg); 
}

@content占位

@content占位符一般情况下是指在混合器当中，我们在写混合器内部样式的时候，又不确定内部样式如何去操作，这个时候，我们就会使用混合器中的占位@content来完成，具体请见下面代码:

@mixin flex-box($dir){
    display: flex;
    flex-direction: $dir;
    @content;
}
.div1
{
    @include flex-box(row){
        justify-content: center;
        align-items: center;
    }
}

上面的代码经过编译以后，得出如下结果

.div1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
}