一、概述
- Sass是一种CSS的开发工具， CSS 预处理器， CSS 扩展语言；
- 语法。Sass 扩展了CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性；
- 文件后缀名。版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss
- 优点：
○ 提供了许多便利的写法，减少 CSS 重复的代码，大大节省了设计者的时间；
○ Sass 生成良好格式化的 CSS 代码，易于开发和维护；
○ Sass 完全兼容所有版本的 CSS；
二、代码/实现步骤
st1.安装sass
npm install -g sass
st2.编写scss文件、html文件
//scss文件
$bgcolor:lightblue;
.dv{
background-color:$bgcolor;
width: 100px;
height: 200px;
}
//html文件
<!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>Document</title>
<link rel="stylesheet" href="out.css">
</head>
<body>
<div class="dv">我是菜鸟</div>
</body>
</html>
st3.编译、引入
编译方式一：
- 编译使用命令行将scss文件编译成css文件；
//使用sass命令将scss文件编译成css文件
PS E:\items\learnCSS\Sass> sass test.scss out.css
- 在html中引入编译后的css文件。
编译方式二：
1.vscode下载Easy Sass插件；
2.编写完scss文件保存时就会自动生成css文件；
3.在html文档中使用link直接引入编译后的css文件即可。
扫一扫
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
