コード・実装

【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;
        }
    }
}

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】