sass基础学习

sass网址

https://sass-lang.com/

在vscode中下载Live Sass Complier插件可以帮助我们编译sass


scss与sass文件的区别是：sass里不会出现花括号和分号
以下为sass

sass

什么是sass？

sass 是css的预处理器，他能用来清晰地、结构化地描述文件样式，有着比普通css更强大的功能。 sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表，有助于更好地组织管理样式文件，一级更高效地开发项目

sass的一些功能

• 一个开源的预处理器，被解析为css
• 完全兼容css3
• 在css基础上增加了变量、嵌套、混合等功能
• 在更少的时间内轻松编写css代码
• 自定义输出格式

sass和scss之间的区别？

其实时同一种东西，我们都称之为sass。主要有两点不同：

• 文件扩展名不同，sass的扩展名为.sass，scss的扩展名为.scss

• 语法书写方式不同, sass 不带大括号{}和分号, 而scss的语法则和css语法书写方式十分类似

变量

设置变量的语法：$name:value;

嵌套

可以避免重复代码

引入

需要对一些数据做统一的管理，比如将表示颜色的放在一个文件里，命名时需要加一个下划线表示是私有的：_color.scss，这样这个scss文件就不会被编译成css文件了，然后用@import引入到需要使用这个文件的scss中。

Mixin混入的使用

场景：需要复用overflow white-space text-overflow，则可以将他们三个抽离出去，再使用mixin引入进来，引入时用@include


mixin还可以接受参数，引入的时候给他传值：