Sass 简介

概念

Sass由hampton catlin设计，natalie weizenbaum于2006年开发，它可以免费下载和使用。

Sass是一个将脚本解析成css的脚本语言（SassScript），也是一款css预处理器，它减少了CSS的重复，也因此节省了时间。

Sass 是对CSS3（层叠样式表）的语法的一种扩充 Sass ，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等属性，生成了良好的格式化CSS代码，便于代码的维护和组织。

功能

• 完全兼容 CSS 的所有版本
• 增加了变量、嵌套、混合等功能
• 通过函数进行颜色值与属性值的运算
• 提供了控制指令（control directives）
• 自定义输出格式

语法格式

Sass 有两种语法格式：SCSS（Sassy CSS，较新的语法）和缩进语法（最开始的叫法）。

前者支持大多数 CSS hacks 写法以及浏览器前缀写法，以及早期的IE 滤镜写法，这种格式以 .scss 作为扩展名；后者简称 Sass，是一种简化格式，与 Haml 类似，使用缩进代替花括号来区分代码（属性表示某个选择器）并用换行代替分号分隔属性，用回车将不同规则分隔开，这样相对来说它比 SCSS 更容易阅读且书写也较为快速，它以 .sass 作为扩展名。

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

Sass使用情况

浏览器是不理解sass代码的，因此我们将需要一个sass预处理器来将sass代码转换为标准css，这个过程称为运输。所以，我们需要给一个transpiler（某种程序）一些sass代码，然后得到一些css代码。

提示：transpiling是一个术语，用于将用一种语言编写的源代码转换/翻译成另一种语言。

Sass文件类型：Sass文件的扩展名为.scss。

Sass评论：Sass支持标准 CSS 注释 /*comment*/，此外还支持内联注释 //comment。

    /* 定义原色 */
    $defColor1: #f44586;
    $defColor2: green;
    
    /* 使用变量 */
    .main_use{
        background: $defColor2;  //在这里我们可以设置内联注释
    }

 

增加特性

• 变量 Sass支持定义变量，变量以美元符号（$）作为开头，用冒号（:）赋值。 支持四种数据类型：
  • 字符串
  • 数值
  • 布尔类型
  • 颜色 变量可以用作函数的参数或者是返回值，在解释的过程中，解释器会把变量的值写入最终的CSS文件中。
• 嵌套（Nesting） SCSS 支持嵌套并且支持代码块的嵌套（CSS支持嵌套但不支持代码块的嵌套），它可以清晰的表示元素之间的关系。
• 导入（@import） Sass 支持@import 指令，该指令允许我们将一个文件的内容包含在另一个文件中，该指令包含CSS文件，因此不需要额外的调用HTTP，而由于性能问题，CSS指令每次调用都会创建一个额外的HTTP，在这里Sass就没有这样的问题。
• 混入（mixin） Mixin包含一段合法Sass代码，类似于C语言的宏定义；解释器在调用mixin时会将它扩展成它所包含的完整Sass代码，可以有效的减少代码重复，从而写出的代码更加干净简洁。
• 继承（@extend） 该指令允许我们将一组CSS属性从一个选择器共享到另一个选择器。