Sass入門ガイド

四則演算

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
値の計算に、基本的な四則演算を使うことができます。ここでは、四則演算を使って値を算出する方法を紹介します。
講師:
06:01

字幕

値の計算に基本的な四則演算を使うことができます。画面では Sass ファイルと CSS ファイルを並べて開いているところです。左側の Sass ファイルを編集するとIDE の機能を使って自動的に保存、コンパイルが行われ画面右側の CSS ファイルに出力されます。それでは四則演算について紹介していきましょう。値の計算で四則演算を使えますのでここでは先ず、足し算を試してみましょう。予め Sass ファイルには変数やプロパティ値の宣言が行われています。先ず、足し算を試してみましょう。width のこの 980 ピクセルという値の指定にプラスして 20 ピクセル足すこの様な書き方をするとCSS にコンパイルをされたら値が計算され980+20 で1000 ピクセルになっています。この様に CSS の値の指定の部分で四則演算を使って計算ができるのです。同様に引き算も試してみましょう。値の後ろにマイナスそして引きたい値を入力すると出力される CSS では値の計算結果が入っています。例えば、ここでは 300 ピクセルと150 ピクセル両方とも単位を指定していますが2 つ目の値では単位を省略することも可能です。 続いて掛け算も試してみましょう。掛け算を行う場合は記号のアスタリスクを使います。同様に掛け算を行う値を入力すると計算結果が CSS に出力されています。割り算の場合は記号のスラッシュを入力します。但し割り算については注意が必要です。これまでの様に割り算をしたい値を入力しても出力される CSS には計算結果ではなくそのままの文字列が表示されてしまいました。これは CSS の値に使える文字としてスラッシュが元々含まれているからです。そのためS ass ファイルで割り算を明示的に指定したい場合はこのスラッシュで挟んだ値たちを括弧で括ります。そうすることで、この括弧に挟まれた間のスラッシュは割り算のためのスラッシュであるということを明示することになりますのでCSSファイルではその計算結果が出力される様になります。尚、ここまで計算を行うための演算子の前後には必ず半角スペースを開けています。この半角スペースは本来無くても正常に動作は、します。しかし例えばマイナスの値等で前後のスペースを無くしてしまうとそもそも CSS で指定できるマイナスの値という風に扱われてしまうため出力結果が意図通りにならないといったことが起こり得ます。 そのため演算子の前後には基本的には半角スペースを開ける等して分かり易く明示しておくと良いでしょう。次に四則演算の順番について紹介します。通常、四則演算のルールでは掛け算や割り算の方が足し算や引き算よりも先に行われるといったルールがありますよね。そのため例えばこの様な式を書いた場合足し算よりも先に掛け算が行われるため先ず 2 x 1.5つまり 3 ですね。そして 1em + 3そして、その結果が 4em といった様に掛け算、割り算が足し算、引き算よりも先に実行されます。この順番を変えたい場合は先に計算したい式を括弧で括ります。ここでは、この様に括弧で括ることで先に 1em + 2つまり 3em の計算が行われ3em x 1.5そして、その結果が 4.5 という様に掛け算や割り算の計算よりも足し算、引き算の計算を先に行うことができます。括弧は複数使うこともできますので組み合わせて様々な式の順番をコントロールすることができます。最後に変数を使った四則演算を紹介しましょう。四則演算では変数を計算に使うこともできます。ここでは冒頭でborder width という変数を宣言しており値に 10 ピクセルが入っています。 border width プロパティではその変数を参照して値を計算、出力しています。この変数に対して四則演算を行ってみましょう。これまでと同様に変数に対して演算子を使って計算を行います。出力結果を見ると変数の内容の値に対して四則演算が行われその結果が出力されていることが分かります。このレッスンでは四則演算を使って値を算出する方法を学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。