scss的基本用法

注释/* */与 //

支持标准的css多行注释/* */，和单行注释 // ，前者会被完整输出到编译后到css文件中，后者则不会

插值语法也可以写进多行注释中输出变量值：

1 $version:"1.0.0";
2 /* This CSS is generated by My Snazzy Framework version #{$version}. */
3 
4 编译为：
5 
6 /* This CSS is generated by My Snazzy Framework version 1.0.0.*/

 

& 父选择器

在嵌套的代码块内，可以使用&引用父元素

 1 .content{
 2    font-size: 30px;
 3    &:hover{
 4         color: red;
 5    }
 6    &-title{
 7        font-size: 40px;
 8    }
 9    &-text{
10       padding: 0 20px; 
11    }
12 }
13 
14 编译为：
15 
16 .content{
17      font-size: 30px;
18      content:hover{
19           color: red;
20      }
21      content-title{
22           font-size: 40px;
23      }
24      content-text{
25           padding: 0 20px; 
26      }
27 }

 

属性嵌套

我们在写css样式是，难免会遇到如：font-family, font-size, font-weight 都以 font 作为属性的命名空间，为了方便管理，节省代码输入可以使用属性嵌套方法：

 1 .nav{
 2    font:{
 3         family: PingFangSC-Regular;
 4         size: 30px;
 5         weight: 700;
 6    }
 7 }
 8 
 9 编译为：
10 
11 .nav{
12      font-family: PingFangSC-Regular;
13      font-size: 30px;
14      font-weight: 700;
15 }

命名空间还可以包含自己的属性值：

 1 .nav{
 2     border: 1px solid #333 {
 3     left: 10px;
 4     top:30px;
 5     }
 6 }
 7 
 8 编译为：
 9 
10 .nav{
11     border: 1px solid #333;
12     border-left: 10px;
13     border-top: 30px;
14 }

 

变量 $

变量以美元符号($)开始，赋值和设置css属性写法一样

1 $width: 10px;
2 
3 使用方法：
4 
5 .div{
6     width: $width;
7 }
8 编译为：
9 .div{
10    width: 10px;
11 }

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量：

 1 $name: box;
 2 $attr: border;
 3 p .#{$name} {
 4   #{ $attr }-color: blue;
 5 }
 6 
 7 编译为：
 8 
 9 p .box {
10   border-color: blue; 
11 }

 

@each

一：@each指令的格式是$var in <list>

  • $var:它代表了变量的名称
  • <list>是一连串的值，也就是值列表

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果

1 @each $color in red, green, yellow, blue {
2   .p_#{$color} {
3     background-color: #{$color};
4   }
5 }

 

二：@each多重分配

多个值也可以用 @each 指令中使用。如， $var1, $var2,$var3, ... in <list>.  语法：(@each $var1, $var2, $var3 ... in <list>)

  • $var1, $var2 和 $var3: 这些代表变量的名称。

  • <list>: 它代表列表的列表，每个变量将持有子列表的元素。

 1 @each $color, $border in (aqua, dotted),(red, solid),(green, double){
 2   .#{$color} {
 3     background-color : $color;
 4     border: $border;
 5   }
 6 }
 7 
 8 编译为：
 9 
10 .aqua {
11   background-color: aqua;
12   border: dotted; }
13 
14 .red {
15   background-color: red;
16   border: solid; }
17 
18 .green {
19   background-color: green;
20   border: double; }

 

三：@each 指令中使用多重分配与映射。如， $var1, $var2 in <map>

多重任务可以很好地处理映射，他们被认为是列表对。如果你想使用映射，那么必须改变@each声明和使用多个任务。

  • $var1, $var2: 这些代表变量的名称

  • <map>: 它表示列表对

 1 $flex-jc: (
 2   start: flex-start,
 3   end: flex-end,
 4   center: center,
 5   between: space-between,
 6   around: space-around,
 7   evenly: space-evenly,
 8 );
 9 
10 @each $key, $value in $flex-jc {
11   .jc-#{$key} {
12     justify-content: $value;
13   }
14 }
// 结果为： .jc-start{ justify-content: flex-start }, .jc-end{ justify-content: flex-end } ...

还有很多其他的scss语法，这里只展示部分用法，具体可查阅官方文档

 

posted @ 2022-03-26 23:51  Naynehcs  阅读(241)  评论(0)  编辑  收藏  举报