css - SASS/SCSS mixin 来生成 css 网格类 - IE 11 需要额外的 20px 间隙列
问题描述
我有以下 SCSS mixin,它从.grid1
to生成 CSS 类.grid12
:
$columns: 12;
@mixin repeat($character, $n) {
$c: "";
@for $i from 1 through $n {
$c: $c + $character;
}
-ms-grid-columns: unquote($c);
}
// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
@for $i from 1 through $columns {
.grid#{$i} {
@include repeat(" 1fr", $i);
}
}
}
@include grid-x;
使用 libsass 生成的 CSS 类如下所示:
.grid1 {
-ms-grid-columns: 1fr;
}
.grid2 {
-ms-grid-columns: 1fr 1fr;
}
.grid3 {
-ms-grid-columns: 1fr 1fr 1fr;
}
...
由于 IE 11 不支持grid-gap
我想在生成的列之间插入 20px 间隙列。
预期结果如下所示:
// nothing changed for .grid1
.grid1 {
-ms-grid-columns: 1fr;
}
.grid2 {
-ms-grid-columns: 1fr 20px 1fr;
}
.grid3 {
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
}
...
简单地20px
在重复字符串中添加列会导致不需要的尾随20px
:
@include repeat(" 1fr 20px", $i);
结果是
.grid1 {
-ms-grid-columns: 1fr 20px;
} ^^^^
.grid2 {
-ms-grid-columns: 1fr 20px 1fr 20px;
}^ ^^^^
.grid3 {
-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px;
} ^^^^
...
任何想法如何使用 SCSS mixins 获得所需的结果?
为了方便测试,只需将 mixins 粘贴到sassmeister上即可。
解决方案
您可以为间隙包含另一个变量并这样做。
$columns: 12;
@mixin repeat($character, $gap, $n) {
$c: "";
@if ($n != 1) {
@for $i from 1 through ($n - 1) {
$c: $c+" "+$character+" "+$gap ;
}
}
$c: $c+" "+$character ;
-ms-grid-columns: unquote($c);
}
// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
@for $i from 1 through $columns {
.grid#{$i} {
@include repeat("1fr","20px", $i);
}
}
}
@include grid-x;
如果您在间隙中指定和空字符串,这也将为您提供初始结果:
推荐阅读
- postgresql - Postgres,如何迭代访问数据库中的所有表,子查询?
- docker - Kubernetes 描述 pod - 来自服务器的错误 (NotFound)
- android - SectionedRecyclerViewAdapter 动画
- amazon-web-services - 如何将代理添加到 s3,以便我可以使用托管在 EC2 实例中的服务?
- docker - 错误提案响应不成功,错误代码 500,名称为“cch16”的 msg 链码已存在
- javascript - Selenium-webdriver 无法使用 CSS 选择器找到元素
- javascript - 创建收藏夹列表 - 如何在单击时将项目从一个列表复制到另一个列表?
- c# - System.Collections.Generic.KeyNotFoundException 与元组键
- c++ - getline()函数的while循环如何在每次while循环结束后引入新的文本行
- python - 选择带有硒的选项