什么是Sass
Sass(英文全称:Syntactically Awesome Stylesheets)
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码,易于组织和维护。
Sass 文件后缀为 .scss。
为什么使用 Sass?
CSS 本身语法不够强大,代码重复繁琐,无法实现复用,而且在代码也不方便维护,
Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass安装
NPM 安装
npm install -g sass
在控制台上输入sass,可以看到如上内容则表示sass安装成功
第一个sass文件
sass兼容所有原css的语法,并在此基础上新增了部分内容
.box{width: 100px;height: 100px;background-color: rgb(255, 227, 117);
}
在控制台输入sass style.scss可以将sass代码转换成css代码
在控制台输入sass style.scss style.css可以将sass代码转换成css代码并将css代码存放到style.css文件中,可以看到产生了两个文件.css和.css.map文件
也可以下载Live Sass Compiler插件
点击 右下角的watch并保存sass就可以立即生成对应的css文件
引入生成的css后可以看到结果