0
私のプロジェクトのヘルパークラスを余白、フォントサイズなどとして作成していますが、問題があります。 クラス名を定義したいと思います。クラス名のプロパティを "プレースホルダ"として割り当てる必要があります。sassのクラス名の動的変数
現在のところ、m-r-(量)は範囲ループによって生成され、大きな制限(コンパイルと範囲の時間)があります。
- プレースホルダのように$の値変数行為をするすべての可能性はありますか?
- そうでない場合、どのようにしてgulpでコンパイル時間を増やすことができますか?ここで
答えをcodepen http://codepen.io/anon/pen/NAmVVj
$break-small: 320px;
$break-medium: 768px;
$break-large: 1024px;
$break-extra: 1280px;
$baseSizes: (s: 1.5vw, m: 0.7vw, l: 5px, x: 5px);
$fontSizes: (s: 4.7vw, m: 2.08vw, l: 16px, x: 16px);
@mixin respond-to($media) {
@if $media == s {
@media (max-width: $break-medium) {
@content;
}
}
@else if $media == m {
@media (min-width: $break-medium) and (max-width: $break-large) {
@content;
}
}
@else if $media == l {
@media (min-width: $break-large) and (max-width: $break-extra) {
@content;
}
}
@else if $media == x {
@media (min-width: $break-extra) {
@content;
}
}
}
$range: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
$properties: (m: "margin", p: "padding", b: "border");
$directions: (t: "top", b: "bottom", l: "left", r: "right", a: "all");
@each $value in $range {
@each $breakpoint, $size in $baseSizes {
@each $aliasProp, $propValue in $properties {
@each $aliasFrom, $fromValue in $directions {
@if $aliasFrom == a {
.#{$aliasProp}-#{$aliasFrom}-#{$value} {
$final: calc((#{$value} * #{$size}) * 2);
#{$propValue}: $final;
}
}
@if $aliasFrom != a {
.#{$aliasProp}-#{$aliasFrom}-#{$value} {
$final: calc((#{$value} * #{$size}) * 2);
#{$propValue}-#{$fromValue}: $final;
&-#{$breakpoint} {
@include respond-to($breakpoint) {
$final: calc((#{$value} * #{$size}) * 2);
#{$propValue}-#{$fromValue}: $final !important;
}
}
}
}
}
}
}
}
感謝のリンクです!