css预处理器less和scss之sass介绍（二）

作者：Melody-Zhu1988 | 来源：互联网 | 2023-05-18 08:53

本来打算整理jQueryMobile来着，但是没有研究明白，所以接着上个周的继续介绍。。。【scss中的基础语法】1.scss中的变量①声明变量：$变量名:变量值$width:100px;$

本来打算整理jQuery Mobile来着，但是没有研究明白，所以接着上个周的继续介绍。。。

【scss中的基础语法】

1.scss中的变量
①声明变量：$变量名:变量值

$width:100px;
$position : left;
#div1{
    width: $width;
    height: $width;
    background-color: red;
    border-#{$position}: 10px solid yellow;
}

scss中，允许将变量嵌套在字符串中，但是变量必须使用井号包裹
2.scss中的运算，会将单位进行运算，使用时注意最终的单位是否正确，
3.scss中的嵌套:选择器嵌套、属性嵌套、伪类嵌套
①选择器嵌套ul{li{}}
嵌套默认后代选择器，如果需要子代选择器，则需加大于号
可以在选择器的大括号中使用and表示上一层的选择器。
②伪类嵌套 li{&:hover()}
在选择器{}中配合&使用伪类事件，可以表示当前选择器的

font:{
                    size: 16px;
                    weight:bold;
                    family:"微软雅黑";
                    style:"italic";
                };

对于属性名有分割为多段的属性，可以使用属性嵌套，属性名的前半部分必须紧跟，才能用()包裹属性的后半部分。
4.混合宏、继承、占位符
①混合宏使用 @mixin 声明混合宏，在其他选择器中使用 @include调用混合宏、
声明时可以有参数可以无参数，参数可以有默认值也可以咩有默认值，但是调用时，必须符合声明时的要求，与less中的混合相同。
优点，可以传参，不会产生同名的class
缺点，调用时会把混合宏中的所有代码copy到选择器中，产生大量冗余代码

例如

@mixin hunhe($color:green){
    color: $color;
}
.class3{
    @include hunhe;
    background-color: yellow;
}
.class4{
    @include hunhe;
    background-color: blue;
}

②继承声明一个普通的class，在其他选择器中使用@extend集成这个class
class1{} .class2(@extend.class1;)
优点，将相同的代码，提取到并集选择器，减少冗余代码
缺点，不能传入参数，生成多余的class

例如

.calss1{
    color: wheat;
}
.class{
    @extend .calss1;
}

③占位符使用%声明占位符，在其他选择器中使用@expend继承占位符；
优点，将相同的代码，提取到并集选择器，减少冗余代码
不会产产生一个多余的class
缺点不能传参

例如

%class1{
    color: wheat;
}
.class4{
    @extend .calss1;
    background-color: yellow;
}
.class5{
    @extend .calss1;
    background-color: green;
}

5.if条件结构
条件结构的大括号要写在选择器里面，条件结构的大括号直接包裹样式属性
@if条件{}
@else{}

例如

.class6{
    width: 100px;
    height: 100px;
    @if 1>2{
        background-color: yellow;  
    }
    @else{
        background-color: blue;
    }   

}
$i : 0;
@while $i<10{
    .while-#{$i}{
        border: #{$i}px soild red;
    }
    $i : $i + 1;
}
//
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

6.for循环

@for $i from 1 to 10{}//不包含10
@for $i from 1 through10{}//包含10

例如

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

7.@while循环
$i : 0
@while $i<10{
$i : $i + 1;
}

.class6{
    width: 100px;
    height: 100px;
    @if 1>2{
        background-color: yellow;  
    }
    @else{
        background-color: blue;
    }   

}
$i : 0;
@while $i<10{
    .while-#{$i}{
        border: #{$i}px soild red;
    }
    $i : $i + 1;
}
//
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

8.@each循环遍历
@each $item in a,b,c,d{
//$item表示a,b,c,d每一项
}

@each $item in c1,c2,c3,c4{
    $i : $i + 1;
    .#{$item}{
        border: #{$i}px soild red;
    }
}
@function func($num){
    @return $num*2;
}
.functest{
    width: func(10px);
}