Sass (英文全称：Syntactically Awesome Stylesheets) 简介
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
- Sass 完全兼容所有版本的 CSS。
一、Sass安装
Install on windows (cmd / git bash / porwershell)
$ npm install -g sass
Install on windows (chocolatey)
$ choco install -g sass
Install on Mac OS X (Homebrew)
$ brew install sass/sass/sass
二、查看Sass版本
$ sass --version
三、编写test.scss文件
/* 定义变量 */ $bgColor: lightblue; $txtColor: darkblue; $fontSize: 24px; $with: 200px; $height: 200px; $bdRadius: 50%; $color: #ffffff; /* 使用变量 */ .circle { width: $with; height: $height; border-radius: $bdRadius; background-image: linear-gradient(to bottom, $bgColor, $txtColor); font-size: $fontSize; color: $color; }
四、编译sass，输出css文件
$ sass test.scss test.css
五、编译后的css文件
@charset "UTF-8"; /* 定义变量 */ /* 使用变量 */ .circle { width: 200px; height: 200px; border-radius: 50%; background-image: linear-gradient(to bottom, lightblue, darkblue); font-size: 24px; color: #ffffff; } /*# sourceMappingURL=test.css.map */
六、HTML引入CSS查看效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sass_demo</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div class="circle"></div> </body> </html>
七、样式案例效果图
效果图
