Sass学习小笔记

参考：https://www.sass.hk/guide/

1、安装Sass

1-1、windows系统先官网下载Ruby，安装过程中注意以下勾选

安装成功后，需要更换gem源（由于国内网络问题导致gem源间歇性中断）

（1）删除原gem源：
gem sources --remove https://rubygems.org/

（2）添加新gem源：
gem sources -a https://gems.ruby-china.com/

(3)查看是否替换成功（成功后会打印出新gem源的地址）：
gem sources -1

（4）安装Sass和Compass
gem install sass
gem install compass


（5）在VSCode中安装插件Easy Sass

（6）在VSCode中进行sass配置

参考：https://www.imooc.com/article/19624

2、使用变量

sass最重要的一个特性是为css引入了变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，无需重复书写这一属性值。
   
sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。

2-1、变量声明

使用$符号来标识变量。

3、嵌套css规则

例：

scss文件如下：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译之后的css文件如下：

#content article h1 {
  color: #333; }
#content article p {
  margin-bottom: 1.4em; }
#content aside {
  background-color: #EEE; }

注：只适用简单的嵌套规则，如：不适用于:hover伪类

3-1、父选择器的表示符&

一般情况下，sass在解开一个嵌套规则时就会把父选择器通过一个空格连接到子选择器的前边形成。这种在css里边被称为后代选择器。

作用一：为父选择器添加:hover等伪类时：
例：

article a {
  color: blue;
  &:hover { color: red }
}

编译为css文件如下：

article a { color: blue }
article a:hover { color: red }

作用二：在父选择器之前添加选择器
例：

#content aside {
	color:red;
	body.ie & { color:green }
}

编译为css文件后如下所示：

#content aside{ color:red };
body.ie #content aside { color:green }

3-2、群组选择器的嵌套

当sass遇到群组选择器时，由多个逗号分开的选择器进行嵌套。

例：

.container {
	h1,h2,h3 { margin-bottom: .8em }
}

3-3、子组合选择器和同层组合选择器：> 、+和~

（1）article section { margin:5px } =>选择article下所有命中section选择器的元素

	    article > section { border :1px solid #ccc}   =>选择article下紧跟着的子元素命中section选择器的元素

（2）同层相邻组合选择器+

header + p {font-size:1.1em }   =》选择header元素后紧跟的同层的p元素

（3）同层全体组合选择器~

article ~ article {border-top:1px dashed #ccc }     =》选择所有跟在article后的同层article元素

总结：

html文件如下：

<nav>sass选择器嵌套</nav>
<article>
     <section>前端的核心是html、css、js</section>
     <dl>
          <dt>学号</dt>
          <dd>1001</dd>
          <dd>1002</dd>
          <dd>1003</dd>
     </dl>
     <section>前端三大框架：react、angular、vue</section>        
</article>
<p>SASS是对CSS3的语法的一种扩充</p>
<article>身为一个前端工程师，了解前后端交互是非常有必要的</article>
<p>java是一门很好的编程语言</p>
<article>她是一个测试工程师</article>

scss文件如下所示：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译后的css文件如下所示：

article ~ article {
  border-top: 1px dashed #ccc; }
article > section {
  background: #eee; }
article dl > dt {
  color: #333; }
article dl > dd {
  color: #555; }
nav + article {
  margin-top: 0; }

运行结果如下所示：

4、导入SASS文件

css的@import规则，它允许一个css文件中导入其它css文件，但是，只有执行到@import时，浏览器才会去下载其它css文件，这导致页面加载起来特别慢

sass也有@import规则，但是sass的@import规则在生成css文件时就把相关文件导入进来，这意味着所有相关的样式被归纳到同一个css文件中，无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

4-1、使用SASS部分文件

sass局部文件名以“下划线”开头，这样saa就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
例：导入scss/_ninght-sky.scss这个局部文件里的变量时，只需在样式表中写@import "scss/ninght-sky";

4-2、默认变量值

一般情况下，反复声明一个变量，后申明的变量后覆盖前面申明的变量。

!default：如果这个变量被重复申明赋值了，那就用它声明的值，否则使用这个默认值。

4-3、嵌套导入

sass允许@import命令写在css规则内，这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。

例：在importTest.scss文件中引入)import-test.scss文件

.theme{@import "_import-test";}

.theme{
    width:200px;
    height:100px;
    margin:0 auto;
    background:#8e8e8e;
}

4-4、原生的css导入

以下三种情况会造成浏览器解析css时的额外下载

（1）被导入文件以.css结尾
（2）被导入文件是一个url地址
（3）被导入文件是css的url()值

5、静默注释

//：该注释不会出现在css文件中
/**/：该注释会出现在css文件中

6、混合器

sass混合器实现大段样式的重用。 混合器使用@mixin标识符定义·，然后用@include调用

例：

@mixin rounded-corners {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.notice{
    background-color:green;
    border:2px solid blue;
    @include rounded-corners;
}

6-1、非混合器传参

混合器并不一定总得生成相同的样式，可以给混合器传参，来制定混合器生成的精确样式。

例：

@mixin link-colors($normal,$hover,$visited){
    color:$normal;
    &:hover{color:$hover;}
    &:visited{color:$visited;}    
}
a{
    @include link-colors(pink,red ,yellow );
}

编译后的css文件：

a {
  color: pink;
}

a:hover {
  color: red;
}

a:visited {
  color: yellow;
}

6-2、默认参数值

为了在@include混合器时不必传入所有的参数，可以给参数指定一个默认值。参数默认值使用$name:default-value的声明形式。

7、选择器继承

sass减少重复的主要特性就是选择器继承，即一个选择器可以继承另一个选择器定义的所有样式，通过@extend来实现。

注意：不要用后代选择器去继承

例：（1）.seriousError @extend .important .error，那么.important .error和 h1 .important .error的样式都会被继承
（2）像这种(#main .seriousError) 选择器序列不能被继承，由于从#main .seriousError中继承的样式一般情况下会跟直接从.seriousError中继承的样式一致

例：

.pattern1{
    width:100px;
    height:100px;
    background-color:gray;
}
.pattern2{
    text-align:center;
    padding:10px;
}
.pattern3{
    @extend .pattern1;
    @extend .pattern2;
    border:1px solid blue;
}