htmlcss 変数、演算、関数を使いこなそう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

変数、演算、関数を使いこなそう

HTML×CSS|2019年03月12日

2019年03月12日
  • このエントリーをはてなブックマークに追加

前回で、Sassの基本機能が理解できたと思います。
今回は、Sassのプログラミング的な書き方をご紹介していきます。

JavaScriptやPHPを学ばれた方は、すぐ慣れるかと思います。
Sassでは、変数や配列、演算、if文やfor文といった記述も可能なのです。
これらは、プログラミングでは当たり前に使われる記述です。

反対に、プログラミングに触れていない方は、少々難しいかもしれません。
その時は、まず使えそうな記述だけに絞って、練習してみてください。

無理して、全て使いこなそうとする必要はありません。
背伸びしすぎることなく、少しずつ慣れていくことが大切です。

変数

プログラミングを学んだ方なら、よくご存知だと思います。
どんな言語でも、必ず存在しています。

変数とは「データを入れておく箱」です。
変数にデータを入れると、ほかの箇所で使い回すことができます。

例えば、いくつかの箇所で文字の色を赤に指定するとしましょう。
CSSで直接書けば、赤にしたい全ての箇所に赤の指定をしなければなりません。
それは、管理を考えると非常に面倒なことなんですね。

例えば、赤の色味を少し変えたいとき。
該当の赤を指定してある箇所を、すべて書き換えなければなりません。

しかし、変数にしておけば、変数の中身を変えるだけです。
一箇所変えるだけで、全ての赤の色味が変わります。

実際に試してみましょう。

common.scss

//変数$redColor1に赤色を入れる。
$redColor1:#e10008;

//該当の箇所は変数を適応しておく。
.sectionType1{
	.fontColor{
		color:$redColor1;
	}
}
.sectionType2{
	.titleColor{
		color:$redColor1;
	}
}
//もし赤色を変えたい時は、
//$redColor1を変えるだけで全て変化する。

まず、変数($redColor1)に赤を入れ、該当の箇所に反映させます。
もし赤の色味を変えたければ、$redColor1の赤を書き換えるだけでOKです。
変数を使った.scssをコンパイルすると下記のようになります。

common.min.css

.sectionType1 .fontColor{color:#e10008}.sectionType2 .titleColor{color:#e10008}

コンパイルすると、変数に入れた赤が反映されているのが分かります。
変数を使うことにより、一気に管理が楽になるのです。

演算

CSSで数値の計算をするにはcalcを使う必要があります。
しかしSassを使うと、そのまま演算を使うことができます。

例えば、コンテンツの横幅から100引いた数を取得したい時。
下記のようにすれば、横幅から100引いた数になります。

common.scss

//変数で元のコンテンツの横幅を指定。
$baseWidth:1024px;

.mainCont{
	//メインコンテンツの横幅を指定。
	width:$baseWidth;
	.innerCont{
		//メインコンテンツの横幅から100px引いた数を指定。
		width:$baseWidth - 100px;
	}
}

上記のように設定すれば、変化にも柔軟に対応できますね。

メインコンテンツの幅を変化させても常に100px引いた数を維持できます。
実際にコンパイルしてみると、どうなるでしょうか。

common.min.css

.mainCont{width:1024px}.mainCont .innerCont{width:924px}

このように、innerContの中は100px引かれています。
他にも足し算 ( + ) や割り算( / )、掛け算( * )もあわせて使うことができます。

ただ、こうした演算ならCSSで「calc」を使った方が良いでしょう。
calcなら「94%-100px」のように、%とpxを合わせて計算できます。
しかし、Sassの演算ではこれができません。

ではSassにおける演算の活用が効果を発揮するのは、いつか。
それは、次にご説明する関数等と組み合わせた時です。

関数

関数とは、前回紹介したmixinに似ています。
あらかじめ処理を作っておき、その処理を使いまわします。

mixinでは事前にデザインをCSSで書き使い回すことができました。
デザインごと指定し、使い回すことができたのです。

しかし、関数はより小さい範囲での使い回しができます。
厳密に言えば、関数で扱えるのは「値」だけです。

例えば、与えられた数字を半分にする関数を作ったとします。
あとで何か数字を半分にしたい時に、数字を送ったとしましょう。
すると、元の半分の値を取得できるのです。

言葉で説明してもわかりにくいと思いますので、実際に使ってみましょう。

common.scss

//$dに数字を送ると、2倍になって返されます。
@function layout1($d){
	//roundをつけると小数点以下が四捨五入されます。
	//つけなくても機能します。
	@return round($d * 2);
}
.glaph{
	//横幅が40pxとなってコンパイルされます。
	width:layout1(20)+px;
}

このように、基本的に値だけ返すのがSassの関数です。
returnに続いて、計算式を書けば、それが値となって返されます。
今回は、.glaphの横幅として返されました。

なお、コードに出てくる「round」はネイティブ関数と呼ばれています。
小数点以下を四捨五入するのが、ネイティブ関数の効果です。
後述しますが、他にもネイティブ関数はたくさんあります。

common.min.css

.glaph{width:40px}

先ほどのSassをコンパイルすると、こうなります。
値が指定した数の倍になっているのが分かりますね。

また、ネイティブ関数ですが、全てはご説明しません。
全ての関数を覚える必要はなく、何ができるかだけ把握してください。

そして、実際に「使えるかも」と思った場面で活用すればいいのです。
使えるかも、と思ったタイミングで改めて、書き方を確認すれば良いですからね。

他のネイティブ関数に関しては、下記で確認してみてください。

現場で役立つ実践Sass(5)関数も使おう
https://blogs.adobe.com/japan/web-practical-sass-05-functions/

このように、Sassはプログラミング的な書き方も可能とします。
ただ、こうして机上で学ぶだけだと、使い所は把握できません。

実際に自分でWEBサイトを作ってみましょう。
その中で変数や関数などを使いながら、効率的な書き方を模索します。

どんな書き方をすれば、より効率的か。
どのような設計をすれば、便利に管理できるか。

全体の設計を考えながら書いていくことが重要です。
ぜひ、最高の設計を考えてみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら