SASS @for循环输出CSS作为一个代码块? [复制]

2023-12-11

我有以下 for 循环:

@for $i from 1 through $columns {
    .tile#{$i}.noMargin {  
    margin:0;
     }
}

其输出为:

 .threeColForm .tile1.noMargin {
  margin: 0; }
.threeColForm .tile2.noMargin {
  margin: 0; }
.threeColForm .tile3.noMargin {
  margin: 0; }
.threeColForm .tile4.noMargin {
  margin: 0; }
.threeColForm .tile5.noMargin {
  margin: 0; }
.threeColForm .tile6.noMargin {
  margin: 0; }
.threeColForm .tile7.noMargin {
  margin: 0; }
.threeColForm .tile8.noMargin {
  margin: 0; }
.threeColForm .tile9.noMargin {
  margin: 0; }
.threeColForm .tile10.noMargin {
  margin: 0; }
.threeColForm .tile11.noMargin {
  margin: 0; }
.threeColForm .tile12.noMargin {
  margin: 0; }

有没有办法这样写,输出如下:

.threeColForm .tile1.noMargin,
.threeColForm .tile2.noMargin,
.threeColForm .tile3.noMargin,
.threeColForm .tile4.noMargin,
.threeColForm .tile5.noMargin,
.threeColForm .tile6.noMargin,
.threeColForm .tile7.noMargin,
.threeColForm .tile8.noMargin,
.threeColForm .tile9.noMargin,
.threeColForm .tile10.noMargin,
.threeColForm .tile11.noMargin,
.threeColForm .tile12.noMargin {
  margin: 0; 
}

任何帮助表示赞赏。谢谢

我的CSS(仅供参考):

.threeColForm {
    //cols, gutter
    @include grid(12, 1);
}

Use @extend

$columns: 12;

%no-margin {
    margin: 0;
}

@for $i from 1 through $columns {
    .tile#{$i}.noMargin {  
        @extend %no-margin;
    }
}

Output:

