0.邂逅 SCSS

我们在使用脚手架 Vue cli 或者 Vite 创建 Vue 项目的时候,会发现在 css 样式标签那里有一个 lang="scss" 的属性,那 scss 是什么玩意?
专业术语:SCSS 是一种预处理器语言,是 CSS 的一种扩展。
大白话: SCSS 就像是游戏中的 Buff,因为它支持定义变量、嵌套、混合等功能,所以它会让 CSS 变得更加强大,并且更容易维护。
使用 SCSS 这玩意之后,编译后的代码还是 CSS。
1. SCSS 核心知识点
1.1 变量
作用: 主要用来存一些重复使用的值,比如尺寸、颜色等等。方便统一管理。
定义变量语法规则: 以 ** <math xmlns="http://www.w3.org/1998/Math/MathML"> ∗ ∗ 开头,并且 ** 开头,并且 </math>∗∗开头,并且 后面不能直接跟数字。
css
// 定义变量
$bgColor: #a173f3;
$spaceSize: 20px;
// 使用变量
.header {
background: $bgColor;
padding: $spaceSize;
}
1.2 嵌套
作用:可以很直观的展示 html 结构层级关系,减少重复代码
scss
.div {
ul {
li {
display: block;
a {
color: red;
&:hover { // & 表示父选择器
text-decoration: underline;
}
}
}
}
}
**注:**在 SCSS 中,& 符号用于引用父元素类名,实现嵌套规则的简化书写。例如:
css
.father {
&-container {
margin: 66px;
}
&-text {
font-size: 20px;
}
}
编译后对应的CSS代码为:
css
.father-container {
margin: 66px;
}
.father-text {
font-size: 20px;
}
1.3 混合 (Mixins)
作用 :就像 js 中的函数 一样,是一个可以重复利用的样式代码块,并且支持参数。
@mixin 用来定义样式代码块,@include 用来使用样式代码块。
css
// 定义 Mixin
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
// 使用 Mixin
.button {
@include border-radius(5px);
}
1.4 继承
作用:继承可以让一个选择器继承另一个选择器的样式。就是儿子继承爹的样式。
css
// 定义基础样式
.father-style {
color: $primary-color;
font-size: $font-size;
}
// 继承样式
.son-style {
@extend .father-style;
font-size: 20px;
}
1.5 运算
作用:在 css 中对数值进行加减乘除操作
scss
$base-size: 10px;
.header-content {
font-size: $base-size * 3; // 30px
width: 100% - 40%; // 60%
padding: ($base-size / 5); // 2px
}
1.6 函数
作用:SCSS 提供了一些内置函数,也可以自定义函数,用来计算值。
css
// 使用内置函数
body {
font-size: em(16px);
}
// 自定义函数
@function doubleTwo($num) {
@return $num * 2;
}
// 使用自定义函数
.header {
height: doubleTwo(66px);
}
1.7 条件与循环
作用:动态生成样式:if判断、for循环、each 遍历。
css
// If 判断
@mixin myStyle($flag: false) {
@if $flag {
background: red;
color: white;
} @else {
background: green;
color: black;
}
}
// For 循环
@for $i from 1 to 10 {
.col-#{$i} {
width: 100% / $i;
}
}
// Each 遍历
$sizes: small, medium, large;
@each $size in $sizes {
.icon-#{$size} {
font-size: if($size==large, 14px,20px);
}
}
1.8 模块化
作用:就是根据一些功能拆分文件,便于统一管理和维护。 例如你可以新建一个 myVariables.scss 文件,专门用来存储变量:
css
// 定义变量
$primary-color: #3FAF60;
$background-color: red;
$font-size: 18px;
然后在另外一个 scss 文件中导入使用:
css
@import "../scss/myVariables.css";
.button {
padding: 15px;
font-size: $font-size;
background-color: $primary-color;
}
其实我们常用的做法是建一个 main.scss 文件,然后导入一些全局样式:
css
// 导入基础样式
@import "base/variables";
@import "base/mixins";
// 导入组件样式
@import "components/button";
@import "components/card";
// 导入布局样式
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
// 导入页面样式
@import "pages/home";
@import "pages/about";
// 导入主题样式
@import "themes/light";
2. 在 Vue 中使用 SCSS
其实我们使用的脚手架 Vue cli 或者 Vite 本身都集成了对 scss 语法的支持,只不过我们需要在项目中安装依赖:
css
# Vue CLI 脚手架
npm install sass sass-loader@10 -D
# Vite 脚手架
npm install sass -D
安装依赖之后我们在 style 标签上面添加 lang="scss" 表示对 scss 的支持。另外我们通常会加上 scoped 属性表示这些样式只限制在本页面使用。

3. 答疑
3.1 sass 和 scss 什么关系?
我们在安装 scss 依赖时发现是 npm install sass。那 sass 和 scss 什么关系?
回答:
sass 和 scss 是同一种预处理器语言的不同语法版本,scss 是 Sass 的超集,兼容 sass 语法和 CSS 语法。
其实 CSS 最开始的预处理语言是 sass,后来 sass 3 版本引入了 scss 的语法扩展。说白了就是 scss 比 sass 更牛逼,更好用,但是 scss 基于 sass。所以你 npm install 的是 sass。
3.2 scss 和 css 到底什么关系
**回答:**SCSS 可以看作是增强版的 CSS,支持变量、嵌套、混合等一些非常高级的特性。