sass作用域和循环指令

sass作用域和循环指令

作用域：

声明变量：

全局变量：

在页面的最外边声明的变量是全局变量。拥有全局作用域

局部变量：

在某个选择器内或函数内声明的变量就是局部变量 ， 拥有局部作用域

变量的作用域：

全局作用域: 在任何地方都可以访问使用

局部作用域: 只能在变量声明的地方使用

html结构：

<ul class="wrap">
    <li>
        <div class="list">
            <div>变量作用域</div>
        </div>
    </li>
    <li>
      <p>段落</p>
   </li>
</ul>

scss代码：

//全局变量（全局作用域）
$len:200px;
$col:green;
$bc:pink;
.wrap{
    width: $len;
    font-size:50px;
    p{
        height: $len;
        color:$col;
    }
    .list{
        // 局部变量 仅在list里面生效
        // $col:red;
        width: $len;
        height: $len;
        div{
            // 局部变量 仅在list下的div里面生效
            // $col:skyblue;
            padding:$len;
            color:$col;
        }
    }
}

循环指令：

html结构：

<p class="text1 head1">1</p>
<p class="text2 head2">2</p>
<p class="text3 head3">3</p>
<p class="text4 head4">4</p>

for循环：

① for-to 形式

@for $i from start to end{ }
$i: 声明的变量
start: 循环变量的起点值
end: 循环变量的终点值
to: 关键字， 包含起点start 不包含终点end

scss代码：

@for $i from 1 to 4{
    .text#{$i}{
        color: green;
        font-size: 20px * $i;
    }
}

转换后css代码：

.text1 {
  color: green;
  font-size: 20px;
}
.text2 {
  color: green;
  font-size: 40px;
}
.text3 {
  color: green;
  font-size: 60px;
}
/*# sourceMappingURL=07-sassLoop.css.map */

② from-through 形式

@for $i from start through end{ }
$i: 声明的变量
start: 循环变量的起点值
end: 循环变量的终点值
through: 关键字， 包含起点start 和 终点end

scss代码：

@for $i from 1 through 4{
    .text#{$i}{
        color: green;
        font-size: 20px * $i;
    }
}

转换后css代码：

.text1 {
  color: green;
  font-size: 20px;
}
.text2 {
  color: green;
  font-size: 40px;
}
.text3 {
  color: green;
  font-size: 60px;
}
.text4 {
  color: green;
  font-size: 80px;
}
/*# sourceMappingURL=07-sassLoop.css.map */

while循环：

@while 表达式 {
// 样式
// 控制循环终止的语句 ： 改变表达式的结果为假才能终止循环
}

scss代码：

$a:4;
@while $a > 0 {
    //循环条件不满足时会自动之终止循环
    .text#{$a}{
        width:200px * $a;
    }
    //循环控制语句： 实现终止循环的操作
    $a:$a - 1;
}

css代码：

.text4 {
  width: 800px;
}
.text3 {
  width: 600px;
}
.text2 {
  width: 400px;
}
.text1 {
  width: 200px;
}
/*# sourceMappingURL=07-sassLoop.css.map */

each循环：

sass 可以定义数组：可以通过 空格 或者 逗号 定义数组
$mt: 20px 50px ;
$cname : 's1.jpg', 's2.jpg'

scss代码：

// 可以遍历数组
@each $mt in 20px 50px {
    p{
        margin: $mt;
    }
}
@each $pic in 'head1','head2','head3','head4' {
    .#{$pic}{
        width: 200px;
        height: 200px;
        background: url(../img/#{$pic}.webp) no-repeat 0 0/cover;
    }
    
}

css代码：

p {
  margin: 20px;
}

p {
  margin: 50px;
}

.head1 {
  width: 200px;
  height: 200px;
  background: url(../img/head1.webp) no-repeat 0 0/cover;
}

.head2 {
  width: 200px;
  height: 200px;
  background: url(../img/head2.webp) no-repeat 0 0/cover;
}

.head3 {
  width: 200px;
  height: 200px;
  background: url(../img/head3.webp) no-repeat 0 0/cover;
}

.head4 {
  width: 200px;
  height: 200px;
  background: url(../img/head4.webp) no-repeat 0 0/cover;
}
/*# sourceMappingURL=07-sassLoop.css.map */