一、sass语法
1.1 声明变量-普通变量-默认变量-特殊变量-全局变量
定义变量的语法:
普通变量 定义之后可以在全局范围内使用。 $fontSize: 12px; body{ font-size:$fontSize; }
默认变量 sass 的默认变量仅需要在值后面加上 !default 即可。 $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; } sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要重新声明下变量即可。
全局变量——在变量的后面加上[!global]即可声明全局变量。sass 规划是 3.4 以后的版本中就会增加这个功能。
特殊变量:一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作
为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
#{$variable}
就是取值的一种特殊形式,符合特殊用法。
2.2 sass嵌套-选择器嵌套
SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式,正常项目中通常使用的都是选
择器嵌套方案
【注】在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性
2.3 sass嵌套-属性嵌套
嵌套属性——不常用 所谓属性嵌套,是指某些属性拥有同样的单词开头,如:wborder-color 都是以 border 开头的,所以就出现了属性嵌套语法
2.4 sass混合-Mixin
sass 中可以通过@mixin 声明混合,可以传递参数,参数名称以$开始,多个参数之间使用
逗号分隔,@mixin 的混合代码块由@include 来调用
2.5 sass继承拓展-@extend
在 SASS 中,通过继承/扩展来减少重复代码,可以让一个选择器去继承另一个选择中所有
的样式。
继承某个样式的同时,也会继承样式的扩展。
2.6 Partitials和@import
Partials 是用来定义公共样式或者组件的样式的,专门用于被其他的 scss 文件 import
进行使用的
在 SCSS 文件中引入指令@import 在引入 Partials 文件时,不需要添加下划线。详细参
考案例代码。
声明公共样式,公共样式文件要以 _
2.7 sass注释
SASS 中提供了三种注释 多行注释 在编译输出的 css 文件中会保留,压缩输出格式中不会保留 --style compressed /* * 多行注释 */ 单行注释 在输出 css 文件时不保留 // 单行注释 强制注释 在多行注释的开头,添加感叹号!表示强制保留 /*! * 强制注释 */
2.8 sass数据类型
Sass 支持7种主要的数据类型 > 数字(例如: 1.2, 13, 10px) > 字符串(例如:"foo", 'bar', baz) > 颜色(例如:blue, #04a3f9, rgba(255, 0, 0, 0.5)) > 布尔值(例如: true, false) > 空值(例如: null) > 列表(list),用空格或逗号分隔 (例如:c 1.5em 1em 0 2em, Helvetica, Arial, sans-serif) > 映射(例如: (key1: value1, key2: value2)) map映射 键->值
2.9 数字&数字函数
在 SASS 中可以对数字进行运算
同时 SASS 支持数字函数的运算
2.10 sass字符串
SASS 支持字符串的操作 同时 SASS 对字符串的操作有一些封装的函数的支持,方便快捷的处理字符串操作。 更多操作请参考官方文档。 http://sass.bootcss.com/docs/sass-reference/
2.11 sass颜色
颜色的表示有很多种 > 十六进制 Hex:#ff0000 等等 > RGB:rgb(255, 0, 0)等等 > 字符串:red, blue, green 等等 > 等等.. .. 【注】SASS 支持所有这些颜色的表示方式 相信大家对这些颜色的表示方式应该非常熟悉了 颜色函数——rgb & rgba 通过 rgb()的形式进行颜色的控制【红、绿、蓝】
2.12 sass列表-list
list 表示列表类型的值 在 CSS 中就是表示属性的一串值 列表中的值可以使用空格或者逗号分隔,如 > border:#ccc solid 1px; 值就是列表 > font-family:Courier, “Lucida Console”, monospace; 值也是列表 列表中可以包含其他的列表,如: > padding:10px 5px, 5px 5px; 值的列表中有两个列表,用逗号分隔 > padding:(10px 5px) (5px 5px);可以用括号分开,编译成 css 时会去掉这些括号
列表函数
SASS 中的列表相当于其他语言中的数组,SASS 也提供了一些函数方便列表的操作 length:获取列表长度 nth:获取指定位置的列表项 index:获取某个元素在列表中的位置,如果没有查询到返回 null append:给指定的第一个列表添加一个列表项 join:合并列表
2.13 sass映射map
map 就是列表项目中带名称的列表 > $map:(key1:value1, key2:value2, key3:value3) > $var(key1:value1, key2:value2..):声明一个 Map > length($map):获取 map 中的元素对个数 > map-get($map, key):获取$map 中名称为 key 的值 > map-keys($map):获取指定$map 中所有的 key > map-values($map):获取指定$map 中所有的 value > map-has-key($map, key):判断在$map 中是否包含指定的 key > map-merge($map1, $map2):将$map1 和$map2 合并在一起 > map-remove($map, key):将指定名称的 key 从$map 中移除
2.14 sass布尔值
SASS 中的布尔值,跟其他语言一样,都是用来表示真/假的逻辑判断的。 取值:true/false,sass 中可以使用比较运算符,返回的就是布尔值 > 比较运算符 > >、 >=、 <、 <=、 !=、 == > 逻辑运算符 > and、or、not
2.15 控制指令-control Directives
SASS 中为了更加方便的处理一些带有逻辑性的样式,如满足某些条件的时候使用指定的样 式,或者根据指定列表中的项目循环输出样式等,提供了一些控制指令进行处理 > @if:条件控制指令 > @for:循环指令 > @each:循环指令 > @while:循环指令
@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的 样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式 【注】同样,也可以通过@else if 和@else 指令结合,进行多条件的判断
2.16 sass-@for
@for 指令在 SASS 中用于重复处理一组指令 有两种表现形式 > @for $var from <开始值> l <结束值> > @for $var from <start> to <end> <1> to 和 through 都是表示一个区间 <2> 唯一的区别就是停止循环的地方不一样 <3> $var 可以是任意一个变量名称如$i <5> <start>和<end>是 SASS 表达式并且必须是整数
2.17 sass-@each
@each 在 Sass 中主要被用来进行列表或者映射数据的循环 主要表示形式:@each $var in <list> $var 可以是任意变量名称,<list>是 SASS 表达式并且必须是 List
2.18 sass-@while
@while 指令在 SASS 中用于循环重复处理样式,直到@while 表达式返回 false
2.19 sass用户自定义函数-function
函数的功能主要是数据的运算,SASS 中可以将一些值交给函数进行处理,具体的处理方式 由定义的函数具体的设计确定。 @function 函数名称(参数列表){ // 数据处理 }
2.20 sass警告 VS 错误
在自己设计的函数或者 Mixin 中,可以包含一些警告或者错误提示信息,用户在错误使用 函数或者 mixin 时,就会看到这样的错误提示。 > @warn:警告信息——会出现在命令行窗口中,编译提示 > @error:错误信息——会出现在编译后的 css 文件中,错误提示 @warn message; 警告信息,警告信息一般会在执行 scss 程序生成 css 时触发,所以 出现在命令行中。 @error message; 错误信息,错误信息直接显示在编译的 css 文件中。