个性化阅读
专注于IT技术分析

Sass:包含mixin用法

@include指令用于将mixin定义的样式包含到文档中。使用混入的名称, 并将可选参数传递给混入。

让我们以一个示例来演示如何在SCSS文件中包括一个混合。在这里, 我们获取一个名为” simple.html”的HTML文件, 其中包含以下代码。

<html>
<head>
   <title> Mixin example of sass</title>
   <link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
<div class="cont">
   <h2>Include a mixin example</h2>
   <h3>Different Colors</h3>
   <ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
   </ul>
  </div>
</body>
</html>

取一个具有以下代码的SCSS文件名” simple.scss”:

@mixin style {
.cont{
 background-color: #77C1EF;
 color: #ffffff;
    }
h3 {
 color: #ffffff;
 }
}
@include style;

打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。

萨斯–watch simple.scss:simple.css

Sass包括amixin1

执行完上述命令后, 它将创建一个名为?simple.css?的CSS文件。带有以下代码的文件。

.cont {
  background-color: #77C1EF;
  color: #FF0000; }
h3 {
  color: #FF0000; }

你可以看到自动创建的CSS文件。

Sass包括amixin2

输出

应用CSS后, 请查看输出。

Sass包括amixin3
赞(0) 打赏
未经允许不得转载:srcmini » Sass:包含mixin用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