.tile1.noMargin, .tile2.noMargin, .tile3.noMargin, .tile4.noMargin, .tile5.noMargin, .tile6.noMargin, .tile7.noMargin, .tile8.noMargin, .tile9.noMargin, .tile10.noMargin, .tile11.noMargin, .tile12.noMargin {
  margin: 0;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SASS @for循环输出CSS作为一个代码块? [复制] 的相关文章

随机推荐

  • 微前端/多存储库角度中的 Webpack 外部模块在构建时出现错误

    我创建了一个 Angular 项目来从其他正在运行的 Angular 项目调用微前端 我已使用 webpack config js 在我的应用程序中导入该模块 它在本地运行良好 但在生产构建中失败 当我运行 ng build 时 它会抛出异
  • 以编程方式将 .PFX 转换为 .PEM?

    我需要以编程方式从 MS 证书存储中提取证书及其私钥 并以某种方式将它们转换为 PEM 格式 我不想在命令行中使用 OpenSSL 因为我想将所有内容保留在内存中 避免使用文件 我可以使用 PFXExportCertStoreEx 将它们从
  • 如何编写自定义 servlet 上下文 init 方法

    我希望在 servlet 上下文初始化阶段使用 servletContext setAttributes 设置一些应用程序范围的变量 我怎样才能实现这一点 实施javax servlet SevletContextListener当java
  • 的原始用途? [关闭]

    Closed 这个问题是无关 目前不接受答案 我很好奇这样做的初衷
  • spring security 5.1 oauth 2,如何向用户身份验证uri添加附加参数

    我正在尝试集成外部 oauth 2 身份验证服务器和资源服务器 它们的配置需要一些额外的自定义参数 state 应该是 uuid TimeStamp accessType 并且 clientSecret 应该使用所有先前参数的组合作为数据进
  • 根据用户选择/提示检索 JSON 数据

    我试图让用户做出选择 并根据该选择深入研究 JSON 数据并显示所选信息 最终 我想在 html 中创建一个下拉选择 并在 Javascript 中创建一个事件监听器 然后进行检索 var userOcean prompt Will you
  • 同时访问变量

    我需要从多个回调 事件处理程序 中增加全局变量 这些回调可能会同时触发 我需要担心同时访问该变量吗 有没有像 C 中的 Interlocked Increment 类似的东西 JavaScript 中有 Interlocked Increm
  • 如何发送 HL7 ACK 消息作为 TCP 响应?

    我通过 TCP 连接接收 HL7 消息 这些消息始终是 ADT 类型 我使用 Kestrel 来监听这些消息 并使用 NHAPI 包来处理它们 我拿了David Fowler 的 Kestrel 示例代码设置 TCP 侦听器 所以基于这个示
  • 使用 Ajax 将 Javascript 变量传递给 PHP

    我目前正在开发一个使用 Ajax 的现有脚本 这是我以前从未使用过的 我在 javascript 文件中设置了一个变量 它从页面上的输入字段获取其值 我需要使用 Ajax 将其发布到我的 PHP 页面 但我不知道从哪里开始 我不确定您需要看
  • 不带控制器后缀的控制器

    根据我的设计要求 我想从控制器中排除后缀 Controller 并将其替换为 Resource 这样 FundsController 将成为 FundsResource 问题是 当我更改替换术语 控制器 时 我无法通过基于约定或属性路由路由
  • 寻找一个javascript解决方案来重新排序div

    我在页面中有一些div显示相同类型的不同内容 例如优惠 现在优惠有结束时间 还有发布时间 如果用户想按结束时间或发布时间排序 则应重新排序 我正在寻找一个可以做到这一点的javascript解决方案 Ext JS或JQuery下的任何特定库
  • 即使刷新页面后如何记住表单中的输入数据?

    为了使表单记住用户之前的输入或当前的输入 即使在他 她刷新页面后 该怎么做 我应该做什么 div class row div
  • 如何让 Eclipse 显示我的类中的 javadoc,而不在 jar 中包含源代码

    我正在构建 jar 我想在没有源的情况下打包它们 但我希望在 eclipse 中为开发人员提供 javadoc JAR 的用户可以在使用 JAR 的 Java 项目的 Java 构建路径属性中将 Javadoc 位置 存档内的 URL 文件
  • 使用 Facebook Graph API 上传照片时出现异常

    我想在应用程序的默认相册中将用户的照片上传到 Facebook 此处的发布对此进行了描述 http developers facebook com docs reference api photo 该方法已在这里得到解答 如何使用 Face
  • 在ReactJs中,如何使用扩展创建子组件

    在下面的代码片段中 我使用扩展来创建组件 这是行不通的 但是如果我使用 React createClass 效果很好 您能否让我知道下面的代码片段中有什么问题 import React from react class App extend
  • 从 ifconfig 中提取网络信息的算法(ubuntu)

    我正在尝试解析来自 ifconfig ubuntu 的信息 通常 我会将这样的数据块拆分为单词 然后搜索子字符串以获得我想要的内容 例如 给定line inet addr 192 168 98 157 Bcast 192 168 98 25
  • 使用反射设置私有静态最终字段

    基于使用 Java 反射更改私有静态最终字段 我尝试设置一个私有静态最终字段 我知道这非常糟糕 但这个问题与代码质量无关 它与 Java 反射有关 import java lang reflect Field import java lan
  • 检查 Android 中 Typeface 对象的族

    是否可以检查哪些家庭TypefaceAndroid API 8 中正在使用对象吗 我正在像这样在 Paint 对象上创建字体 Simplified code the user actually selects the family and
  • javax.cache 按引用存储与按值存储

    我是java缓存的新手 我尝试理解两者之间的区别按值存储 vs 通过引用存储 我在 java cache 文档中引用了下面的段落 在条目存储在缓存中以及从缓存返回时再次复制条目的目的是允许应用程序继续改变键和值的状态 而不会对缓存保存的条目
  • SASS @for循环输出CSS作为一个代码块? [复制]

    这个问题在这里已经有答案了 我有以下 for 循环 for i from 1 through columns tile i noMargin margin 0 其输出为 threeColForm tile1 noMargin margin