锐客网

  1. 首页 > 睿知 > it技术 > >

Sass @each指令用法示例

IT知识SASS-SCSS

Sass @each指令包含列表中每个项目的值。它也可用于多个分配以及带有地图的多个分配。

  • 简单的@each指令
  • @each指令具有多个分配
  • @each指令具有多个分配和映射
在Sass简单的@each指令中, 定义了一个变量, 该变量由列表中每个项目的值组成。
句法：
@each $var in < list or map>

【Sass @each指令用法示例】参数说明：
$ var：它指定变量的名称。 @each规则为列表中的每个项目设置$ var, 并使用$ var的值为输出提供样式。
：和是SassScript表达式, 可返回列表或地图
让我们以一个示例来演示Sass @each指令的用法。我们有一个名为” simple.html” 的HTML文件, 其中包含以下数据。
HTML档案：simple.html
< !DOCTYPE html> < html> < head> < title> @each Directive Example< /title> < link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/> < /head> < body> < p class="p_pink"> This is first paragraph.< /p> < p class="p_violet"> This is second paragraph.< /p> < p class="p_yellow"> This is third paragraph.< /p> < p class="p_blue"> This is fourth paragraph.< /p> < /body> < /html>

创建一个名为” simple.scss” 的SCSS文件, 其中包含以下数据。
SCSS文件：simple.scss
@each $color in pink, violet, yellow, blue {.p_#{$color} {background-color: #{$color}; }}

将两个文件都放在根文件夹中。
现在, 打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码：sass – watch simple.scss：simple.css
它将在同一目录中自动创建一个名为” simple.css” 的普通CSS文件。
例如：
Sass @each指令用法示例

文章图片
创建的CSS文件” simple.css” 包含以下代码：
.p_pink {background-color: pink; }.p_violet {background-color: violet; }.p_yellow {background-color: yellow; }.p_blue {background-color: blue; }

现在, 执行上面的html文件, 它将读取CSS值。
输出
Sass @each指令用法示例

文章图片

    推荐阅读


    上一篇：Android开发（java.net.SocketException: Permission denied问题解决）

    下一篇：Sass @ else-if指令用法示例