SCSS的具体详解和与less的区别

た入场券 2023-07-24 05:47 30阅读 0赞

# 一、SCSS的四种输出格式与SCSS与Sass的区别 #

可以参考[这位老哥的][Link 1]  
简单来说  
**SCSS更简单一点，没有什么奇怪的语法与奇怪的缩进，与less相差不大，利于使用与学习（推荐）**  
**Sass有更加严格的语法（反正我看起来怪怪的）**  
**不过SCSS与Sass是同宗同族的，不过Sass是老大哥**

# 二、注释 #

**与less相同**

> 关于/\*\*/  
> 多行注释，会在原生css文件里面保留注释，但在压缩时注释就会消失

/*下面是SCSS文件*/
    
    /* .container div:nth-child(odd){ background-color: #eee; } .container div:nth-child(even){ background-color: #ccc; }*/
    
    
    /*下面是对应的SCSS文件生成的css文件*/
    
    /* .container div:nth-child(odd){ background-color: #eee; } .container div:nth-child(even){ background-color: #ccc; }*/

> 关于//  
> 单行注释，不会在原生css文件里面保留注释，也不会在压缩的文件里面显示

/*下面是SCSS文件*/
    
    //.container div:nth-child(odd){ 
    //  background-color: #eee;
    //}
    //.container div:nth-child(even){ 
    //  background-color: #ccc;
    //}
    
    
    /*下面是对应的SCSS文件生成的css文件*/
    
    什么也没有

> /\*!\*/  
> 强制注释，会在原生css文件里面保留注释，也会在压缩的文件里面显示

/*下面是SCSS文件*/
    
    /*! .container div:nth-child(odd){ background-color: #eee; } .container div:nth-child(even){ background-color: #ccc; }*/
    
    
    /*下面是对应的SCSS文件生成的css文件*/
    
    /* .container div:nth-child(odd){ background-color: #eee; } .container div:nth-child(even){ background-color: #ccc; }*/

# 三、变量 #

变量定义要使用$符号（less是@符号定义变量），也可给属性定义变量（不过less是使用@\{name\}的方式）

/*SCSS*/
    $primary:#ccc;					/*定义变量*/
    $b:border;
    $bg:background;
    $url:"image.jpg";
    $primary-plus:1px solid $primary;	/*定义变量里面使用变量*/
    .container div:nth-child(even){ 
      #{ $bg}-color: $primary;	/*使用变量*/
    }
    .container div:nth-child(odd){ 
      background-color: #eee; #{ $b}: $primary-plus;			/*使用变量*/
    }
    .box2{ 
      background-image: url($url);
    }
    /*CSS文件*/
    .container div:nth-child(even) { 
      background-color: #ccc;
    }
    .container div:nth-child(odd) { 
      background-color: #eee;
      border: 1px solid #ccc;
    }
    .box2 { 
      background-image: url("image.jpg");
    }

# 四、嵌套 #

### 与less相同的地方 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

### 不过与less不同的是SCSS有属性的嵌套 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]

# 五、伪类的使用 #

**与less相同**  
![在这里插入图片描述][20200409195306645.png]

# 六、混合（类似与函数，在语法上面与less不尽相同） #

混合必须用@mixin来定义，@include来调用

### 固定值的混合 ###

/*SCSS*/
    @mixin a{ 							/*固定值的混合*/
      width: 100px;
      height: 100px;
    }
    ul{ 
      @include a;						/*混合的引用*/
      border: 1px black solid;
    }
    /*生成的css*/
    ul { 
      width: 100px;
      height: 100px;
      border: 1px black solid;
    }

### 可变化值的混合 ###

/*SCSS*/
    @mixin a($with:100px,$color:red,$height){ 	/*带有变量有更好的机动性，且这些变量有一些有初始值*/
      width: $with;
      height: $height;
      background-color: darken($color,20%);			/*darken（v1，v2）颜色加深函数，v1代表需要加深的颜色，v2代表加深的百分比*/
    }
    ul{ 
      @include a($height:100px);					/*调用混合，当使用命名空间的时候混合里面的变量顺序就不重要了*/
      border: 1px black solid;
    }
    /*生成的css*/
    ul { 
      width: 100px;
      height: 100px;
      background-color: #990000;
      border: 1px black solid;
    }

# 七、继承（作用与less相同，但语法与less不同） #

它只能继承固定值的混合且会继承被继承者所有使用的选择器，可以增加代码的复用性，但灵活性不强

