sass简介

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中文网

      sass官网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。