2016-08-21 15 views
0

私のプロジェクトのヘルパークラスを余白、フォントサイズなどとして作成していますが、問題があります。 クラス名を定義したいと思います。クラス名のプロパティを "プレースホルダ"として割り当てる必要があります。sassのクラス名の動的変数

現在のところ、m-r-(量)は範囲ループによって生成され、大きな制限(コンパイルと範囲の時間)があります。

  1. プレースホルダのように$の値変数行為をするすべての可能性はありますか?
  2. そうでない場合、どのようにして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; 
        } 
       } 
       } 
      } 


      } 
     } 
     } 
    } 

感謝のリンクです!

答えて

0

gulp-sassが〜23秒であるのにnode-sassを通して私のライブラリを処理することで解決しましたが、私はまだno1という質問について興味があります。