SCSS的基本使用

- 日理万妓 2023-10-03 11:03 17阅读 0赞

**目录**

1.是什么

2.理解sass、scss、less、css的区别

3.SCSS-基本语法

4.支持嵌套语法

5. &父选择器

6.模块

--------------------

#### 1.是什么 ####

--------------------

**官方文档：https://www.sass.hk/**

**简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。**

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

--------------------

#### 2.理解sass、scss、less、css的区别 ####

--------------------

less, sass, scss都是**css预处理语言**（也是对应的文件后缀名），它们的语法功能比css更强大。

--------------------

**预处理语言使用的方式是**：**开发**时用**预处理语言**，在**打包上线**时，用webpack再配合loader工具给**转成css**（Cascading Style Sheets）给浏览器使用。

--------------------

**后缀名：**SASS（**S**yntactically **A**wesome **S**tyle**S**heets）版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss

--------------------

**语法规范方面的区别：**

sass没有`{}`和`;`, 有严格的缩进规范

scss和css的缩进规范是一致的

注意：如使用vscode 可以安装一个名为**`easy sass`** 的插件，它会自动的帮助我们把.scss 转化 .css

--------------------

####  ####

### 3.SCSS-基本语法 ###

--------------------

**变量**

**作用是：比如说页面中使用这个颜色的地方有100个，到时候只需改这个变量，100个地方的颜色也会随之改变**

**SCSS使用****`$`符号****来标识变量**

--------------------

**变量的定义**

$highlight-color: #f90;
    $basic-border: 1px solid black;

**上面我们声明了名为`$highlight-color` 和`$basic-border`的变量, 随后我们就可以使用变量了。**

--------------------

**变量的使用**

#app {
        background-color: $highlight-color;
      	border: $basic-border;
    }

--------------------

####  ####

#### 4.支持嵌套语法 ####

--------------------

**和less一样，scss同样支持****`嵌套型`****的语法**

--------------------

// scss语法
    $highlight-color: #f90;
    $basic-border: 1px solid black;
    
    #app{
      background-color:  $highlight-color;
      border:$basic-border;
      .container{
        font-size:30px;
      }
    }

**等同于转化为css后的**

等同于CSS语法
    #app {
      background-color: #f90;
      border: 1px solid black;
    }
    
    #app .container {
      font-size: 30px;
    }

--------------------

####  ####

#### **5. &父选择器** ####

--------------------

**假如你想针对某个特定子元素 进行设置(注意看&符号的位置)**

--------------------

$highlight-color: #f90;
    $basic-border: 1px solid black;
    
    #app{
      background-color:  $highlight-color;
      border:$basic-border;
      .container{
        font-size:30px;
      }
      a{
        color:blue;
        &:hover{
          color: red;
        }
      }
    }

--------------------

####  ####

#### 6.模块 ####

--------------------

**一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。**

**例如：在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了**

--------------------

**引入格式：**

@import './xxxx.scss';

--------------------

**举个实际的例子：**

**步骤1： 新建`base.scss文件`，并定义变量**

$base-color: green;

**步骤2： 在`test.scss文件中`中引入`base.scss（注意看@import）`**

@import './base.scss';
    $highlight-color: #f90;
    $basic-border: 1px solid black;
    #app{
      background-color:  $base-color;
      border:$basic-border;
      .container{
        font-size:30px;
      }
      a{
        color:blue;
        &:hover{
          color: red;
        }
      }
    }

--------------------

**总结：**

scss与less类似，只是一种css样式的**预处理语言** (浏览器不能直接使用的，需要转成css)

很多用法都与less类似（变量，嵌套，模块化）不需要花太多精力去学习它。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210715123642891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70