时间: 2019-11-16阅读: 85标签: Sass
时间: 2019-11-15阅读: 117标签: Sass概念
Sass 使 CSS代码保持DRY（也就是不要重复），编写代码的一种方式是将相关的代码保存在单独的文件中，我们可以创建带有CSS片段的小文件，以包含在其他Sass文件中，比如：重置文件、变量、颜色、字体或者是字体大小等等。
Sass由hampton catlin设计，natalie weizenbaum于2006年开发，它可以免费下载和使用。
导入文件
Sass是一个将脚本解析成CSS的脚本语言（SassScript），也是一款CSS预处理器，它减少了CSS的重复，也因此节省了时间。
与CSS一样，Sass也支持 @import 指令，它允许我们将一个文件的内容包含在另一个文件中，但是由于性能问题，CSS指令有一个缺点是我们每一次调用都会创建一个额外的HTTP请求，但是Sass的@import指令将文件包含在CSS中，因此它每次在运行时不需要额外的HTTP调用。
Sass 是对CSS3（层叠样式表）的语法的一种扩充 Sass ，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等属性，生成了良好的格式化CSS代码，便于代码的维护和组织。
Sass 导入语法：
功能完全兼容 CSS 的所有版本增加了变量、嵌套、混合等功能通过函数进行颜色值与属性值的运算提供了控制指令（control directives）自定义输出格式语法格式
@import filname;
Sass 有两种语法格式：SCSS（Sassy CSS，较新的语法）和缩进语法（最开始的叫法）。
注意：不需要指定文件扩展名，Sass会自动默认后缀名.scss或.sass文件。使用@import指令导入文件，我们可以定义任何变量或混合，导入任意数量的文件。
前者支持大多数 CSS hacks 写法以及浏览器前缀写法，以及早期的IE 滤镜写法，这种格式以 .scss 作为扩展名；后者简称 Sass，是一种简化格式，与 Haml 类似，使用缩进代替花括号来区分代码（属性表示某个选择器）并用换行代替分号分隔属性，用回车将不同规则分隔开，这样相对来说它比 SCSS 更容易阅读且书写也较为快速，它以 .sass 作为扩展名。
Sass 扩展了@import的功能，允许它可以导入 SCSS 或者是 Sass 文件，被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令都可以在导入的文件中使用。
Sass使用情况
Sass 可以使结构清晰化，减少了代码的重复编写，增强了代码的可读性，但是当代码量比较大时，就会出现一些问题，我们需要拆开多个样式文件，css 和 sass 都有@import 规则，两者的区别在于：前者运行@import 时需要加载外部 css ，这样一来容易使得网页加载速度变慢，而 sass 会直接在当时就会立刻加载外部文件，更加方便快速。
浏览器是不理解sass代码的，因此我们将需要一个sass预处理器来将sass代码转换为标准css，这个过程称为运输。所以，我们需要给一个transpiler（某种程序）一些sass代码，然后得到一些css代码。
Sass部分
提示：transpiling是一个术语，用于将用一种语言编写的源代码转换/翻译成另一种语言。
本文由10bet发布于Web前端,转载请注明出处：Sass 简介
关键词：