SASS @each语句中的多个变量
SASS（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更强大和灵活的样式表语言。SASS中的@each语句用于循环遍历一个列表或映射，并对其中的每个元素执行相同的操作。
在SASS中，@each语句的语法如下：
@each $variable in <list or map> {
// statements
}其中，$variable是一个变量，用于存储列表或映射中的每个元素的值。<list or map>可以是一个列表或映射，用于遍历。在每次迭代中，$variable会被赋值为列表或映射中的当前元素，并执行@each语句块中的语句。
多个变量可以在@each语句中同时使用，例如：
$colors: red, green, blue;
$font-sizes: 12px, 14px, 16px;
@each $color in $colors, $size in $font-sizes {
.text-#{$color} {
font-size: $size;
}
}上述代码中，我们定义了两个变量$colors和$font-sizes，分别存储了颜色和字体大小的值。然后，在@each语句中同时遍历这两个变量，每次迭代中，$color会被赋值为$colors中的当前颜色，$size会被赋值为$font-sizes中的当前字体大小。在每次迭代中，我们使用这些变量生成一个带有对应颜色和字体大小的CSS类名，并设置对应的样式。
SASS中的@each语句可以帮助我们简化样式表的编写，特别适用于需要对一组元素应用相同样式的情况，例如生成一组颜色变体或字体大小变体的样式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc
相关·内容
1回答
录屏直播错误码5801如何解决？
官方文档、云直播
请描述您的问题
标题：录屏（ReplayKit） - 移动直播 - 文档首页 - 腾讯云文档平台 - 腾讯云
地址：https://cloud.tencent.com/document/product/454/7883
你好，我们app集成了录屏直播功能。现在调用[RPBroadcastActivityViewController loadBroadcastActivityViewControllerWithHandler:^(RPBroadcastActivityViewController * _Nullable broadcastActivityViewController, NSEr
浏览 1008提问于2018-03-16
2回答
在动态元素上应用渐变或实色
javascript、jquery、css
我试图用jquery对元素应用渐变或实心颜色。为什么和jQuery在一起？因为这个站点有几个不同的颜色组合，所以生成css类的工作太多了。
假设我通过一个JSON调用生成了这个列表
<div class="colours">
<ul>
<li class="black white"></li>
<li class="green"></li>
</ul>
</div>
如您所见，我需要一个带有渐变(黑色/白色)和一个实心(绿色)元素的列表元素
浏览 6提问于2015-08-25得票数 4
回答已采纳
1回答
循环遍历列表项并检查行内宽度。
jquery、css
我正在尝试使用jquery循环列表，并找出其中任何一个跨度的设置宽度为95%。如果是，那么将颜色更改为BG颜色为红色，如果为50%，则将BG颜色更改为黄色。知道我怎么能做到这一点吗？
我开始循环了。
JQUERY
// .skills = UL
$('.skills').each(function(i) {
var list = $(this).find('li span');
if (list.attr('style').indexOf('width') == 95) {
alert('hel
浏览 3提问于2014-12-02得票数 0
回答已采纳
2回答
包含多个列表的sass @each循环
css、sass
在scss中开发
我有两个变量列表：
$ids: 21, 33, 73;
$colors: #fff, #000, #333;
以及下面的@each循环。
@each $id, $color in ($ids, $colors) {
.category--#{$id},
.post--#{$id} {
color: #{$color};
}
}
我想显示以下内容
.category--21,
.post--21 {
color: #fff
}
.category--33,
.post--33 {
color: #000
}
.categ
浏览 2提问于2016-05-20得票数 4
回答已采纳
4回答
Sass -地图获取和简单变量有什么区别？
css、sass
我是Sass的新手，我一直在阅读关于使用变量的不同方法，我试图应用的这个原则只是用于颜色，我找到的一些解决方案是这样的(map-get)：
$colors: (
lighestGray: #F8F8FA,
lightGray: #A5ACBA,
light: #FFFFFF,
dark: #000000,
link: #428bca,
linkHover: #555,
navBlue: #7AC243,
navGreen: #009CDC,
);
然后你在你的课堂上用它，像这样：
.my-class {
color: ma
浏览 3提问于2016-08-31得票数 23
回答已采纳
4回答
无法在引导中覆盖$主题颜色
twitter-bootstrap、bootstrap-4、sass、bootstrap-5
它是用SASS引导4.0
我的style.scss文件包含以下代码：
@import "../bootstrap/scss/bootstrap";
@import "colors";
@import "main";
_colors.scss文件包含以下代码：
$bg-white : white;
$theme-colors: (
primary: #333333
)
您可以看到，我只是试图覆盖$theme-color('primary')，但问题是它什么也不做。
如果我在文件@import "color
浏览 6提问于2017-09-13得票数 26
回答已采纳
2回答
在FileZilla中使用Bulma /变量定制
css、sass、filezilla、bulma
我有一个在FileZilla上运行的网站。我想使用Bulma，我可以通过unpkg。我的问题是，我的网站有一个不同的颜色方案，比Bulma的绿松石一个。我是否可以改变配色方案：
没有SASS，在纯CSS中
与我的FileZilla一起运行
根据我对SASS的理解，它不是只是一个预编译器，最终产生了w/纯CSS吗？如果是，那么我可以在纯CSS中更改颜色变量吗？
谢谢
浏览 0提问于2019-10-01得票数 0
回答已采纳
1回答
在vue.js中用SASS定制Buefy
vue.js、sass、bulma、buefy
我是这方面的初学者，我正在为改变风格而努力。尤其是购物标签。
在我的组件中，我有这样的风格：
<style lang="scss" scoped>
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your own stuff
$my-primary: red;
$link: red;
$colors: (
"primary": ($min-primary, $primary-invert)
);
$tabs-toggle-link
浏览 2提问于2019-12-28得票数 5
8回答
for()函数中的":“
java
我在做一项涉及董事会的作业。这里给出了我们需要修改的基本代码，但我不明白: ()参数中的for是什么意思。它是否遍历了所有的板( ArrayList)？
private ArrayList<MovingElement> moveElems = new ArrayList<MovingElement>();
for (MovingElement mElement : moveElems) {
mElement.step();
}
浏览 1提问于2012-10-05得票数 4
回答已采纳
4回答
JavaScript/jQuery多维循环
javascript、jquery、arrays、loops、multidimensional-array
我有以下格式的HTML数据： <section class="data">
<div class="colors">
<span class="Red"></span>
<span class="Green"></span>
</div>
<div class="colors">
<span class="Red">
浏览 32提问于2018-02-20得票数 0
回答已采纳
3回答
替换嵌套列表中某些列表中的值
python、list、nested-lists
我正在为蜡笔制造商写一个程序。他们有4包库存(就目前而言，这是一个很好的调试起点)。我在一份清单中表明了这一点：
colors=[['pink','green','blue'],['blue','green','red'],['pink',blue','yellow'],['orange','pink','yellow']]
我想改变两包蜡笔的颜色，绿色在中间，以获得更多颜色的包装。首先，我发现所有中间都是绿色的
浏览 6提问于2017-12-02得票数 2
回答已采纳
1回答
在Ruby中迭代多维数组
ruby、arrays、multidimensional-array、iterator
我在Codecademy上的Ruby中的多维数组内迭代，遇到了一个我似乎找不到答案的问题。因此，在他们的示例中，他们展示了可以使用以下代码迭代多维数组：
things = [[1,2,3], ["red", "blue"]]
things.each do |sub_array|
sub_array.each do |item|
puts item
end
end
这会打印出两个sub_arrays的值。但是，如果我只想显示一个sub_array，我该怎么做呢？我已经尝试了下面的代码，但是我得到了一个未定义的方法‘`each’for
浏览 0提问于2014-03-23得票数 2
回答已采纳
1回答
如何读取docx中使用的所有字体大小
java、docx4j
我正在使用docx4j和他们为部件列表构建的非常有用的webapp：
我有一份有五个字的样本文件。前四种字体大小为12，最后一种字体大小为8。
我想阅读文档中使用的所有不同字体大小。所以在这个例子中: 12和8
我将示例文档上传到webapp上，我认为这些信息将存储在document.xml中，但我不确定，因为我只看到了16，而没有看到24。而且，我也不确定如何提取这些信息。
问题
如何在docx4j中提取单词内容的字体大小？
如何提取每个单词的字体颜色和整个word文档的背景色？
浏览 8提问于2013-07-17得票数 0
回答已采纳
2回答
jQuery -对html表行进行动态排序，不使用ui-sortable。
javascript、jquery、html、sorting
我正在尝试做一个可控的html表列表。
我的清单是这样：
<table>
<tr id="selection_18">
<td>
<select id="colors_18">
<option value="0">All</option>
<option value="1">Red</option>
浏览 1提问于2014-04-02得票数 1
回答已采纳
1回答
引导v4:主题-颜色和标准颜色变量的意义是什么？
css、twitter-bootstrap、sass、bootstrap-4
在Bootstrap v4.0.0.beta.2中，他们也在使用彩色地图，这使得我们现在可以使用像theme-color("primary")这样的颜色而不是$brand-primary。
我的问题是，当我添加我自己的自定义CSS并且想使用引导中的颜色时，我使用主题颜色函数而不是仅仅抓取它所基于的变量(如$primary )有什么好处？
在它们拥有的引导变量文件中：
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info:
浏览 3提问于2017-10-31得票数 9
回答已采纳
4回答
我可以把一个列表放在一个结构体中吗？
c++、visual-studio-2010、struct
我尝试使用列表作为结构的一部分，因为我们的产品有几种颜色。这是我可以做的事情，还是应该只使用数组？无论哪种方式，我都没有在网上找到任何例子。
#include "stdafx.h"
#include<iostream>
#include<string>
#include<sstream>
#include<cctype>
#include<list>
using namespace std;
///////////////////////////////////////////////////////
浏览 0提问于2012-07-04得票数 3
回答已采纳
1回答
使用XSLT php将XML转换为XML
xml、xslt
我想通过xslt使用php将xml文件转换成另一个文件。对于输出，我需要进行一些调整，但我不知道如何调整xsl样式表。
谢谢你的帮忙
需要对产出进行调整：
向类别元素添加动态计数，如<category1> <category2>.
向<$color>元素(如<green>S:M:L:XL</green> <orange>L:M</orange> )添加产品/颜色/颜色/可用尺寸的元素大小的所有内容
将动态计数添加到象<image1> <image2>这样的图像元素中
浏览 2提问于2012-11-04得票数 0
回答已采纳
1回答
用于多个记录的分组和排序的BizTalk XSLT映射
xslt、biztalk
输入信息：
输入文件中包含三条记录，详细信息按“成员”、“产品”和“依赖”的顺序排列，在每个记录中都有一个公共字段，它是“标识符”，因为某种原因，我们发现每个成员和产品都被循环成一个细节，每个依赖项都被循环到单独的详细................................................................................中。
<ns0:Root xmlns:ns0="Test">
<Detail>
<Member>
<Name>Jerry<
浏览 0提问于2019-01-24得票数 0
回答已采纳
5回答
我如何给每个单独的div一个随机的背景颜色？
javascript、jquery
我正在建立一个网站，我希望每个页面上的div是一个随机颜色从下面的选择。但是一旦我运行代码，每个div都是相同的颜色。我哪里错了？
$(document).ready(function(){
var colors = ['red','blue','green','yellow','cyan','orange'];
var new_color = colors[Math.floor(Math.random()*colors.length)];
$('.color-div&
浏览 1提问于2018-08-28得票数 3
1回答
如何减少循环
python、python-3.x、loops
我想知道是否有任何可能的方法来减少python中的循环？我已经在很多网站上搜索过了，但没有找到任何有用的东西。例如，我正在考虑这个简单的函数：
def fun():
colors = ["red", "grn", "blu", "prpl"]
i = 0
while 4 > i >= 0:
for i, r in enumerate(colors):
us = input("Enter your color\n")
浏览 0提问于2020-02-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
