2.sass笔记

安装：https://www.sass.hk/install/
https://ninghao.net/video/2100

(一) sass语法

[0]. 前提

• 1). sass的后缀名有两种： 一种后缀名为sass,不适用大括号和分号，另一种是scss，这种和我们平时写的css文件格式差不多。

• 2). 改变sass生成的css所存放的位置

  #监听sass文件夹下的sass文件，将生成的css文件放入到css文件夹中
  sass --watch sass:css
  

  • 目录结构：
    进入到项目根目录(SASS)下，sass目录存放sass文件，css目录存放生成的css文件。
    

• 3). 修改编译输出的css格式
  sass输出的css有四种格式：nested(嵌套)、compact(紧凑)、expanded(扩展)、compressed(压缩)，默认是nested

  sass --watch sass:css --style expanded
  

  .scss文件

  ul{
      font-size: 18px;
      li{
          font-size: 16px;
      }
  }
  

  生成的css
  

[1]. 变量

• 定义变量： $变量名:变量值;
• 变量名可以使用中划线和下划线来分隔变量中的多个词，但是推荐使用中划线。另外sass中： $highlight-color 与 $highlight_color 表示的是同一个变量。
• 当变量定义在css规则块内，那么该变量只能在此规则块内使用。

[2]. 嵌套css规则

1). 父选择器的标识符&

&被父选择器直接替换
.scss

$highlight-color: #f90;
.box{
    color: $highlight-color;
    &:hover{
        color: red;
    }
}

.css

.box {
  color: #f90;
}
.box:hover {
  color: red;
}

2). 群组选择器的嵌套

.button button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
  /*生成*/
.container h1, .container h2, .container h3 {
  margin-bottom: .8em;
}

nav, aside {
  a {color: blue}
}
  /*生成*/
nav a, aside a {color: blue}

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

1. 子组合选择器> 选择一个元素的直接子元素

2. 同层相邻组合选择器+

/*选择header元素后紧跟的p元素：*/
header + p { font-size: 1.1em }

3 .同层全体组合选择器~

/*选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素*/
article ~ article { border-top: 1px dashed #ccc }

4.综合应用

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

4).嵌套属性

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

/*.less文件*/
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
/*生成 .css文件*/
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

指明例外规则：

/*.less文件*/
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
/*生成 .css文件*/
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

[3]. 导入Sass文件

1). sass局部文件

• 不需要生成对应的独立css文件，这样的sass文件称为局部文件。
• sass局部文件的文件名以下划线开头。@import一个局部文件时可以省略文件名开头的下划线。

2). 默认变量值

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

局部文件：_night-sky.scss

$base-color: #f00 !default;
body{
    color:$base-color;
}

全局文件：

/*必须在导入之前设置默认值的具体值*/
$base-color: #fff;
@import "./night-sky";

生成的css文件：

body {
  color: #fff;
}

3). 嵌入导入

被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。
局部文件：_night-sky.scss

aside {
  background: blue;
  color: white;
}

全局文件：

.blue-theme {@import "blue-theme"}

生成的css文件：

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

4). 原生css导入

你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

[4]. 静默注释

(二) sass函数

[1]. 混合器

混合器使用@mixin标识符定义。
通过@include来使用这个混合器，放在你希望的任何地方。
.scss文件

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

生成的.css文件

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

1). 何时使用混合器

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你找不到，这时候构造一个混合器可能并不合适。

2).混合器中的CSS规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。
.less文件

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

生成的css文件

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}片

3). 给混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
  //或者如下传参，可以不考虑参数顺序
  @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

4). 默认参数值

数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，

@mixin link-colors($normal, $hover: $normal, $visited: $normal)
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

[2]. 使用选择器继承来精简CSS

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。通过@extend语法实现。

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到h1.seriousError
  font-size: 1.2rem;
}

1).何时使用继承

因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。

2). 继承的高级用法

• 最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。
  通过继承a这一超链接元素来实现，一个灰掉的超链接

  .disabled {
    color: gray;
    @extend a;
  }
  

• 默认情况下：子元素只能继承直接父元素的样式

3). 继承的工作细节

跟变量和混合器不同，继承不是仅仅用css样式替换@extend处的代码那么简单。
关于@extend有两个要点你应该知道。

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

4). 使用继承的最佳实践

• 不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控：
• 值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。
  .scss文件

.foo .bar { @extend .baz; }
.bip .baz { a: b; }

生成的css文件

.bip .baz, .bip .foo .bar, .foo .bip .bar {
  a: b;
}