qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
150 stars 6 forks source link

Flex:class名の数値を繋ぐハイフンを変更する機能 #270

Closed qrac closed 4 years ago

qrac commented 4 years ago

.is-mobile-12 などのclass名を別の命名規則に変更する場合に機能が足りない。

.hp_flex_mb1 にしようとしても .hp_flex_mb-1 となり、ハイフンが変更できない。ハイフンを変数で変更する機能を追加する。

Before

@include generate-style($option-generate-style-flex) {
  #{$modifier-flex}#{$suffix-flex-grow},
  #{$modifier-flex-mobile}#{$suffix-flex-grow} {
    @include musubii-style-flex-grow();
  }
  @for $i from 1 through $flex-split {
    #{$modifier-flex}-#{$i},
    #{$modifier-flex-mobile}-#{$i} {
      @include musubii-style-flex-split($i);
    }
  }
  #{$modifier-flex}#{$suffix-flex-full},
  #{$modifier-flex-mobile}#{$suffix-flex-full} {
    @include musubii-style-flex-full();
  }
  #{$modifier-flex}#{$suffix-flex-auto},
  #{$modifier-flex-mobile}#{$suffix-flex-auto} {
    @include musubii-style-flex-auto();
  }
}
qrac commented 4 years ago

After

@include generate-style($option-generate-style-flex) {
  #{$modifier-flex}#{$suffix-flex-grow},
  #{$modifier-flex-mobile}#{$suffix-flex-grow} {
    @include musubii-style-flex-grow();
  }
  @for $i from 1 through $flex-split {
    #{$modifier-flex}#{$suffix-flex-pipe}#{$i},
    #{$modifier-flex-mobile}#{$suffix-flex-pipe}#{$i} {
      @include musubii-style-flex-split($i);
    }
  }
  #{$modifier-flex}#{$suffix-flex-full},
  #{$modifier-flex-mobile}#{$suffix-flex-full} {
    @include musubii-style-flex-full();
  }
  #{$modifier-flex}#{$suffix-flex-auto},
  #{$modifier-flex-mobile}#{$suffix-flex-auto} {
    @include musubii-style-flex-auto();
  }
}
qrac commented 4 years ago

ビルド済のCSSに変更はない。

qrac commented 4 years ago

masterに反映。

qrac commented 4 years ago

v7.0.1に反映。