scss语法入门

雨点打透心脏的1/2处 2022-05-26 09:21 405阅读 0赞

### 目录 ###

*   *   *  scss引入其他文件
         *  scss注释方法
         *  scss变量
         *  嵌套
         *  混合
         *  继承
         *  站位选择器
         *  函数
         *  其他功能
         *  项目中经常用到的功能

> scss 是 sass3的新版本，也是目前推荐的语法，以.scss结尾的文件  
> 所以 scss == sass3最新版本，目前就使用scss。

### scss引入其他文件 ###

1.引入其他 **.scss** 文件

@import 'index.scss'

这样的话，文件在编译后，会自动把引入的文件和当前文件合并为一个.scss文件

2.引入其他 **.css** 文件

@import 'index.css'

和引入.scss文件不同，这样引入的.css文件在编译后不会和当前文件合并为一个.scss文件，而是继续保持为外链引入方式

### scss注释方法 ###

> scss的注释有两种

1.块注释  
/\*  
\*/  
2.行注释  
//

### scss变量 ###

> scss变量分为3种，以$符号开头,后面紧跟变量名。变量名和变量值之间用冒号：分开

1.常规变量

$key: value;

2.默认变量

$key: value!default;
    
    默认变量是可以被覆盖的,具体覆盖方法如下
    $font: 12px;
    $font: 14px!default;

3.特殊变量

$fontSize:14px;
    font:#{ $fontSize}

4.多值变量

> 多值变量分为list和map两种类型，list类似于js的数组，map类似于对象

### 嵌套 ###

> 嵌套分为两种：1.选择器嵌套（目前经常使用的）、2.属性嵌套：不经常使用

1.  选择器嵌套

// scss 文件
    ul{ 
        li{ 
            a{ 
    
            }
        }
    }
    
    //解析为 css 文件
    
    ul{ 
    
    }  
    ul li { 
    
    }  
    ul li a{ 
    
    }
    
    //scss 在属性选择器中，&表示父元素选择器
    
    a{ 
        &:hover{ 
    
        }
    }
    
    //解析为 css 文件
    a{ 
    
    }
    a:hover{ 
    
    }

1.  属性嵌套

// scss 文件
    div{ 
        border{ 
            top:{ 
                width:1px;
            }
            left:{ 
                width:2px;
            }
        }
    }
    
    //解析为 css 文件
    
    div{ 
        border-top:1px;
        border-left:2px;
    }

### 混合 ###

> @mixin 调用@mixin方法需要使用 @include

// scss 普通混合
    
    @mixin font{ 
        line-height:10px;
        color: #fff;
    }
    
    .footer{ 
        @include font;
    }
    
    // 解析为 css 文件
    
    .footer{ 
        line-height: 10px;
        color: #fff;
    }
    
    // scss 文件
    
    @mixin font($size:12px){   //默认参数 默认12px
        font-size: $size;
    }
    
    .footer{ 
        @include font(16px);
    }

### 继承 ###

> 使用继承会让该选择器继承指定选择器的所有样式,要使用关键词@extend，后面跟上指定的选择器

// scss文件
    .font{ 
        font-size:14px;
        height: 16px;
    }
    .footer{ 
        @extend .font;
        border-width: 2px;
    }
    
    //解析问 css 文件
    
    .font, .footer{ 
        font-size:14px;
        height: 16px;
    }
    .footer{ 
        border-width: 2px;
    }

### 站位选择器 ###

> %选择器名，通过@extend 去调用，如果不调用，则文件编译后不会出现改该冗余css文件

// scss 文件
    %dir{ 
        font-size: 14px;
    }
    %clear{ 
        overflow: hidden;
    }
    div{ 
        @extend %dir;
    }
    
    /*只有 %dir 选择器被调用了，%clear 在编译的时候会被当做冗余文件给过滤掉，不会出现在编译后的.css文件中*/

### 函数 ###

> sass 内置了很多函数，自己也可以定义函数。以 @function 开始 @return 返回值

//scss 文件
    @function per($data){ 
        @return $data/10 + px;
    }
    
    div{ 
        font-size: per(140);
    }
    
    //解析为 css文件
    div{ 
        font-size: 14px;
    }

### 其他功能 ###

其他功能包括以下几点

1.  运算：对于（数字，颜色，变量）的四则（加减乘除）运算,运算符前后各保留一格空格
2.  if判断：@if可以单独使用，也可以配合@else、@else if 一起使用
3.  三目运算符：if(true,1px,2px)，返回的值是1px,if(false,1px,2px),返回的值是2px
4.  for循环，共有两种写法，1：@for $var from through  
    2：@for $var from to 。两种写法唯一的区别就是，through包括end这个数，to不包括end这个数。
5.  each循环，@each $var in ,list和map分别表示为list和map类型数据。

### 项目中经常用到的功能 ###

1.  变量
2.  嵌套
3.  &
4.  函数：用于移动端页面计算rem或者vw最佳