Sass:扩展指令

描述

@extend指令用于共享规则和选择之间的关系。它可以在一个类中扩展所有其他类的样式,也可以应用自己的特定样式。以下是扩展的类型:

类型与描述句法编译代码
扩展复杂选择器
它可以扩展仅包含单个元素或类选择器的选择器。
h2 { font-size: 40px; } .container{ @extend h2 }h2, .container { font-size: 40px; }
多重延伸
一个选择器可以扩展多个选择器。
.style { font-size: 25px; font-style: italic; } h2 { color: #61C8E1; } .container { @extend .style; @extend h2 }.style, .container { font-size: 25px; font-style: italic; } h2, .container { color: #61C8E1; }
链延伸
由第二选择器扩展的第一选择器和由第三选择器扩展的第二选择器,因此这称为链接扩展。
.style { font-size: 25px; font-style: italic; } h2 { color: #61C8E1; @extend .style } .container { @extend h2 }.style, h2, .container { font-size: 25px; font-style: italic; } h2, .container { color: #61C8E1; }
选择器序列
嵌套选择器可以单独使用@extend
合并选择器序列
它合并了两个序列,即一个序列扩展了另一个序列中存在的另一个序列。
.style { font-size: 25px; font-style: italic; color: #61C8E1; } h2 .container { @extend .style }.container .style a { font-weight: bold; } #id .example { @extend a; }.style, h2 .container { font-size: 25px; font-style: italic; color: #61C8E1; }.container .style a, .container .style #id .example, #id .container .style .example { font-weight: bold; }
@extend-仅选择器
它的percent character(%)可以在id或class的任何地方使用,它可以防止将自己的规则集呈现给CSS。
.style a%extreme { font-size: 25px; font-style: italic; color: #61C8E1; } .container { @extend %extreme; }.style a.container { font-size: 25px; font-style: italic; color: #61C8E1; }
!optional标志
optional标志用于允许@extend不创建任何新选择器。
h2.important { @extend .style !optional; }A blank compile page gets display.
指令中的@extend
如果在@media内部使用@extend,则它只能扩展存在于相同指令块中的选择器。
@media print { .style { font-size: 25px; font-style: italic; } .container { @extend .style; color: #61C8E1; } }@media print { .style, .container { font-size: 25px; font-style: italic; } .container { color: #61C8E1; } }

以下示例演示了SCSS文件中@extend的使用:

扩展名

<!doctype html>
   <head>
      <title>Extend Example</title>
      <link rel = "stylesheet" href = "extend.css" type = "text/css" />
   </head>

   <body class = "container">
      <h2>Example using Extend</h2>
      <p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </body>
</html>

接下来,创建文件extend.scss

扩展

.style{
   font-size: 30px;
   font-style: italic;
}

h2{
   color: #787878;
   @extend .style

}

.container{
   @extend h2
}

您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\extend.scss:extend.css

接下来,执行以上命令;它将使用以下代码自动创建extend.css文件:

extend.css

.style, h2, .container {
   font-size: 30px;
   font-style: italic;
}

h2, .container {
   color: #787878;
}

作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1714.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月28日 下午9:02
下一篇 2021年1月28日 下午9:07

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注