css - 动态类和值

标签 css sass

我有如下所有方向(边距和填充)的辅助类:

.h-space-top-10 {margin-top: 10px;}
.h-space-top-20 {margin-top: 20px;}
.h-space-top-30 {margin-top: 30px;}

无论如何,是否可以使用 Sass 创建具有动态值的值(例如,高达基值 10px 的 10 倍)或者是否必须手动写出它们?

最佳答案

@for $i from 1 through 3 {.h-space-top-#{$i * 10} {margin-top:#{$i * 10}px}}

关于css - 动态类和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39245725/

相关文章:

javascript - 如何在悬停时展开容器中的每个子元素?

css - 制作基于 sass (scss) 的网格 - 如何使用一个声明创建类名列表

sass - Webpack - 从绝对路径导入

html - 为什么这些 div 不并排显示?

css - 定义多个嵌套元素的更简洁的方法

javascript - iPad/iPhone 的自定义 CSS/元标记

php - 资源解释为样式表,但使用 MIME 类型文本/html 和 PHP 中生成的 css 传输

css - HTML 页面不会验证

jquery - codecademy 是掌握 Web 开发的好选择吗?

css - 检查变量是否包含在 SCSS 的单词列表中