2018年5月23日

デザイン

繰り返し文・条件分岐を使ってラクしてSassを書いてみよう!

繰り返し文・条件分岐を使ってラクしてSassを書いてみよう!繰り返し文・条件分岐を使ってラクしてSassを書いてみよう!

目次

  1. はじめに
  2. 繰り返し文(for文・while文)
  3. 条件分岐文(if文)
  4. これらの組み合わせ
  5. まとめ

はじめに

今回はSassの記述方法の一つである、繰り返し文・条件分岐文についてご紹介します。

繰り返し文・条件分岐を使って楽してSassを書いてみよう.png (1.2 MB)

Sassには繰り返し処理(for文・while文)や条件分岐(if文)といった機能が備わっており、
プログラミングっぽくにStyleを書くことができます。これにより、今まで何行もかかっていたStyleが数行で書くことができたりなど、Sassのコーディングを簡単にすることができます。実際にコードを書きながら勉強していきましょう。

繰り返し文(for文・while文)

繰り返し文は似たようなStyleをたくさん用意するときに効果的な記法です。for文とwhile文の2種類の書き方があります。

for文

Sass

@for $i from 1 through 5 {
   .mt#{$i*10} { margin-top:#{$i*10}px; }
}

CSS

.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

処理としては変数$iが1から5まで増加し、その中で1増加するごとにカッコ内のStyleを吐き出す仕組みになっています。

while文

Sass

$i:1;
@while $i <= 5 {
  .mt#{$i*10}{
    margin-top:#{$i*10}px;
  }
  $i:$i+1;
}

(吐き出されるCSSは上のfor文と同じです)

こちらも処理としてはfor文と同じで$iは1から5まで増加し、その中で1増加するごとにカッコ内のStyleを吐き出す仕組みになっています。
for文との違いは最初に変数独立して指定している点、括弧内で$iを増加させる処理を書いている点が違います。

for文とwhile文の使い分けは見てもわかるようにfor文の方が短くて済むので簡単な繰り返し文だったらfor文・それよりも複雑な繰り返しが必要な時はwhile文と使い分けるのがいいと思います。

条件分岐文(if文)

特定のclassには別のstyleを付与したいなど、分岐して考えることが必要なときに使います。

Sass

$i:20;
@if $i == 20 {
   .style#{$i} { margin-top:#{$i}px; }
}@else{
   .style#{$i} { margin-bottom:#{$i}px }
}

CSS

.style20 { margin-top:20px; }

こちらの例は先に指定した変数$iが20かどうかを判断し、20ならmargin-topを、それ以外ならmargin-topを返す仕組みになっています。

これらの組み合わせ

繰り返し文と条件分岐文は組み合わせて使用することが多いです。一例をあげておきます。
Sass

@for$i from 1 through 20 {
  @if $i < 10 {
    .style#{$i} {
      width:#{$i}px;
      background-color:blue;
    }
  }@else {
    .style#{$i} {
      width:#{$i}px;
      background-color:red;
    }
  }
} 

CSS

.style1 { width: 1px; background-color: blue; }
.style2 { width: 2px; background-color: blue; }
.style3 { width: 3px; background-color: blue; }
.style4 { width: 4px; background-color: blue; }
.style5 { width: 5px; background-color: blue; }
.style6 { width: 6px; background-color: blue; }
.style7 { width: 7px; background-color: blue; }
.style8 { width: 8px; background-color: blue; }
.style9 { width: 9px; background-color: blue; }
.style10 { width: 10px; background-color: red; }
.style11 { width: 11px; background-color: red; }
.style12 { width: 12px; background-color: red; }
.style13 { width: 13px; background-color: red; }
.style14 { width: 14px; background-color: red; }
.style15 { width: 15px; background-color: red; }
.style16 { width: 16px; background-color: red; }
.style17 { width: 17px; background-color: red; }
.style18 { width: 18px; background-color: red; }
.style19 { width: 19px; background-color: red; }
.style20 { width: 20px; background-color: red; }

処理としては$iが10以下の時は青、それ以外は赤という条件分岐と、 それを繰り返し行う繰り返し処理を組み合わせています。それにより、1から20までのStyleを繰り返し、そのうちの10以下は青、それ以外は赤といった複雑な処理も可能です。

CSSでかくと20行するStyleもSassの繰り返し文・条件分岐文を使うと少ない行数ですみます

まとめ

このようにうまく繰り返し文や条件分岐文を使うことで今までたくさん書いていたCSSのコーディングを少なくて済ませることができるのでおすすめです。使って見てはいかがでしょうか

CSSのお仕事に関するご相談

Bageleeの運営会社、palanではCSSに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP