我无法在我的 sass 项目中创建每个循环
Posted
技术标签:
【中文标题】我无法在我的 sass 项目中创建每个循环【英文标题】:I can't make each loop in my sass project 【发布时间】:2021-08-29 03:47:22 【问题描述】:我想创建自己的框架,例如 bootstrap。但是我遇到了一个问题。我创建了媒体查询部分,但我无法使用 Sass 技术进行循环。我想创建一个循环来执行以下操作
@media (min-width: #/*there is the first loop (576px,768px,992px ..)*/)
.grid-col-#/*this is loop two (i want to loop all sizes such (mid, xl, xxl))*/
display: grid;
grid-template-columns: repeat(#/*i want here to make loop does take a lot of
numbers such as (1, 2, 3, 4, 5, 6 ..)
of columns*/,minmax(0, 1fr));
这个想法是让一种媒体重复,直到它承载所有尺寸的屏幕,就像这样
@media (min-width: 557px)
.grid-col-sm-1
display: grid;
grid-template-columns: repeat(1 /*the number in the class*/, minmax(0, 1fr))
.grdi-col-sm-2
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr))
@media (min-width: 768px)
.grid-col-md-1
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr))
.grid-col-md-2
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr))
我希望我解释得很好。我想发展我的基本技能,仅此而已。
【问题讨论】:
你知道 sass 中的“@each”吗?文档示例:sass-lang.com/documentation/values/lists 【参考方案1】:你想要这样的东西:
$breakpoints : '575px','768px','992px','1200px';
@each $breakpoint in $breakpoints
@media (min-width: #$breakpoint )
@for $i from 1 through 12
.grid-col-#$i
display: grid;
grid-template-columns: repeat( #$i,minmax(0, 1fr));
这将输出:
@media (min-width: 575px)
.grid-col-1
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
.grid-col-2
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
.grid-col-3
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
.grid-col-4
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
.grid-col-5
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
.grid-col-6
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
.grid-col-7
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
.grid-col-8
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
.grid-col-9
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
.grid-col-10
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
.grid-col-11
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
.grid-col-12
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
@media (min-width: 768px)
.grid-col-1
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
.grid-col-2
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
.grid-col-3
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
.grid-col-4
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
.grid-col-5
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
.grid-col-6
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
.grid-col-7
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
.grid-col-8
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
.grid-col-9
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
.grid-col-10
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
.grid-col-11
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
.grid-col-12
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
@media (min-width: 992px)
.grid-col-1
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
.grid-col-2
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
.grid-col-3
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
.grid-col-4
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
.grid-col-5
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
.grid-col-6
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
.grid-col-7
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
.grid-col-8
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
.grid-col-9
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
.grid-col-10
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
.grid-col-11
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
.grid-col-12
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
@media (min-width: 1200px)
.grid-col-1
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
.grid-col-2
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
.grid-col-3
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
.grid-col-4
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
.grid-col-5
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
.grid-col-6
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
.grid-col-7
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
.grid-col-8
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
.grid-col-9
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
.grid-col-10
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
.grid-col-11
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
.grid-col-12
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
【讨论】:
以上是关于我无法在我的 sass 项目中创建每个循环的主要内容,如果未能解决你的问题,请参考以下文章
无法在 Android Studio 4.0 中创建 Dart 项目