scss的一些使用【没得import版】

0.变量和运算

$变量

$width: 10px;
#main{
    width: $width;
}

支持块级作用域，如果要变成全局的就在定义的后面加!global声明。

#main{
    $width: 10px !global;
    width: $width;
}
#p{
    width: $width;
}

数据类型：数字、字符串、颜色、布尔型、空值null、数组list【用空格或逗号隔开】、maps相当于js的对象【(key:value,key1:value1)】 

运算：支持加减乘除和取整【+ - * / %】

1.混合！mixin

混合是通过@mixin指令创建，由@include进行使用的。

 eg.html代码如下：

<div class="num1">11</div>
<div class="num2">22</div>

创建一个名为fontNum的混合并给num1和num2使用它：【p:  scss的连接符号-和_一样】

@mixin fontNum {
    font-size: 20px;
    color: red;
    font-weight: bold;
}
.num1, .num2{
    @include fontNum();
}

除了fontNum的样式还要搞其他样式的话，直接在下面加就行了，如下：

@mixin fontNum {
    font-size: 20px;
    color: red;
    font-weight: bold;
}

.num1{
    @include fontNum();
    color: yellow;
    font-style: italic;
}
.num2{
    @include fontNum();
}

2.继承！extend

emmm就是跟混合器看着差不多其实差很多的，混合是将定义的代码反复使用，继承是复制选择器！，继承不仅会继承选择器的所有样式，连同跟选择器有关的组合选择器也会被继承，具体看例子。

html如下

<div class="two">好好吃饭天天向上
    <p>我在这里放个p</p>
</div>

如果写上个one的类选择器的样式，然后在two里继承的话，是可以继承到one的所有样式的，以及one相关的p里的样式也会被继承下来。

.one{
    color: red;
    font-size: 30px;
}
.one p{
    color: green;
}
.two{
    @extend .one;
    background: blue;
}

 

3.条件语句 

@if @else if @else

先定义变量numbers为"num1"，再写判断呢

$numbers: num1;
p{
    @if $numbers == num1{
        color: red;
    }@else if $numbers == num2{
        color: yellow;
    }@else{
        color: #666;
    }
}

效果就是p标签的color：red哦！

@for

在限制的范围内重复输出格式！

@for $var from <start> through <end>

或@for $var from <start> to <end>

区别在于 ： through条件范围包含 <start> 与 <end> 的值， to 条件范围只包含 <start> 的值不包含 <end> 的值。var可以是任何变量。

<div :class="`item-${i}`" v-for="i in 3" :key="i">
   我在这里
</div>

@for $i from 1 through 3{
    .item-#{$i} {
        font-size: 10px * $i;
    }
}

 

【瞎记：through长一些就包括end的值，to短一些不包括】

@each

$var in <list>相当于对象的for in  包括in后面的。list是一连串的值。var可以是任何变量。

<div :class="`item-${val}`" v-for="(val,i) in ['red','yellow','blue']" :key="i">
    我在这里
</div>

@each $i in red,yellow,blue{
    .item-#{$i} {
        color: $i;
    }
}

 

@while

重复输出直到表达式返回为false，可以实现比for更复杂的循环，很少用到。

<div :class="`item-${i}`" v-for="i in 8" :key="i">
    我在这里
</div>

$i: 8;
@while $i > 0{
    .item-#{$i}{
        font-weight: bold;
    }
    $i: $i - 3
}