Sass:定义一个Mixin

描述

@mixin指令用于定义混入。它可选地在mixin名称之后包括变量和参数。

以下示例演示了SCSS文件中@mixin的使用。

sample.htm

<html>
   <head>
      <title> Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>

   <body>
      <div class = "cont">
         <h1>Example using include</h1>
         <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3>
      </div>
   </body>
</html>

接下来,创建文件sample.scss

sample.scss

@mixin style {
   .cont{
      color: #77C1EF;
   }
}
@include style;

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

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

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

sample.css

.cont {
   color: #77C1EF;
}

输出量

让我们执行以下步骤,看看上面给出的代码如何工作:

  • 将上面给定的html代码保存在sample.htm文件中。
  • 在浏览器中打开此HTML文件,显示如下所示的输出。
Sass:定义一个Mixin

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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月26日 下午5:50
下一篇 2021年1月26日 下午6:10

相关推荐

发表回复

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