CssandSass

Posted on
Words count in article: 9.4k | Reading time ≈ 36

CssandSass

学习视频：https://www.youtube.com/watch?v=_a5j7KoflTs&list=WL&index=6

Documentation：https://sass-lang.com/documentation

引用的一些教程： w3cschool,菜鸟教程

Install/Setup Live Sass Compiler VS Code Extension

Live Sass Compiler

在setting.json中添加设置

1
2
3
4
5
6
7
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "/dist/css"
  }
],

新建dist文件夹，里面新建index.html文件，引入css/main.css

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>Sass Tutorial</title>
  </head>
  <body>
    <div class="main">
    </div>
  </body>
</html>

然后新建scss文件夹，里面新建一个main.css文件

点击 下面的sass watching，那么就会在dist文件夹下自动生成编译好的css文件，这样在scss中做了改变，main.css中也会同步编译，转换成html读得懂的css文件

Folder Structure / Sass Syntax

Variables

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass使用是多半因为!highlight-color看起来太丑了。)，比如符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。

sass变量的声明和css属性的声明很像:

1
$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solidblack;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中(如@media或者@font-face块)，情况也是如此:

1
2
3
4
5
6
7
8
9
10
11
12
13
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

凡是css属性的标准值可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

1
2
3
4
5
6
7
8
9
10
$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

看上边示例中的$highlight-color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#F90的边框。

在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量:

1
2
3
4
5
6
7
8
9
10
11
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

这里，$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。

Maps

Sass Maps的函数 : map-get($map,$key)

map-get($map,$key) 函数的作用是根据 $key 参数，返回 ​$key 在 ​$map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。此函数包括两个参数：

  • $map：定义好的 map。
  • $key：需要遍历的 key。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//我这里定义了四个变量，其中最后一个是一个map
$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;
$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700
);
//要获取font-weights中的东西，我们需要用map-get函数
//第一个参数是这个map，第二个参数是map中的key
body {
  background: $primary-color;
  color: $text-color;
  font-weight: map-get($font-weights, bold);
}

在main.css 中编译结果为：

1
2
3
4
5
6
body {
  background: #272727;
  color: #fff;
  font-weight: 700;
}
/*# sourceMappingURL=main.css.map */

Nesting

父选择器的标识符&

一般情况下，sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content aside)。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。

最常见的一种情况是当你为链接之类的元素写:hover这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况sass就无法正常工作:

1
2
3
4
article a {
  color: blue;
  :hover { color: red }
}

这意味着color: red这条规则将会被应用到选择器article a :hover，article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。

解决之道为使用一个特殊的sass选择器，即父选择器。在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方，比如h1放在哪，它就可以放在哪。

& 就代表着父选择器， & = article a

1
2
3
4
article a {
  color: blue;
  &:hover { color: red }
}

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换:

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

在为父级选择器添加:hover等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在``标签上添加一个ie的类名，为这种情况编写特殊的样式如下:

1
2
3
4
5
6
7
#content aside {
  color: red;
  body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

sass在选择器嵌套上是非常智能的，即使是带有父选择器的情况。当sass遇到群组选择器(由多个逗号分隔开的选择器形成)也能完美地处理这种嵌套。

Example

main.scss

&_paragraph 在编译完成后 是.main_paragraph

但是从index.html中我们可以看到我们想选择的是 class = main包含着的 class= main_paragraph 的段落

所以我们可以这么修改

#{&}_paragraph 这叫 interpolation 现在 css文件中 变成了 .main .main_paragraph

此外我们还可以在嵌套中利用嵌套，那么就是在 #{&}_paragraph 中再用 &

因为这里只是设置一个伪类，那么不需要 #{&}，直接相连结即可, &:hover效果如下

.main .main_paragraph:hover

也就是现在当我鼠标移动到这段文字上的时候，文字会变成粉色

1
2
3
4
5
6
7
8
9
10
11
.main {
  width: 80%;
  margin: 0 auto;
  #{&}_paragraph {
    font-weight: map-get($font-weights, bold);

    &:hover {
      color: pink;
    }
  }
}

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>Sass Tutorial</title>
  </head>
  <body>
    <div class="main">
      <p class="main_paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus inventore sit earum, cum ipsa magni, perspiciatis eos aliquam id eius sed, totam esse? Optio in adipisci earum numquam magnam fugit?</p>
    </div>
  </body>
