个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
<分区>
所以基本上我有一个颜色列表，我想根据它在 DOM 中的深度更改 html 中列表的边框颜色。
这是我目前拥有的 SASS:
$colors:
green,
red,
blue,
orange,
;
.list {
border-color:nth($C-subList-borders,1);
.list {
border-color:nth($C-subList-borders,2);
.list {
border-color:nth($C-subList-borders,3);
.list {
border-color:nth($C-subList-borders,4);
}
}
}
}
生成此 css:
.list { border-color: green; }
.list .list { border-color: red; }
.list .list .list { border-color: blue; }
.list .list .list .list { border-color: orange; }
我想做的是根据 $colors 变量中的颜色数量生成 .list 规则，而不是手动执行。我不知道怎么办。
我知道它里面会有一个@each 或@for 循环，但我想不出使它工作的语法。我不确定这是否可能。
-----更新:我自己的答案-----
由于问题被标记为重复，我无法将其作为实际答案发布，因此必须这样做。感谢 Hidden Hobbes 的回答。这让我了解了语法应该如何工作。你的回答中有一个多余的@each，所以我改写了这个(我会接受你的，因为你的回答给了我灵感)
$colors: green red blue orange;
$class: '.list';
$selector: $class;
@for $i from 1 through length($colors) {
$color: nth($colors,$i);
#{$selector} {
border-color: $color;
}
$selector: $selector $class;
}
0
我实际上正在尝试构建一个 gulp 计划来做网络相关的事情，比如编译 sass、缩小 css、丑化 javascript 等等。但我真的在使用 sass 时遇到了麻烦。 这是我的代码示例: gulp.
为了简化样式的描述，浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单，但在很多方面都不太方便，比如不支持嵌套，代码比较冗余;不支持继承和混合，代码不好复用等。 为了给 c
如何编译sass模块(新版sass)？ https://css-tricks.com/introducing-sass-modules/ 我尝试了 sass-migrator 终端，但它没有编译 ht
在 SASS 中，当出现错误时，它会在浏览器的页面顶部显示一条消息。它的一个样本在附图中。 该文本不可选择。它不是图像。它不会出现在“查看源代码”中。它在 Firebug 中不可见。 错误文本是如何呈
我想决定何时编译.sass文件。换句话说，我不想看文件，而是手动编译。 我该怎么做？ 最佳答案 它比我想象的要简单: sass style.scss style.css 关于sass - 我如何在不观
我希望有一个像 +stacktextshadow(blue, red, green) 这样的 mixin吐了text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3p
我想在我们公司的 Web 应用程序上使用 SASS，但我无法在生产机器上安装任何程序。我搜索的有关 SASS 的所有内容都需要您运行 gem 之类的安装程序，并且还需要 HAML。 我希望找到一个脚本
From the docs我看到您可以更改 SASS 的缓存位置。 但是，我不确定要使用的确切语法。我有一个 Zurb 基金会项目，随之而来的是一个 config.rb文件。我认为这是需要更新以更改缓
也许更好的问题是，有没有更有效的方法来覆盖 mixin 的一部分？ 这段SCSS: @mixin button { .button { background-color: red;
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置； // vue.config.js module.exports = { css: {
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置； // vue.config.js module.exports = { css: {
重复问题？ 是的。但与this有点不同 概述: 我也是括号文本编辑器的新用户。我知道 Scss 和 Sass 之间的区别。但是我使用方括号文本编辑器的原因只是为了 Sass 而不是 Scss。 看了J
我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px
我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 v3。我删除了 node-sass现在我的 package.json 中有这些版本: "g
我正在使用 vanilla Sass(没有 Compass/SUZY/Bourbon/etc.)，但我无法确定将 *.rb 文件放在哪里。我不是 Ruby 程序员，但我确实找到了一个其他人编写的函数，
我刚开始使用gulp-sass ，是否有一种“简单”的方法来找出正在使用的 Sass 版本？ 并不是说我认为这太重要了，但我正在使用 gulp-sass在 Visual Studio 2015 (CT
我正在为 sass 实现 grunt 插件到 css 处理，但有 2 个选项可用 grunt-contrib-sass 和 grunt-sass。 我在互联网上搜索但找不到任何相关答案 grunt-c
我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken())，据我所知，最新版本的 LibSass 允许这样做。 我已安装 node-sas
我是一名优秀的程序员,十分优秀！