/*SCSS*/
    .aa{ 
      width: 200px;
      height: 200px;
      border: 1px;
    }
    .aa .color{ 
      background-color: #0f0f0f;
    }
    .box:nth-of-type(1){ 
      @extend .aa;				/*继承*/
    }
    /*生成的css*/
    .aa, .box:nth-of-type(1) { 			/*继承了aa类的所有选择器*/
      width: 200px;
      height: 200px;
      border: 1px;
    }
    
    .aa .color, .box:nth-of-type(1) .color { 
      background-color: #0f0f0f;
    }

# 八、文件引入 #

/*ppp.scss文件*/
    @import "ooo";				/*原文件名为_ooo.scss，这里允许这样的简写*/
    /*_ooo.scss文件，注意文件必须要以_开头*/
    *{ 
      padding: 0;
      margin: 0;
    }

这里的引入的文件会被当成一个partials，**也就是说该文件不会被立即编译成css文件，只有在import的时候才会去编译\_ooo.scss文件**，但要注意的是文件必须要以\_开头

# 九、Data Type #

有number、string、list、map、color、boolean…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]

### list类型的数据格式为： ###

$list:1px blue solid;
    /*$name:value*/

### map类型的数据格式为： ###

$map:(light:#ffffff,dark:#000000,border:1px blue solid);
    /*$name:(key1:value1,key2:value2,key3:value3,...)，这里的key不是css属性*/

### color类型的数据格式为： ###

$color:#ffffff;
    /*$name:value*/

### boolean类型数据： ###

$bool:true;
    /*$name:value*/

**less里面没有type-of（）方法**

# 十、运算 #

**与less里面有一定的区别**

/*数字运算*/
    width: (200px/2);						/*100px，这里要加括号，因为/是特殊字符*/				
    width: (200px/2px);						/*100，这里的px会被抵消掉*/
    width: 200px+200;						/*400px*/
    width: (200px-150);						/*50px，这里要加括号，因为-是特殊字符*/
    width: 20px*10px;						/*这里会发送错误，因为px*px了*/
    width: 20px*10;							/*200px*/
    
    /*string运算，结果分为带引号的字符串与不带引号的字符串*/
    border: 3px bla+ck solid;				/*3px black solid*/
    border: 3px "bla"+ck solid;				/*3px "black" solid*/
    width: 150+'px';						/* '150px' */
    width: 150+px;							/*150px*/
    border: 3px bla-ck solid;				/*3px bla-ck solid*/
    border: 3px bla\ck solid;				/*3px bla\ck solid*/

# 十一、函数 #

### 数字函数 ###

/*number*/
    abs(num)									/*绝对值*/
    round(num)									/*四舍五入*/
    ceil(num)									/*上取整*/
    floor(num)									/*下取整*/
    percentage(num)							/* 0<num<1，获得值的百分比*/
    min(num)									/*最小值*/
    max(num)									/*最大值*/

### 字符串函数 ###

/*string*/
    to-upper-case(str)							/*全部字母大写*/
    to-lower-case(str)							/*全部字母小写*/
    str-length(str)								/*字符串的长度*/
    str-index(str,str1)							/*获取指定字符str1串在原字符串的位置*/
    str-insert(str,str1,index)					/*插入指定字符串str1到原字符串的index位置(从1开始)*/

例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]

### 颜色函数 ###

/*color*/
    rgb(v1,v2,v3)								/*红绿蓝*/
    rgba(v1,v2,v3,v4)							/*红绿蓝+透明度*/
    hsl(v1,v2,v3)								/*色相，饱和度，明度*/
    hsla(v1,v2,v3,v4)							/**色相，饱和度，明度+透明度*/
    adjust-hue(v1,v2)							/*给v1颜色调整为v2度数的颜色*/
    lighten(v1,v2)								/*给v1颜色增加v2的明度*/
    darken(v1,v2)								/*给v1颜色减小v2的明度*/
    saturate(v1,v2)								/*给v1颜色增加v2的饱和度*/
    desaturate(v1,v2)							/*给v1颜色减小v2的饱和度*/
    opacify(v1,v2)								/*给v1颜色增加v2的不透明度*/
    transparentize(v1,v2)						/*给v1颜色增加v2的透明度*/

例子：  
**adjust-hue(v1,v2)**  
![在这里插入图片描述][20200409223043146.png]  
**lighten(v1,v2)与darken(v1,v2)**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]  
**saturate(v1,v2) 与desaturate(v1,v2)**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]  
**opacify(v1,v2)与transparentize(v1,v2)**  
![在这里插入图片描述][2020040922471271.png]

### 列表函数 ###

