[英]Making grid with mixins
我找到并更改了一点代码,以便可以使用它,但是我遗漏了一件事。
$map: (1025: 12,768: 6 ,320: 1);
@each $point , $columns in $map {
@if $point == 320 {
@for $i from 1 through $columns {
@media (max-width: $point + px) {
$equ: 100% / $i;
.col-#{$i}-m {
width: $equ;
}
}
}
}@else if $point == 1025 {
@for $i from 1 through $columns {
@media (min-width: $point + px) {
$equ: 100% / $i;
.col-#{$columns} {
width: $equ;
}
.offset-#{$i} {
margin-left: $equ;
}
}
}
}@else if $point == 768 {
@for $i from 1 through $columns {
@media (min-width: $point + px) and (max-width: 1024px) {
$equ: 100% / $i;
.col-#{$columns}-t {
width: $equ;
}
.offset-#{$i}-t {
margin-left: $equ;
}
}
}
}
}
这是我的网格。 我不能使用引导程序,所以我做了自己的。 由此,我得到这个CSS。 我将为桌面视图粘贴CSS,因为它们的工作原理相同。
@media (min-width: 1025px) {
.col-1 {
width: 100%; }
.offset-1 {
margin-left: 100%; } }
@media (min-width: 1025px) {
.col-2 {
width: 50%; }
.offset-2 {
margin-left: 50%; } }
@media (min-width: 1025px) {
.col-3 {
width: 33.33333%; }
.offset-3 {
margin-left: 33.33333%; } }
@media (min-width: 1025px) {
.col-4 {
width: 25%; }
.offset-4 {
margin-left: 25%; } }
@media (min-width: 1025px) {
.col-5 {
width: 20%; }
.offset-5 {
margin-left: 20%; } }
@media (min-width: 1025px) {
.col-6 {
width: 16.66667%; }
.offset-6 {
margin-left: 16.66667%; } }
@media (min-width: 1025px) {
.col-7 {
width: 14.28571%; }
.offset-7 {
margin-left: 14.28571%; } }
@media (min-width: 1025px) {
.col-8 {
width: 12.5%; }
.offset-8 {
margin-left: 12.5%; } }
@media (min-width: 1025px) {
.col-9 {
width: 11.11111%; }
.offset-9 {
margin-left: 11.11111%; } }
@media (min-width: 1025px) {
.col-10 {
width: 10%; }
.offset-10 {
margin-left: 10%; } }
@media (min-width: 1025px) {
.col-11 {
width: 9.09091%; }
.offset-11 {
margin-left: 9.09091%; } }
@media (min-width: 1025px) {
.col-12 {
width: 8.33333%; }
.offset-12 {
margin-left: 8.33333%; } }
我需要将输出反转。 例如col-1应该是width: 8.33333%;
或col-12应该为width: 100%;
。 基本上,我需要反转数字,但是无论我如何尝试,总是一样。
执行此操作时:
$equ: 100% / $i;
.col-#{$i}-m {
width: $equ;
}
想想循环会导致什么。首先我将是1,100%除以1是100%。 您希望哪一个是100%/ numberofcols。
像这样:
$equ: 100% / ($columns + 1 - $i);
.col-#{$i}-m {
width: $equ;
}
在@Oliver Orchard给我一个提示后,我设法解决了这个问题。 这是代码:
@else if $point == 1025 {
@for $i from 1 through $columns {
@media (min-width: $point + px) {
$equ: 100% / ($columns)*$i;
.col-#{$i} {
width: $equ;
}
.offset-#{$i} {
margin-left: $equ;
}
}
}
}
感谢帮助 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.