当@if指令失败时, 使用Sass @ else-if指令。如果失败, 则使用@else指令。
SCSS语法:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译后, 它将创建一个具有以下代码的CSS文件:
CSS语法:
让我们以一个示例来演示Sass @ else-if指令的用法。我们有一个名为” simple.html” 的HTML文件, 其中包含以下数据。
HTML档案:simple.html
<
!DOCTYPE html>
<
html>
<
head>
<
title>
@if Directive Example<
/title>
<
link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/>
<
/head>
<
body>
<
div class="container">
<
h2>
Welcome to srcmini<
/h2>
<
p>
A solution of all technology. <
/p>
<
/div>
<
/body>
<
/html>
创建一个名为” simple.scss” 的SCSS文件, 其中包含以下数据。
SCSS文件:simple.scss
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
将两个文件都放在根文件夹中。
现在, 打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码:sass – watch simple.scss:simple.css
它将在同一目录中自动创建一个名为” simple.css” 的普通CSS文件。
例如:
文章图片
创建的CSS文件” simple.css” 包含以下代码:
p {
color: green;
}
现在, 执行上面的html文件, 它将读取CSS值。
【Sass @ else-if指令用法示例】输出
文章图片
推荐阅读
- SASS @import指令用法
- Sass @each指令用法示例
- Android开发(java.net.SocketException: Permission denied问题解决)
- Qt QApplication::processEvents();//不停地处理事件,让程序保持响应
- android sdk 如何重新生成debug.keystore
- Android 开发学习进程0.16layout_weight属性R文件关联XMLModule
- 后端Spring Boot+前端Android交互+MySQL增删查改
- 《政务APP评价指标》团标出台在即
- uniapp小程序 兼容(开发中遇到)