sass 学习笔记4

最新推荐文章于 2024-11-02 12:11:54 发布

前端白子

最新推荐文章于 2024-11-02 12:11:54 发布

阅读量77

点赞数

文章标签： sass 学习 css

本文链接：https://blog.csdn.net/Choiceanxiety/article/details/129318429

版权

文章介绍了Sass中的条件控制语句，包括@if,@else,@for,@while的用法，以及如何使用它们来控制样式编写。同时讲解了@each用于遍历数组和映射（map）的功能，并给出了相应的代码示例及转换后的CSS结果。

摘要由CSDN通过智能技术生成

sass条件控制
1、@if 条件 { } @else if 条件 { }@else { }:可多个嵌套，可在选择器内使用，也可在外部使用（可以用此条件选择对应的选择器进行样式编写）

2、@for语句：

1）@for $i(自增变量） from 1(开始） through 3 (结束）{ }
—through:包括结束值；
2）@for $i(自增变量） from 1(开始） to 3(结束） { }
—to:不包括，小于3（结束值-1）;

3）遍历数组：使用 through 因下标是从1开始，包括结束值；

获取数组长度length(数组名）

3、@while语句：@while 条件{ }
4、@each语句：与@map紧密结合
@each $key,$value in $map{ }

举例：

$keyClass: 'div';
/* if 外部使用 */
@if  $keyClass == 'div'  {  
    .div{  color:red    }  
} 
@else {  
      .div{   color:blue      }   
}
/* if 内部使用 */
.div {
    @if  $keyClass != 'div'  {  
        color:red; 
    } 
    @else {  
        color:blue  
    }
}
/* 循环for-to */
@for $m from 1 to 3 {
    .span#{$m} {
        color: red;
    }
}
/* 循环for-through */
@for $m from 1 through 3 {
    .span#{$m} {
        color: yellow;
    }
}

/* 循环for/while */
$i: 3;
@while $i > 0 {
    .item#{$i} {
        width: 10px;
    }
    $i: $i - 1;
}

/* 遍历each */
$map:(top: 1px,left: 10px);
.map{
    @each $key , $value in $map {
        #{$key}:$value;
    }
}

转译css的结果

@charset "UTF-8";
/* if 外部使用 */
.div {
  color: red;
}

/* if 内部使用 */
.div {
  color: blue;
}

/* 循环for-to */
.span1 {
  color: red;
}

.span2 {
  color: red;
}

/* 循环for-through */
.span1 {
  color: yellow;
}

.span2 {
  color: yellow;
}

.span3 {
  color: yellow;
}

/* 循环for/while */
.item3 {
  width: 10px;
}

.item2 {
  width: 10px;
}

.item1 {
  width: 10px;
}

/* 遍历each */
.map {
  top: 1px;
  left: 10px;
}