</html>

main.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
  background: #272727;
  color: #fff;
}

.main {
  width: 80%;
  margin: 0 auto;
}

.main .main_paragraph {
  font-weight: 700;
}

.main .main_paragraph:hover {
  color: pink;
}
/*# sourceMappingURL=main.css.map */

群组选择器的嵌套

在CSS里边，选择器h1 h2和h3会同时命中h1元素、h2元素和h3元素。与此类似，.button button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器的规则会对命中群组中任何一个选择器的元素生效。

1
2
3
.button, button {
  margin: 0;
}

当看到上边这段代码时，你可能还没意识到会有重复性的工作。但会很快发现:如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰，情况就不同了。css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。

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

非常幸运，sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来:

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

首先sass将.container和h1 .container和h2 .container和h3分别组合，然后将三者重新组合成一个群组选择器，生成你前边看到的普通css样式。

对于内嵌在群组选择器内的嵌套规则，处理方式也一样:

1
2
3
nav, aside {
  a {color: blue}
}

首先sass将nav和a aside和a分别组合，然后将二者重新组合成一个群组选择器:

1
nav a, aside a {color: blue}

处理这种群组选择器规则嵌套上的强大能力，正是sass在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时，与普通的css编写方式相比，只写一遍群组选择器大大减少了工作量。

有利必有弊，你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小，但实际生成的css却可能非常大，这会降低网站的速度。

关于选择器嵌套的最后一个方面，我们看看sass如何处理组合选择器，比如>、+和~的使用。你将看到，这种场景下你甚至无需使用父选择器标识符。

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

上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

1
2
article section { margin: 5px }
article > section { border: 1px solid #ccc }

你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中名为section选择器的元素。

在下例中，你可以用同层相邻组合选择器+选择header元素后紧跟的p元素:

1
header + p { font-size: 1.1em }

你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素:

1
article ~ article { border-top: 1px dashed #ccc }

这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边，或里层选择器前边:

1
2
3
4
5
6
7
8
9
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass会如你所愿地将这些嵌套规则一一解开组合在一起:

1
2
3
4
5
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

在sass中，不仅仅css规则可以嵌套，对属性进行嵌套也可以减少很多重复性的工作。

嵌套属性

在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-style border-width border-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border:

1
2
3
4
5
6
7
nav { 
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

嵌套属性的规则是这样的:把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样:

1
2
3
4
5
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则:

1
2
3
4
5
6
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

这比下边这种同等样式的写法要好:

1
2
3
4
5
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

即便如此，随着你的样式表变得越来越大，这种写法也很难保持结构清晰。有时，处理这种大量样式的唯一方法就是把它们分拆到多个文件中。sass通过对css原有@import规则的改进直接支持了这一特性。

Partials

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

比如，我们新建 _reset.scss 和_variable.scss

1
2
3
4
5
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
1
2
3
4
5
6
7
8
9
$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;

$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700,
);

在main.scss中通过 @import 引入

1
2
@import "./reset";
@import "./variable";

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明:

1
2
3
4
5
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

在上边的例子中，超链接的color会被设置为red。这可能并不是你想要的结果，假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是:如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

1
2
3
4
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

接下来我们将学习嵌套导入，它允许只在某一个选择器的范围内导入sass局部文件。

嵌套导入

跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。举例说明，有一个名为_blue-theme.scss的局部文件，内容如下:

1
2
3
4
aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示:

1
2
3
4
5
6
7
8
9
10
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

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

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

有时，可用css原生的@import机制，在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。

原生的CSS导入

由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载:

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

文件导入是保证sass的代码可维护性和可读性的重要一环。次之但亦非常重要的就是注释了。注释可以帮助样式作者记录写sass的过程中的想法。在原生的css中，注释对于其他人是直接可见的，但sass提供了一种方式可在生成的css文件中按需抹掉相应的注释。

静默注释

css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript``Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

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

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

1
2
3
4
body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

Functions

font-weights 是上面导入中的map变量

1
2
3
@function weight($weight-name) {
  @return map-get($font-weights, $weight-name);
}

然后我们调用这个function即可

1
2
3
4
5
6
7
#{&}_paragraph {
   font-weight: weight(bold);

   &:hover {
     color: pink;
   }
 }

Mixin

利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-corners fancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

混合器在某些方面跟css类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在html文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述:用来描述html元素的含义而不是html元素的外观。而另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。

在之前的例子中，.notice是一个有语义的类名。如果一个html元素有一个notice的类名，就表明了这个html元素的用途:向用户展示提醒信息。rounded-corners混合器是展示性的，它描述了包含它的css规则最终的视觉样式，尤其是边框角的视觉样式。混合器和类配合使用写出整洁的html和css，因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的html和css的易读性和可维护性，在写样式的过程中一定要铭记二者的区别。

有时候仅仅把属性放在混合器中还远远不够，可喜的是，sass同样允许你把css规则放在混合器中。

混合器中的CSS规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

1
2
3
4
5
6
7
8
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器:

1
2
3
4
ul.plain {
  color: #444;
  @include no-bullets;
}

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

1
2
3
4
5
6
7
8
9
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代&。

如果一个混合器只包含css规则，不包含属性，那么这个混合器就可以在文档的顶部调用，写在所有的css规则之外。如果你只是为自己写一些混合器，这并没有什么大的用途，但是当你使用一个类似于Compass的库时，你会发现，这是提供样式的好方法，原因在于你可以选择是否使用这些样式。

接下来你将学习如何通过给混合器传参数来让混合器变得更加灵活和可重用。

给混合器传参

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像:

1
2
3
4
5
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写:

1
2
3
4
5
6
7
8
9
a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是:

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

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可:

1
2
3
4
5
6
7
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。

默认参数值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码:

1
2
3
4
5
6
7
8
9
10
11
@mixin link-colors(
    //参数列表
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

如果像下边这样调用:@include link-colors(red) $hover和$visited也会被自动赋值为red。

Mixin Example 1

Mixin Example 1

display

https://www.runoob.com/cssref/pr-class-display.html

justify-content

https://www.runoob.com/cssref/css3-pr-justify-content.html

align-items

https://www.runoob.com/cssref/css3-pr-align-items.html

margin

https://www.runoob.com/cssref/pr-margin.html

flex-direction

https://www.runoob.com/cssref/css3-pr-flex-direction.html

没用mixin之前，我们可以这样设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;

  #{&}_paragraph {
    font-weight: weight(bold);

    &:hover {
      color: pink;
    }
  }
}

