【SCSS】margin/paddingを一気に作成

SCSSでmarginやpaddingを一気に作成する方法を共有します。

この方法を使えば、margin-top:1remをここに使いたいけど、クラスをわざわざ作るのもめんどくさいなという時に、HTMLに’mt-1’とクラス付するだけで追加をすることができます。

SCSSでmargin/paddingを一気に作成する方法

では、marginを使って基本的な形をみてみましょう。

基本的な指定方法

@forを使って1remごと一気に作成します。

@for $value from 0 through 10 {
    .m {
        &a-#{$value} {
            margin: #{$value}rem;
        }
    }
}

 

こちらをCSSで出力すると下記のようになります。

.ma-0{ margin: 0rem; }
.ma-1{ margin: 1rem; }
.ma-2{ margin: 2rem; }
.ma-3{ margin: 3rem; }
.ma-4{ margin: 4rem; }
.ma-5{ margin: 5rem; }
.ma-6{ margin: 6rem; }
.ma-7{ margin: 7rem; }
.ma-8{ margin: 8rem; }
.ma-9{ margin: 9rem; }
.ma-10{ margin: 10rem; }

 

marginをtop / bottom / left / rightも指定

@for $value from 0 through 10 {
    .m {
        &a-#{$value} {
            margin: #{$value}rem !important;
        }

        &b-#{$value} {
            margin-bottom: #{$value}rem !important;
        }

        &t-#{$value} {
            margin-top: #{$value}rem !important;
        }

        &l-#{$value} {
            margin-left: #{$value}rem !important;
        }

        &r-#{$value} {
            margin-right: #{$value}rem !important;
        }
    }
}

指定方法

margin	.ma-1
margin-top	.mt-1
margin-bottom	.mb-1
margin-left	.ml-1
margin-right	.mr-1

 

 

paddingを指定

@for $value from 0 through 10 {
    .p {
        &a-#{$value} {
            padding: #{$value}rem !important;
        }

        &b-#{$value} {
            padding-bottom: #{$value}rem !important;
        }

        &t-#{$value} {
            padding-top: #{$value}rem !important;
        }

        &l-#{$value} {
            padding-left: #{$value}rem !important;
        }

        &r-#{$value} {
            padding-right: #{$value}rem !important;
        }
    }
}

 

指定方法

padding	.pa-1
padding-top	.pt-1
padding-bottom	.pb-1
padding-left	.pl-1
padding-right	.pr-1

 

まとめ

上記を全てまとめると下記になります。

@for $value from 0 through 10 {
    .m {
        &a-#{$value} {
            margin: #{$value}rem !important;
        }

        &b-#{$value} {
            margin-bottom: #{$value}rem !important;
        }

        &t-#{$value} {
            margin-top: #{$value}rem !important;
        }

        &l-#{$value} {
            margin-left: #{$value}rem !important;
        }

        &r-#{$value} {
            margin-right: #{$value}rem !important;
        }
    }

    .p {
        &a-#{$value} {
            padding: #{$value}rem !important;
        }

        &b-#{$value} {
            padding-bottom: #{$value}rem !important;
        }

        &t-#{$value} {
            padding-top: #{$value}rem !important;
        }

        &l-#{$value} {
            padding-left: #{$value}rem !important;
        }

        &r-#{$value} {
            padding-right: #{$value}rem !important;
        }
    }
}