说明:借助taro框架来完成。
一、使用变量
1.变量声明
说明:sass变量的声明和css属性的声明很像
$highlight-color: #F90;
2.变量引用
说明:凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用。css生成时,变量会被他们的值所替代。之后如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。
$highlight-color: #F90;
.selected{
border: 1px solid $highlight-color;
}
3.变量名命名规范
sass的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线。推荐使用中划线!!!
4.案例
代码中:
效果展示:
二、嵌套css规则
说明:css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID,这种情况,sass可以让你只写一遍,且使用样式可读性更高。
案例代码:
效果展示:
2-1.父选择器的标识符&
遇到伪类情况,需要使用&来解决。
代码写法:
转成css:
2-2.群组选择器的嵌套
说明:在css里边,选择器h1 h2和h3会同时命中h1元素、h2元素和h3元素。与此类似,.button button会命中button元素和类名为.button的元素。这种选择器成为群组选择器。群组选择器的规则会对群组中的任何一个选择器的元素生效。sass可以满足该场景。
代码写法:
css转换:
2-3.子组合选择器和同层组合选择器:>、+和~;
说明:上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。
案例:
css展示:
2-4.嵌套属性
说明:在sass中,除了css选择器,属性也可以进行嵌套。border-style border-width border-color以及border-*等
规则:
把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{}
案例:
css转换:
三、导入SASS文件
说明:sass使用@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到同一个css文件中,而无需发起额外的下载请求。另外,所有被导入文件中定义的变量和混合器均可在导入文件中使用。
导入规则:使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀。
案例:(PS:在项目src目录下创建styles文件夹然后写入scss文件)
引入使用:
3-1.使用SASS部分文件
说明:当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你导入一个局部文件时,还可以不写文件的全名。
例:(导入themes/_night-sky.scss这个局部文件里的变量)
@import "themes/night-sky";
3-2.默认变量值(!default)
!default 来实现和css属性中!important标签相比属于对立面。
含义:如果这个变量被声明赋值了,那就用它声明的值,否则就用默认值。
案例:
3-3.嵌套导入
说明:跟原生css的不同,sass允许@import命令写在css规则内。这种导入方式下,生成对应的css文件时,局部文件会被直接插入到css规则内导入它的地方。
案例:
1.定义外部scss
2.导入
3.标签使用
4.效果展示
四、静默注释
// 这种注释内容不会出现在生成的css文件中,属于静默注释
/* 这种注释内容会出现在生成的css文件中 */
五、混合器
描述:当你完成项目时,你的样式很复杂,然后需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况。这时候我们可以通过sass的混合器实现大段样式的重用。
定义标识符:
@mixin
使用:
@include
案例:
定义:
使用:
转化后:
页面:
效果展示:
5-1.何时使用混合器
说明:1)如果你发现自己在不停地重复一段样式,那就应该把这段样式构造成优良的混合器。2)判断一组属性是否应该组成一个混合器,一条经验法则就是你能否为这个混合器想出一个好的名字。
5-2.混合器中的css规则
说明:
1)混合器中不仅可以包含属性,也可以包含css规则,包含选择器和选择器中的属性
2)当一个包含css规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则。
3)混合器中的规则甚至可以使用sass的父选择器标识符&
案例:(PS:官网案例)
5-3.给混合器传参
说明:混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式。
案例:
5-4.默认参数值
效果展示:
六、使用选择器继承来精简CSS
说明:使用sass的时候,最后一个减少重复的主要特性就是选择器继承。
语法:
@extend
案例:
6-1.何时使用继承
说明:5-1介绍了混合器主要用于展示性样式的重用,而类名用于语义化样式的重用。因为继承是基于类的,所以继承应该是建立在语义化的关系上。当一个元素拥有的类表明它属于另一个类,这时使用继承再合适不过了。
6-2.继承的高级用法
任何css规则都可以继承其他规则,几乎任何css规则也都可以被继承。最常用的高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承,因为他们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承。