Sass的了解和基本使用

Sass的了解和基本使用

Sass 是 css预处理器

1. vscode中安装easy sass插件

使用easy sass 插件会自动帮我我们把**.scss文件化成.css文件**

2.Sass的基本使用-使用变量

scss使用**$**符号来识别变量

$base-color: #666; // 声明变量

上面我们声明了一个名为**$base-color**的变量,我们可以把该变量用在任何位置

举例

.container {
    background-color: $base-color;
}

以空格分割的多属性值也可以标识变量

$base-border: 1px solid #666;

举例

.container {
    border: $base-border;
}

3.Sass的基本使用-嵌套语法

和 less 一样,scss同样支持嵌套型语法

比如把类名为.main的容器盒子的字体大小设置为30px

.container {
    .main {
        font-size: 30px;
    }
}

转化后

.container .main {
    font-size: 30px;
}

4.Sass的基本使用-&父选择器

假如你想针对某个特定子元素 进行设置,比如我们想给a标签增加一个hover效果

.container {
    a{
        color:blue;
        &:hover{
            color:red;
        }
    }
}

5.Sass的基本使用-模块引入

1. 新建base.scss

   $base-color: green;
   

2. 在style.scss中引入base.scss

   @import "./base.scss"
   .container {
         color: $base-color;  
   }
   

   https://www.sass.hk/docs/ 参考地址

.container {
color: $base-color;
}

https://www.sass.hk/docs/ 参考地址