scssでmargin-topとmargin-rightとセレクタを自動生成する。
はじめに
ページやブロックごとに少しづつmarginが違うときに使いたいscssです。
生成されるcssは5px刻みです。
.mt-5
〜.mt-200
.mr-5
〜.mr-200
デザイナーからデザインをもらったけど、margin
が統一されていない時がよくあります。
新たなclassとcssを追加するのは運用する上で最適解ではないように思います。
普段はBEMで書いているのでできるだけシングルクラスで書いていましたが、
margin
とその他のプロパティはそれぞれで独立させた方いいのではないかと思いました。
動作環境
- SCSS
コード
margin.scss
$breakpoint:768px;
//pcとspでmarginが変わるものに対応
@mixin pc {
@media print, screen and (min-width: $breakpoint) {
@content;
}
}
@mixin sp {
@media only screen and (max-width: ($breakpoint)) {
@content;
}
}
//5px-200pxまで5px刻み
@for $i from 1 through 40 {
$i: $i * 5;
.mt-#{$i} {
margin-top: #{$i}px;
}
.mr-#{$i} {
margin-right: #{$i}px;
}
@include pc{
.pc-mt-#{$i} {
margin-top: #{$i}px;
}
.pc-mr-#{$i} {
margin-right: #{$i}px;
}
}
@include sp{
.sp-mt-#{$i} {
margin-top: #{$i}px;
}
.sp-mr-#{$i} {
margin-right: #{$i}px;
}
}
}
おわりに
margin.scss
$breakpoint:768px;
//pcとspでmarginが変わるものに対応
@mixin pc {
@media print, screen and (min-width: $breakpoint) {
@content;
}
}
@mixin sp {
@media only screen and (max-width: ($breakpoint)) {
@content;
}
}
//5px-200pxまで5px刻み
@for $i from 1 through 40 {
$i: $i * 5;
.mt-#{$i} {
margin-top: #{$i}px;
}
.mr-#{$i} {
margin-right: #{$i}px;
}
@include pc{
.pc-mt-#{$i} {
margin-top: #{$i}px;
}
.pc-mr-#{$i} {
margin-right: #{$i}px;
}
}
@include sp{
.sp-mt-#{$i} {
margin-top: #{$i}px;
}
.sp-mr-#{$i} {
margin-right: #{$i}px;
}
}
}
こうすることで、要素に対するプロパティはその要素のデザインに関するものだけになり、
場所を移動させたり他のページにも表示させる際のmargin
の違いに悩まなくなります。
しばらく運用してみて、問題があればアップデートできればと思います。
css設計も見直しが必要かもしれないですね。
Author And Source
この問題について(scssでmargin-topとmargin-rightとセレクタを自動生成する。), 我々は、より多くの情報をここで見つけました https://qiita.com/tetsuro-ohashi/items/13bb5b58a1fb6b5b4bdc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .