@mixin指令定义了混合。它用于在mixin名称之后可选地包括变量和参数。
让我们以一个示例来演示如何定义一个mixin。在这里, 我们获取一个名为”
simple.html”
的HTML文件, 其中包含以下代码。
<
html>
<
head>
<
title>
Define a mixin example<
/title>
<
link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/>
<
/head>
<
body>
<
div class="cont">
<
h1>
Define a mixin directive.<
/h1>
<
h3>
It is used to include optionally the variables and arguments after the name of the mixin.<
/h3>
<
/div>
<
/body>
<
/html>
取一个具有以下代码的SCSS文件名” simple.scss” :
@mixin style {.cont{ color: #FF0000 ;
}}@include style;
打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
萨斯– watch simple.scss:simple.css
文章图片
执行完上述命令后, 它将使用以下代码自动创建一个名为” simple.css” 的CSS文件。
. cont {color: #FF0000 ;
}
【Sass(定义混合示例详解)】你可以看到自动创建的CSS文件。
文章图片
输出
应用CSS后, 请查看输出。
文章图片
推荐阅读
- Sass @error 指令用法详解
- Sass 具有多个分配的@each指令用法
- Sass @debug指令用法详解
- SASS-控制指令和表达式用法介绍
- Sass @ at-root指令用法详解
- Sass的优缺点介绍
- sdk安装&连接手机或者模拟器&adb基本命令&Appium安装使用
- 注解之 @MapperScan 和 @Mapper
- 借助ESP8266 WIFI模块,实现Android手机APP控制单片机来驱动硬件。