/*list*/
    length(list)										/*获得列表数据list的长度*/
    nth(list,index)										/*获得列表数据list内的第index个数据（从一开始）*/
    index(list,value)									/*获得在列表数据list内的值为value的数据的索引（从一开始）*/
    append(list1,list2)									/*在列表数据list1的后面添加列表list2的数据*/
    join(list1,list2,value)								/*把列表数据list1与list2连接起来，value是分隔符（value可以有也可以没有）*/

例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]

### map函数 ###

length(map)									/*返回map类型数据的个数*/
    map-get(map,key1)							/*得到map类型数据内的key=key1的数据*/
    map-keys(map)								/*得到map类型数据内的所有key值*/
    map-values(map)								/*得到map类型数据内的所有value值*/
    map-has-key(map,key1)						/*判断map类型数据内的是否存在对应的key1，返回true|false*/
    map-merge(map1,map2)						/*把map1与map2合并*/
    map-remove(map,key1,key2,...)				/*去除map内的key为key1，key2的项*/

例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][20200410084010965.png]

### 自定义函数 ###

@function 名字(形参1，形参2){ 
      .......
    }

例子：  
**错误时的错误信息（提示信息会显示在css文件里面）**  
@error  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 8]  
**错误时的警告信息（提示信息会显示在命令行上面）**  
@warn  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 9]

# 十二、布尔值的判断 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 10]

# 十三、控制指令 #

### @if，@else if，@else ###

/*SCSS*/
    $v:2;
    @if $v>5 { 
      border:5px blue solid;
    }
    @else if $v>2 { 
      border:2px blue solid;
    }
    @else { 
      border:1px blue solid;
    }
    /*CSS文件*/
    border: 1px blue solid;

### @for ###

@for $i from 1 to 3{ 				/*从1到3，不包括3，也支持从大到小遍历*/
        ...
      }
    @for $i from 1 through 3{ 			/*从1到3，包括3，也支持从大到小遍历*/
      ...
    }

### @each（只能是list类型，不能是map类型的） ###

/*SCSS文件*/
    $icons:success error warning;				/*这是一个由不带引号的字符串组成的list*/
    @each $icon in $icons{ 
      icon-#{ $icon}{ 							/*这里使用#{$icon}的原因是因为它被包含在一个属性内*/
        background-image: url("../images/#{$icon}.jpg");	/*这里使用#{$icon}的原因是因为它被包含在一个字符串内*/
      }
    }
    /*CSS文件*/
    icon-success { 
      background-image: url("../images/success.jpg");
    }
    
    icon-error { 
      background-image: url("../images/error.jpg");
    }
    
    icon-warning { 
      background-image: url("../images/warning.jpg");
    }

### @while ###

/*SCSS*/
    $n:6;
    @while $n>0{ 
      .item-#{ $n}{ 							/*这里使用#{$icon}的原因是因为它被包含在一个属性内*/
        background-image: url("../images/image0#{$n}.jpg");		/*这里使用#{$icon}的原因是因为它被包含在一个字符串内*/
      };
      $n:$n - 3;							/*$n减小，不能使用$n--，且减号两边必须有空格因为减号是特殊符号*/
    }
    /*CSS文件*/
    .item-6 { 
      background-image: url("../images/image06.jpg");
    }
    
    .item-3 { 
      background-image: url("../images/image03.jpg");
    }

本文只用于个人学习与记录

[Link 1]: https://blog.csdn.net/longzhoufeng/article/details/72235766
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/40ea22f0daa34794ad9fa3b9babd3316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/5da9a5e9369a4d1f87d2ca40e002480e.png
[20200409195306645.png]: /images/20230528/3445cb2e5c8c4528912e1513d41f3f30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230528/4ed1a3deb9db485a865363e36775ab29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]: /images/20230528/a8303580df1148c5817f8e93149e3060.png
[20200409223043146.png]: /images/20230528/e727f847b48542069bdd294510ab71a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]: /images/20230528/2de6e4318edc42da8fef2341384036f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]: /images/20230528/e93ed2d33b7f42d095470694efe659ac.png
[2020040922471271.png]: /images/20230528/4d8a2aac39314204888e648dbbcc48aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]: /images/20230528/14cf77e74de941da9e1c93dde0c023b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 7]: /images/20230528/11aced89734b4437b4c361ecf6b1c6c7.png
[20200410084010965.png]: /images/20230528/9878607c2c2a46e481d30f23ad91d15c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 8]: /images/20230528/a47c17049a6b4d3791eb99199a335e66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 9]: /images/20230528/63e43a3090e14495afe6d0ed2b728749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 10]: /images/20230528/b4b7d743e70b4ba4a12bb15eefad8106.png