0%

Programmingプログラミングナレッジ

Posted:2019.02.17

Sassの条件分岐と繰り返しで汎用的に使えるclassを自動で生成する

前回に引き続きSassで使えるテクニックの記事になります。Sassでは条件分岐や繰り返しの機能も用意されています。プログラミングでいうところのif文やfor文と同じような感じで、スタイルを設定することができます。今回はこの条件分岐と繰り返しを使って、汎用的に使える複数のスタイル用classを一度に自動生成する方法をまとめていきたいと思います。

 

今回はmarginを付与するclassを例に見ていきます。前提としてclass名に実際のmarginの値が入る命名方法で、3桁の数字で空きの桁はゼロパディングにしたいと思います。

 

まずはSassの方を見ていきます。変数ではmarginで増やしていく単位を設定しています。1つの場合は同じ間隔で増えていきますし、複数設定しておくことで途中で増減値を変化させることができます。

【Sass(SCSS)】

$unit-s: 5;
$unit-m: 15;
$unit-l: 30;
@for $i from 0 through 10 {
 @if $i < 2 {
  .mg-00#{$i * $unit-s} { margin: #{$i * $unit-s}px; }
 } @else if $i < 4 {
  .mg-0#{$i * $unit-s} { margin: #{$i * $unit-s}px; }
 } @else if $i < 7 {
  .mg-0#{($i - 2) * $unit-m} { margin: #{($i - 2) * $unit-m}px; }
 } @else if $i < 8 {
  .mg-0#{($i - 4) * $unit-l} { margin: #{($i - 4) * $unit-l}px; }
 } @else if $i > 8 {
  .mg-#{($i - 5) * $unit-l} { margin: #{($i - 5) * $unit-l}px; }
 }
}

 

変数を設定したらforで繰り返しの記述をしていきます。繰り返しの中では、class名やmarginの値の増減値を変化させるための条件分岐をif elseを使って実現します。ここでは実際のclass命名ルールやmarginの値によってカスタマイズします。これをコンパイルするとCSSではこのような感じで書き出されます。

【CSS】

.mg-000 { margin: 0; }
.mg-005 { margin: 5px; }
.mg-010 { margin: 10px; }
.mg-015 { margin: 15px; }
.mg-030 { margin: 30px; }
.mg-045 { margin: 45px; }
.mg-060 { margin: 60px; }
.mg-090 { margin: 90px; }
.mg-120 { margin: 120px; }
.mg-150 { margin: 150px; }

 

いかかでしょうか、今回はmarginを例にまとめてみましたが、paddingやfont-sizeなどいろんなプロパティで流用できるかと思います。CSSでは大量に記述しないといけないですし、変更する場合も数が多いと大変ですが、Sassの繰り返しと条件分岐を使えば、管理するときの工数も圧縮できますね。

 

(参考にさせて頂いたサイト)
Sass:eachやforを使って繰り返し記述する手間を省く

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】