Sass教程

SASS 传递到mixin

SASS将内容块传递到mixin

内容块被传递到mixin以在样式内放置。 Sass 3.2版中添加了此功能。样式包含在@content指令位置的mixin中。
在范围中指定内容块,并在定义块的mixin中传递范围。
Le's以示例来看如何在SCSS文件中传递内容块以进行混合。
使用以下代码创建一个名为"simple.html"的HTML文件。
<html>
<head>
   <title>Pass content block to mixin example</title>
   <link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
<div class="block">
     <h1>Example using passing content blocks</h1>
     <p>Different Colors</p>
     <ul>
      <li>Red</li>
      <li>Green</li>
      <li>Blue</li>
     </ul>
</div>
</body>
</html>
    
现在,创建一个名为" simple.scss"的SCSS文件,其代码如下:
@mixin element{
   @content;
}
@include element{
  .block{
    color: blue;
  }
 } 
    
打开命令提示符,然后运行 watch 命令告诉SASS监视文件,并在更改SASS文件时更新CSS。
sass--watch simple.scss: simple.css
Sass将内容块传递给mixin1
上面的命令,它将使用以下代码自动创建一个名为" simple.css"的CSS文件。
.block {
  color: blue; }  
    
您可以看到自动创建的CSS文件。
Sass将内容块传递给mixin2
输出:
应用CSS后查看输出。
Sass传递内容块到mixin3
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4