sass 处理器

1.首先讲一讲&符号的含义;

&称为 父选择器的标识符;

在sass嵌套的过程中, sass处理器做了这样一件事,把嵌套的选择器用空格隔开

例如 .a { .b { color:red}} 处理器会这样处理 把a和b连接,并且用空格隔开; 最后为 .a .b {color：red};

但是如果我们使用伪类选择器、伪元素、结构伪类 就会出现问题, 例如伪类选择器

.a {:hover:{color:red}} 处理器会把a和:hover进行拼接,并且用空格隔开 .a :hover {...} 这样就不是我们要的效果了。

&父选择器的标识符 .a {&:hover:{...}} 那么&符号做了一件什么样的事情呢, 其实就是用父选择器替换了& , 并且忽略该层的嵌套规则。

一共两个作用 ①替换 ②忽略该层的嵌套规则 最后生成的效果就是 a:hover {...}；

2.变量

sass中的变量与javascript的变量很相似, 声明的方法用&符号, 在旧的版本中使用!符号。

那么sass中的变量作用是什么？ 把一个需要重复使用的属性值,设置为一个变量,减少重复 *** 作,并且最大的一个好处就是当你修改这个变量时,所有用到该变量的地方都会更改。

比方说背景图片的路径我们使用变量减少代码量, 那么当图片位置发生改变时,我们只需要更改变量就可以了。

还可以用来声明项目的主色调等等。

3. 同层选择器 + ~

+ 是同层相邻选择器, 选择某个元素后面的一位兄弟元素。

~ 是同层全体选择器, 和后代选择器比较相似,但是范围更广, ~ 不仅仅包含了后代，而且还包含了兄弟元素。

.a {.b + & {...}}  试想一下这样的写法会成为什么样？  会选择 首先会选中 a选择 的后代b选择器, 然后b选择器后面相邻的一位 .a类名的兄弟元素。  要满足两个条件①后面相邻 ②类名为a的

使用注意点

+  同层相邻选择器, 所以需要有某个元素作为参照点写法就是和某位选择器同级拼写。

 例如  .a +  或者 .a + .b    

同层全局选择器

目前在使用的过程中遇到的问题： 不能再最外层使用~ ,  最外层的选择器,也不能是最大的元素。 不能单独使用~ 必须搭配选择器

4.嵌套属性

     嵌套属性解决的问题？

    例如  border-left:1px solid red ; border-right:1px solid red;  border-top:none; border-bottom-none;

   这是一般的写法如果使用嵌套属性

   border:{left:1px solid red; right:1px solid red ...};

 也可以这样

 border:1px solid red {top:none; bottom:none};

 最后会成为 border:1px solid red ;border-top:none; border-bottom:none;

  嵌套属性也称为拼接; 拼接的方法就是通过 冒号的 加 括号的方式;

  第二种方式可以看到, 在属性后面加上冒号 然后写一定的样式, 在写括号拼接。

5.使用sass的部分文件

    使用场景, 我们写了一个sass文件, 但是在生成html" class="superseo">css文件时,希望我们引入的这个sass文件不要单独称为一个文件 也就是和我本来的css文件合成一个文件。这样的文件也称为局部sass文件

  局部sass文件的使用语法 在文件名的前面加上下划线_ 就可以了

6.默认变量值

    例如我们在使用过局部sass文件时, 可能我们又想更改一些样式,其实本质上可以用优先级的来解决， 但是在sass文件中, 有一个默认变量值得用法。  就是在sass文件中声明了一个默认变量值， 如果引用的文件中没有声明该变量,那么就使用默认变量值。

 用法 !default   与 !important相似     例如 $a:400px !default;

7.嵌套导入

   就是引入不仅仅可以在最外面 也可以在样式里面

例如

  .b { @import "属性名"

} 

嵌套导入的样式 只会在括号当中使用,不影响到其他地方

8.使用原生css导入

  用法 : 在导入的时候文件名后缀 写上.css

9.混合器

   混合器与类名差不多,在官网介绍了两者的区别,大概就是说起名不一样等等. 其实很多余。

两者的使用上的区别在于 混合器是在css文件中,  类名是在html文件中。

声明  @min  no-norp {color:red; ...}

使用  .a { @include no-norp}  最后生成为  .a {color:red};

10.混合器传参

  其实css的用法一直都是比较简单的,  莫名其妙sass中使用类似函数的形式来书写。

当然我们学过javascript函数对于我们来说并不难，但是总感觉莫名其妙的简单的东西复杂化了。

声明  @min  no-norp($name:red,$hov) {color:$name; border:$hov}

使用 @include no-norp(red,1px solid)

 这里面也包含了默认值,用法与函数的形式一样。

11.继承

   继承与混合器比较类似, 比较大的区别在于  混合器是变量, 继承是类名。

    用法  @extend

    .a {...}       .b {@extend .a}    这样就可以把a选择器中的样式都放在b中了。  继承不仅仅是css样式, 例如 a中还有混合器样式等等，都会被继承过来。

  什么时候使用继承？

继承可以更好的语义化  例如 .error  与 .seriousError  两个之间会有重复的样式, 如何使用混合器也可以使用， 但是使用继承就调表示 某个选择器属于另外一个选择器中的一个细化。

 error 表示错误  seriousErroe 表示严重的错误.   严重的是一个细化。看起来更语义化了。

  

 sass 

① 变量

②嵌套、嵌套属性。

③ &父(选择器 ) +（同层相邻选择器）  ~(同层全体选择器)

④默认变量、局部文件。

⑤混合器

⑥继承

混合与继承在官网中的使用方法:

混合 使用在 展示型样式

继承使用在语义化样式

什么是展示型样式, 例如边框、阴影等等。

什么是语义化:例如 功能上的, 错误 成功等等