sass:(css预处理器)CSS预处理器是一种用专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用的统称,现在有很多css预处理器,使用最多,讨论最广泛的有三种Sass、LESS和Stylus。
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目
好处:你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处
特点:1.Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
2.可以用 & 代表嵌套规则外层的父选择器。
3.允许将属性嵌套在命名空间
变量:1.变量以美元符号开头,赋值方法与 CSS 属性的写法一样
2.变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global,
3.可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
4.#{内容} 插值语句
运算:1.支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值(如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹)
2.所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式。
3.字符串运算 (String Operations) "+" 可用于连接字符串
4.支持布尔型的 and or 以及 not 运算
5.数组不支持任何运算方式
函数:(SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用)
1.数字函数 abs(number)取绝对值; abs(number)向上取整; floor(number)向下取整; max(number...)返回最大值等等
2. String(字符串) 函数 str-index(string, substring)返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串,则返回 null ; str-insert(string, insert, index)在字符串 string 中 index 位置插入 insert 等等
更详细函数解释:sass函数
指令:(Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的 “指令”)
1:@import, 允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用(如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。)
2.@extend(继承;延伸) 使用 @extend 可以将一个选择器下的所有样式继承(延伸)给另一个选择器。继承多个时后继承的样式享有优先权:
3.还包括@if,@for,@each等指令
更多指令详解可进入sass中文网查看
混合指令: ^((-\d+)|(0+))$
2.@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。混合指令的用法是在 @mixin 后添加名称与样式
参数:参数用于给混合指令中的样式设定变量,并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进括号
3,@include 指令可以将混入(mixin)引入到文档中
参考:sass中文网