（SASS基础篇）SASS快速入门

说明：借助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元素添加的所有样式都会被继承。