本文最后更新于：2024年4月25日 上午
关于SCSS
scss是支持CSS3写法的sass,是一个css预处理工具,以.scss为后缀,需要编译为css后才可在浏览器端执行(SCSS与CSS类似TS与JS是CSS的超集)
安装
默认安装官方推荐的dart-sass
Vite项目
vite支持sass的编译只要安装即可使用
开始
手动搭建
为学习scss,使用包管理手工搭建,当然也可用CodePen体验scss
新建一个目录,初始化package.json文件并安装sass
新建src文件夹
新建styles文件夹保存所有样式文件
styles文件夹下新建scss文件夹用于存储scss文件
新建index.html文件,
监听并编译scss
浏览器无法直接执行scss文件,所以需要将scss编译为css
使用sass命令监听./src/styles/scss文件夹下文件热更新编译到./src/styles/css文件夹下
1
| pnpm sass -w ./src/styles/scss:./src/styles/css
|
或package.json添加命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"name": "dart-scss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "scss": "sass -w ./src/styles/scss:./src/styles/css"
},
"author": "",
"license": "ISC",
"dependencies": {
"sass": "^1.56.1"
}
}
|
./src/styles/scss文件夹新建index.scss并保存就会在css文件夹下自动创建一个index.css的编译文件
src/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🚀SCSS</title>
<link rel="stylesheet" href="./styles/css/index.css" />
</head>
<body>
<header class="header">
<h1>🚀Lorem ipsum dolor sit amet.</h1>
</header>
<nav class="navigation">
<ul>
<li><a href="#">Lorem, ipsum.</a></li>
<li><a href="#">Lorem, ipsum.</a></li>
<li><a href="#">Lorem, ipsum.</a></li>
</ul>
</nav>
<main class="main">
<article>
<header>
<h2>Lorem ipsum dolor sit.</h2>
</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quibusdam
exercitationem voluptas quidem quos nesciunt. Quisquam, quae. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quibusdam
exercitationem voluptas quidem quos nesciunt. Quisquam, quae. Lorem
ipsum dolor sit amet consectetur. Rerum illo tenetur omnis dolor
repellat. Ducimus illum error cumque vero et? Molestiae animi eius
nemo alias? Nemo. Dolores voluptatem expedita unde enim cum? Aliquam
quia possimus labore esse atque! Pariatur iusto sint laboriosam maxime
molestiae! Culpa quaerat aperiam voluptate quia magni?
</p>
</article>
</main>
<footer class="footer">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, vitae.
</p>
</footer>
</body>
</html>
|
使用VScode的插件Live Preview即可及时查看效果了👻
新建一个index.scss后缀的文件来编写scss,scss支持css3的语法
src/styles/scss/index.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| * {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #282c34;
color: #db7bab;
}
.navigation > ul a {
color: #98c36e;
}
|
保存后查看./src/styles/css/index.css文件编译后与css没有区别
基础
嵌套 (Nesting)
SCSS中选择器可以嵌套书写
1
2
3
4
5
6
7
8
9
10
11
| .navigation {
> ul {
color: #7359f7;
a {
color: #5087f4;
text-decoration-line: none;
}
}
}
|
除了选择器嵌套外,scss还支持属性的嵌套
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .scss {
background: {
color: #282c34;
image: url('./null.jpg');
}
font: {
size: 2rem;
weight: 400;
}
prefix: {
suffix: value;
middle: {
suffix: value;
}
}
}
|
1
2
3
4
5
6
7
8
| .scss {
background-color: #282c34;
background-image: url("./null.jpg");
font-size: 2rem;
font-weight: 400;
prefix-suffix: value;
prefix-middle-suffix: value;
}
|
父选择器 (Parent Selector)
Scss用&符号表示当前作用域(当前花括号)的选择器,除了不可直接连接在选择器名称之后(没有空格的连接)外可以随意组合
1
2
3
4
5
6
7
8
9
10
11
| .navigation {
> ul a {
color: #5087f4;
text-decoration-line: none;
transition: color 0.2s;
&:hover {
color: #b778f7;
}
}
}
|
其它的组合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| body {
color: black;
& > .title {
color: purple;
}
[data-user-color-scheme='dark'] & {
color: white;
}
h {
&1 {
color: red;
}
}
.blue {
color: blue;
&-light {
color: #38f;
}
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| body {
color: black;
}
body > .title {
color: purple;
}
[data-user-color-scheme=dark] body {
color: white;
}
body h1 {
color: red;
}
body .blue {
color: blue;
}
body .blue-light {
color: #38f;
}
|
变量
模块化
模块文件 (Partials)
使用_或-为前缀命名的.scss文件作为一个scss模块,如_reset.scss.模块文件在没有被其它scss文件导入时是不会被编译的(只能被编译到引用的文件中,不会单独编译出一个文件)
@use
@use关键字用于导入样式模块也可导入.css文件, 模块路径默认使用相对路径(可以不加前导./),导入时不用加模块文件名的前导符号_
当导入路径为文件夹而不是文件时若文件夹下有_index.scss则会自动导入_index.scss模块,可用于将多个小模块组合后再导出
src/styles/scss/base/_reset.scss
1
2
3
4
5
6
7
| * {
box-sizing: border-box;
}
body {
margin: 0;
}
|
导入此模块后这些样式就会被编译到调用的文件中
src/styles/scss/index.scss
@forward
🍍作用域
变量有块级作用域,使用!global声明全局变量
变量声明顺序为语句顺序,全局变量声明后才可用
1
2
3
4
5
6
7
8
9
10
11
12
13
| $bg-dark: #000;
$font-dark: #fff;
body {
p {
$size: 2rem !global;
font-size: $size;
}
$font-dark: #eee;
background: $bg-dark;
color: $font-dark;
font-size: $size;
}
|
1
2
3
4
5
6
7
8
| body {
background: #000;
color: #eee;
font-size: 2rem;
}
body p {
font-size: 2rem;
}
|
🍍变量类型
🍍变量运算
@mixin
控制语句