読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Sassで演算を含めた変数を使ってみる

Sassのお話。

今まで入れ子しか使ったことなかったんですが、ようやく変数を使い始めました!

 

 

変数の使い方

scssでこう書くと、

f:id:chuck0523:20150812074259p:plain

 

こんなcssに展開される。

f:id:chuck0523:20150812074313p:plain

 

まあ単純ですね! testという名前の変数に「200px」を入れておいて、testBoxクラスのwidthに利用しています。

 

演算を含める

scssでの変数定義がこちら。

f:id:chuck0523:20150812074646p:plain

$half_widthとして、$widthを2で割った値を入れています。

これ便利ですね!JavaScriptで操作するなら「500px」というのは文字列なので、「px」が邪魔になっちゃいそうですが、CSSだけで半分にできるとは…!

 

出来心でcalcで同じことにチャレンジ。

f:id:chuck0523:20150812075036p:plain

 

これをCSSに展開すると、

f:id:chuck0523:20150812075051p:plain

ダメでしたw

 

w3g.jp

 

マイナスも試す

f:id:chuck0523:20150812075435p:plain

$widthの前にマイナスを付けてみます。

 

CSSに展開すると、

f:id:chuck0523:20150812075459p:plain

ちゃんとマイナスの値になっています!

 

 

 まとめ

変数、なかなか便利ですね!シンプルなページでは便利さを実感できませんが、複雑なページになるほどありがたさがわかります。

いま作っているものが、3Dの物体なので非常に重宝しています。ある面のwidthを基準に他の面の位置(translate)を決めているので、変数を使うことでだいぶ楽になりました!

 

今後も積極的に活用していこうと思いますヽ(=´▽`=)ノ

では!

 

参考にしたサイト様

css-happylife.com