但是我们不想重复敲打 display，justify-content 之类的,所以我们使用mixin改造

1
2
3
4
5
6
7
8
9
10
 @mixin flexCenter($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}
.main {
 @include flexCenter(column);
//...
}

现在他们在同一列中了

如果传入的参数是row，

Mixin Example 2

首先在html中把body改成 < body class="light" >

我们可以 像下面这样传入参数，也可以 @include theme();

1
2
3
4
5
6
7
8
9
10
//默认传参为true
@mixin theme($light-theme: true) {
  @if $light-theme {
    background: lighten($primary-color, 100%);
    color: darken($text-color, 100%);
  }
}
.light {
  @include theme($light-theme: true);
}

现在变成了白底黑字了

Mixin Example 3

当我们的screen 小于800px的时候，文字就会从

变成这样

1
2
3
4
5
6
7
8
9
10
11
12
$moblie: 800px;
@mixin mobile {
  @media screen and (max-width: $moblie) {
    @content;
  }
}
.main {
//...
  @include mobile() {
    flex-direction: column;
  }
}

Extend

混合器只是sass样式重用特性中的一个。我们已经了解到混合器主要用于样式展示层的重用，如果你想重用语义化的类呢？这就涉及sass的另一个重要的重用特性:选择器继承。

何时使用继承

之前介绍了混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承是基于类的(有时是基于其他类型的选择器)，所以继承应该是建立在语义化的关系上。当一个元素拥有的类(比如说.seriousError)表明它属于另一个类(比如说.error)，这时使用继承再合适不过了。

