update.はじめにサイト制作の際にコンテンツ、パーツ間の幅の指定にpadding,marginはかなり使用頻度が高いものです。各パーツごとのクラスセレクタ(.headerとか.sidebar-left等)を作成して個別にmargin,paddingを当てる方法もありますが、使用頻度の高い分Bootstrapのマルチクラス設計的な形でmarginやpaddingだけを適用する専用のセレクタを作成したほうが良い場合があります。ヘッダーパーツが検索結果ページでだけmarginの値が異なる場合、別のクラスセレクタを作成してセレクタを上書きする方法があります。ヘッダーコンテンツ</div>しかし、上書きをすると使われないセレクタが増える結果になったり、後のアップデートでまた別のページでもmarginが変わるといった際に別のセレクタを作成する必要が出てきます。そこで、SCSSのfor文を利用してmargin,paddingを指定するクラスセレクタを量産します。1px;}//以下$margin-maxの値まで量産されるPaddingpaddingもmarginと同様で、名称を変えるだけで大丈夫です。1px;}//以下$padding-maxの値まで量産される上記のコードでmargin,paddingが量産できました。あとは適用箇所に応じてクラスセレクタをHTML要素につけていきます。上記のコードで、例えば「検索結果ページだけヘッダーパーツのmargin-topを50pxにしたい」といった場合に.mt50を該当の要素に適用させるだけでmarginの上書きをする必要がなくなります。上記のコードの場合、レスポンシブレイアウトにした時に問題が出てきます。レスポンシブレイアウトは大抵、PCとモバイルで大幅にデザインが異なるためです。そのため、「検索結果ページのヘッダーパーツはPCではmargin-topが50pxでいいが、モバイルではmargin-topを14pxにしたい」といった場合や、「モバイルではmargin-topをemにしたい」といった形でそもそもの単位が異なる要件にも対応する必要が出てきます。そこで、そのような要件に対応するmixinと関数を作成します。レスポンシブに対応したクラスセレクタを生成するmixin1.単位をpxから別の単位に変換する関数まずは現在のpxの単位を別の単位に変換する関数を作成します。ここではemに変換する関数を作成します。pxをemに変換します。