SASS详解之继承(extend)

一时失言乱红尘 2022-09-17 10:24 345阅读 0赞

每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的。当一个div的身上有两个类名，一个是“one”，另一个是“two”的时候。如下

*HTML代码*

*CSS代码*

.one {width:100px;height:100px;}
    .two {background:red;border:5px solid #000;}

这就意味着，我们要配备一个很好的记忆力才能应急那些棘手的BUG问题。很多时候，我们需要一个个的找到类名“one”的样式才逐一改过。这样在无形中加大了。而在SASS中，有那么一个功能，继承，可以方便轻松的让这棘手的问题变得很简单。@extend指令,可以继承你想要的类名。如下

*SCSS代码*

.one {
    	width:100px;height:100px;
    }
    .two {
    	@extend .one;
    	background:red;border:5px solid #000;
    }

*编译后的CSS代码*

.one, .two {
      width: 100px;
      height: 100px;
    }
    
    .two {
      background: red;
      border: 5px solid #000;
    }

从上面的例子可以看出，类名“one”，可以被所有的类名继承。而继承类名“.one”的类名还可以有专属于自己的类名，专属的样式和风格，并不影响类名“.one”本身的样式。

# 　它是如何工作 #

SASS中继承(Extend)将想要继承的选择器(如“.two”)和其引用的选择器(如“.one”)组成群组选择器中间用逗号隔开，组成群组选择器。如下：红色背景和边框是类名“.two”单加的样式，而宽度高度都是继承类名(“.one”)的。如下

*SCSS代码*

.one {
    	width:100px;height:100px;
    }
    .two {
    	/*继承的样式*/
    	@extend .one;
    	/*独立的样式*/
    	background:red;
    	border:5px solid #000;
    }

*编译后的CSS代码*

.one, .two {
      /*继承的样式*/
      width: 100px;
      height: 100px;
    }
    
    .two {
      /*独立的样式*/
      background: red;
      border: 5px solid #000;
    }

就在合并选择器的时候，SASS中继承(Extend)是相当聪明的，会自己避免一些不必要的错误，或者说是不为人知的错处，也不会产生各种多余的东西如“\#\#two”。

# 　继承复杂的选择器 #

要继承的不仅仅是一个类名，可以是一个id也可以是一个元素，也可以是某个状态，任何选择器都能继承。如下

*SCSS代码*

.hoverlink {
      @extend a:hover;
    }
    a:hover {
      text-decoration: underline;
    }

*编译后的CSS代码*

a:hover, .hoverlink {
      text-decoration: underline;
    }

就像上面编译出来的一样，在hover状态下的样式也能继承。所以不仅是a的hover状态，几乎任何选择器都能继承。

# 　继承多个选择器 #

在编写的过程中，往往会遇到一个选择器要继承多个选择器的样式，那么这应该怎么办呢?看看下面的小实例吧。

*SCSS代码*

.one {
    	width:100px;height:100px;
    }
    .two {
    	/*继承的样式*/
    	@extend .one;
    	@extend .three;
    	/*独立的样式*/
    	background:red;
    	border:5px solid #000;
    }
    .three {
    	padding:10px;
    }

*编译后的CSS代码*

.one, .two {
      width: 100px;
      height: 100px;
    }
    
    .two {
      background: red;
      border: 5px solid #000;
    }
    
    .three, .two {
      padding: 10px;
    }

上面的例子告诉我，继承多个选择器的样式是得写多个“@extend”，但事实上有没有简便写法呢?看下面的小例子。

*SCSS代码*

.one {
    	width:100px;height:100px;
    }
    .two {
    	/*继承的样式*/
    	@extend .one, .three;
    	/*独立的样式*/
    	background:red;
    	border:5px solid #000;
    }
    .three {
    	padding:10px;
    }

*编译后的CSS代码*

.one, .two {
      width: 100px;
      height: 100px;
    }
    
    .two {
      /*独立的样式*/
      background: red;
      border: 5px solid #000;
    }
    
    .three, .two {
      padding: 10px;
    }

从上面的小例子，不难看出，继承多个选择器的样式是有简便方法的，那就是继承的多个选择器自己用逗号“,”隔开即可。

# 　链型继承 #

在咱们编写的过程中，不仅仅的单方面的继承，很多时候都是类名“.three”继承类名“.two”，而类名“.two”又继承了类名“.one”。那么这样的情况在SASS中应该怎么写呢?写法如下

*SCSS代码*

.one {
    	width:100px;height:100px;
    }
    .two {
    	/*继承的样式*/
    	@extend .one;
    	/*独立的样式*/
    	background:red;
    	border:5px solid #000;
    }
    .three {
    	/*继承的样式*/
    	@extend .two;
    	/*独立的样式*/
    	padding:10px;
    }

*编译后的CSS代码*

.one, .two, .three {
      /*继承的样式*/
      width: 100px;
      height: 100px;
    }
    
    .two, .three {
      /*独立的样式*/
      background: red;
      border: 5px solid #000;
    }
    
    .three {
      /*独立的样式*/
      padding: 10px;
    }

从编译后的CSS中不难看出，类名“.one”变成了群组选择，添加了类名“.two”和类名“.three”。而类名“.two”变成了群组选择，添加了类名“.three”。那么为什么叫做链型继承呢?是因为一层一层的继承，很像一条链子故得名。

# 　继承的局限性 #

虽然能够继承的选择器数量很多，但是也有很多选择器并不被支持继承的，如包含选择器(.one .two)或者相邻兄弟选择器(.one+.two)目前还是不支持继承。但若继承的元素是“a”，恰巧这个元素“a”又有hover状态的样式，那么hover状态的样式也会被继承。如下

*SCSS代码*

.myLink {
      @extend a;
    }
    a {
      color: blue;
      &:hover {
        text-decoration: underline;
      }
    }

*编译后的CSS代码*

a, .myLink {
      color: blue;
    }
    a:hover, .myLink:hover {
      text-decoration: underline;
    }

继承有强大的地方，也有局限的地方。对于a的继承可以继承其hover状态，但是对于某些选择器就不适用了。

# 　继承交叉合并选择 #

继承交叉合并选择，从字面上其实很难理解说的事件什么事儿。既然有点难理解，那么就先看小例子吧，用例子来解释感觉会比较清楚。例子如下

*SCSS代码*

.meng a {
    	font-weight:bold;
    }
    
    .long .link {
    	@extend a;
    }

*编译后的CSS代码*

.meng a, .meng .long .link, .long .meng .link {
      font-weight: bold;
    }

从上面 的例子不难看出，类名“.meng”中的“a”选择器被类名“.long”中的类名“.link”继承了，但是由于没有在同一个父级下，会产生交叉合并的编译结果。这种其实是可以解决的，就是把父级改成相同的即可。若父级不能改的话，那么就乖乖的在写一遍，或者将“.meng a”直接换成类名，继承这个类名也可以。

# 　继承带%的东西 #

有时候你想继承一个类名，但是并不想再在HTML中使用，就单单想写一个能够继承的类名。尤其是不想让它出现在css样式中。我们可以用占位符来写一些继承的样式(如“%one”)，然后再通过@extend继承，这样就可以防止被渲染到CSS的规则集中。如下

*SCSS代码*

#meng a%long {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }
    
    .notice {
      @extend %long;
    }

*编译后的CSS代码*

#meng a.notice {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }

# 　继承在指令中的作用域 #

继承在指令中是有作用域问题的，继承是无法使在指令如(@media)之外的选择器继承的，要是继承就只能写在指令中。实例如下

*SCSS代码*

.one {
    	height:300px;
    }
    @media print {
      .two {
    	@extend .one;
    	width:300px;
      }
    }

*编译后的CSS代码*

.one {
      height: 300px;
    }
    
    @media print {
      .two {
        width: 300px;
      }
    }