这有点抽象，所以我们从几个方面来阐释一下。想象一下你正在编写一个页面，给html元素添加类名，你发现你的某个类(比如说.seriousError)另一个类(比如说.error)的细化。你会怎么做？

  • 你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办？使用sass时，我们提倡的就是不要做重复的工作。
  • 你可以使用一个选择器组(比如说.error .seriousError给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢？再这样做就困难多了。
  • 你可以使用一个混合器为这两个类提供相同的样式，但当.error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的样式。你应该更清晰地表达这种关系。
  • 综上所述你应该使用@extend。让.seriousError从.error继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error``.seriousError都会继承其中的样式。

现在你已经更好地掌握了何时使用继承，以及继承有哪些突出的优点，接下来我们看看一些高级用法。

继承的高级用法

任何css规则都可以继承其他规则，几乎任何css规则也都可以被继承。大多数情况你可能只想对类使用继承，但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。

接下来的这段代码定义了一个名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现:

1
2
3
4
.disabled {
  color: gray;
  @extend a;
}

假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。举例来说， 如果.seriousError@extend.important.error ， 那么.important.error 和h1.important.error 的样式都会被.seriousError继承， 但是.important或者.error下的样式则不会被继承。这种情况下你很可能希望.seriousError能够分别继承.important或者.error下的样式。

如果一个选择器序列(#main .seriousError)@extend另一个选择器(.error)，那么只有完全命中#main .seriousError这个选择器的元素才会继承.error的样式，就像单个类名继承那样。拥有class="seriousError"的.main元素之外的元素不会受到影响。

像#main .error这种选择器序列是不能被继承的。这是因为从#main .error中继承的样式一般情况下会跟直接从.error中继承的样式基本一致，细微的区别往往使人迷惑。

现在你已经了解了通过继承能够做些什么事情，接下来我们将学习继承的工作细节，在生成对应css的时候，sass具体干了些什么事情。

继承的工作细节

跟变量和混合器不同，继承不是仅仅用css样式替换@extend处的代码那么简单。为了不让你对生成的css感觉奇怪，对这背后的工作原理有一定了解是非常重要的。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error .seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中，比如说h1.error``.error a或者#main .sidebar input.error[type="text"]，那情况就变得复杂多了，但是不用担心，sass已经为你考虑到了这些。

关于@extend有两个要点你应该知道。

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

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。

使用继承的最佳实践

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。但是如果你不小心，可能会让生成的css中包含大量的选择器复制。

避免这种情况出现的最好方法就是不要在css规则中使用后代选择器(比如.foo .bar)去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控:

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

在上边的例子中，sass必须保证应用到.baz的样式同时也要应用到.foo .bar(位于class=”foo”的元素内的class=”bar”的元素)。例子中有一条应用到.bip .baz(位于class=”bip”的元素内的class=”baz”的元素)的css规则。当这条规则应用到.foo .bar时，可能存在三种情况，如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 继承可能迅速变复杂 -->
<!-- Case 1 -->
<div class="foo">
  <div class="bip">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 2 -->
<div class="bip">
  <div class="foo">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 3 -->
<div class="foo bip">
  <div class="bar">...</div>
</div>

为了应付这些情况，sass必须生成三种选择器组合(仅仅是.bip .foo .bar不能覆盖所有情况)。如果任何一条规则里边的后代选择器再长一点，sass需要考虑的情况就会更多。实际上sass并不总是会生成所有可能的选择器组合，即使是这样，选择器的个数依然可能会变得相当大，所以如果允许，尽可能避免这种用法。

值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。

Example

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!--//...-->
      <p class="main_paragraph1">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus
        inventore sit earum, cum ipsa magni, perspiciatis eos aliquam id eius
        sed, totam esse? Optio in adipisci earum numquam magnam fugit?
      </p>
      <p class="main_paragraph2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus
        inventore sit earum, cum ipsa magni, perspiciatis eos aliquam id eius
        sed, totam esse? Optio in adipisci earum numquam magnam fugit?
      </p>
<!--//...-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  #{&}_paragraph1 {
    font-weight: weight(bold);

    &:hover {
      color: pink;
    }
  }
//我们还可以把继承下来的数据进行重新赋值
  #{&}_paragraph2 {
    @extend .main_paragraph1;
    &:hover {
      color: $accent-color;
    }
  }

Math Operations

在原生css中，我们要计算必须这样 cal(80%-40%) 但在scss中可以直接这么写。但要保持单位相同！

1
2
3
4
5
.main {
  @include flexCenter(row);
  width: 80%-40%;
  margin: 0 auto;
}
-------------本文结束，感谢您的阅读-------------