Sass英文全称:Syntactically Awesome Stylesheets
它是CSS的预处理器,sass文件后缀名为.scss
优点:减少CSS重复的代码
节省开发时间
兼容所有版本的CSS
生成格式化的CSS代码,易于组织和维护
Sass怎么作用的:
例:首先创建index.html文件再创建header.scss文件
其次使用@importent将header.scss文件导入index.scss中
然后自动生成浏览器可以识别的index.css文件
最后在index.html运行就可以在浏览器中看到效果
Sass变量
1.变量声明:声明一个变量,后续可以通过变量名来引用他们,就不用重复书写
2.作用域:sass变量的作用域只有在当前层级上有效果
3.!global:用!global关键字设置变量是全局的
4.变量引用:后续如果需要一个不同的值,只需要改变这个变量的值,则所有引用该变量的地方生成的值都会改变
5.变量名中可以用中划线和下划线分割
Sass嵌套
嵌套规则就是将 子级选择器 放在了 父级选择器 内部
通过父选择器解决某些选择器被当成后代选择器的问题(使用&)
嵌套属性就是把属性名从中划线的地方断开,在根属性后面加一个冒号:{},把子属性写在大括号里面