CSSの進化系?Sass(SCSS)がすごいので色々調べてみた!

※まずは本当に便利か?というのを判断したうえで

導入するかどうか決めてもらうため、インストール方法等は

一番下の方に書いてあります!

インストール・構築したのに結局使わない。。ってあるあるですからねw

Sass(SCSS)の紹介!

Sass(SCSS)ってなんぞやっ?

CSSの初心者の私のためのメモ書きですっ!

いやぁ。。知らなかったです。

CSSっていつの間にか進化していたんですね。

cssってどうしても複雑になりがちで

管理しきれなくなるので苦手なのですよね。。

どんなに綺麗に書こうと思っても無理じゃないですかあれ!

そんな中ちょっとプログラムチックにかける

Sass(SCSS)というものがあるのを今更知りました!

(SCSS)というのが何かというと

元々はSassという結構特殊な書き方があったのですが

これをかなりCSSに近い形で書けるようになったものが出てきて

それがSCSSというらしいです。

具体的にどんなものっ?

では具体的に何が違うのかっ?

SassはCSSコーダーよりもプログラマーが馴染みやすいような感じで

色々と簡略化して書くことが出来るようになっています。

ただ、ざっと調べたところ

今現在Sassの記法は主流ではないようです。

やはりちょっと独特な部分があるのでしょうね。。

めちゃくちゃシンプルな部分で書くと

Sassはこうなります。

{}や;(セミコロン)が省略されています。

Scssや通常のcssではこうですね。

可読性がどちらが高いか?また記述ミスが少ないか?で考えると

完全に後者ですよね。

これがもっと複雑になってくれば。。一目瞭然です。

そのため、現在はSass 3.0のSCSS記法が主流なようですので

これ以降はSCSSを前提に書き進めていきます。

(便宜上表記はこれ以降Sassで統一いたしますが、記法はSCSS前提といたします。)

私はそもそもCSS自体も素人であまり得意ではないので

本当に簡単な部分に関して

Sassってすごいっ!と思ったことを書いておきたいと思います。

変数

まずは「変数」です

おお、プログラムっぽいっ

なんとSassでは変数が扱えます。

ある程度ちゃんとしたデザインになってくると

配色などはテーマカラーに沿ってほとんど同じ色を使いますよね?

バックグラウンドが共通になっているとします。

基本的に共通ならもっと良い方法が無いのかっ!

こんな風に普通に変数として使えるようです。

この場合、テーマカラーを変えたいと思ったときは

$bgcolorの値を変えるだけで全部変わる!便利!

ネスト

後はネストですよね。

ここがプログラマな私にはいつも難しいです。。

上の例で言うと

#main .wrap1の部分ですね。

これはmainIDのwrap1classに対してのスタイル指定になります

HTMLでいうと

こんな感じですかね?

※間違っていたらごめんなさい。

この辺の概念が私には難しいんですよね。。笑

これを視覚的にわかりやすく、そして書きやすくしたのが

おお、これなら視覚的にだいぶわかりやすいですね!

ブロックとして管理できるので書きやすそうです。

ミックスイン(Mixin)

そして個人的にめちゃくちゃ使いやすそうだなと思ったのは

ミックスイン(Mixin)です!

上記の変数の強力版みたいなものですね。

結構CSSって同じことを書くことが多いと思います。

それを劇的に書きやすくする機能です!

頭に「@mixin」とつけることで

プログラム的に言うとfunctionや関数的な感じに出来ます。

簡単にするために上記の例で考えると

めちゃくちゃシンプルになりましたね。。

Mixinには変数を渡して使うことも出来るようです!

中で$bgcolorの変数を使ってみましたが、この使い方も出来るのかな。。?

まだ検証していないので使えなかったら後で修正します!

四則演算

それから四則演算も出来るらしいです!

全体のWrapのワイドを800と決めて

メインとサイドバー二つに分けたい

サイドバーは150にしようかな。。

えっとそうするとワイドは。。650か!と

決めていくかと思うのですが

そのメインのwrapの表記を

こうやって書けるわけですね!これは結構便利かも!

後はプログラムっぽく

if文やfor文、while文なども使えるようです!

この辺は必要になったらまたお勉強します。。

Sass(SCSS)をWindows 10に導入!

まずはRubyのインストール!

さて、実際に使うにはどうするか?

書いていこうと思います。

どうやらSassを扱うにはRubyが必要なようです。

今回はWindows 10の開発機器を使っていますので

Windows 10にまずはRubyをインストールしたいと思います。

ちなみに私はRubyもさっぱりわかりません。。笑

色々勉強しなきゃなぁ。。

RubyInstaller for Windows
The easy way to install Ruby on Windows This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important...

ここから

7-ZIP ARCHIVESの

Ruby 2.3.3(x64)をダウンロードします。

そしたら適当に解凍してbinフォルダへのパスを通しておきます。

この辺が面倒であれば7-ARCHIVESではなく

上のインストーラを使ってもいいかもしれません!

Gemのアップデート!

あとはsassをインストールするだけみたいです。

SassをCSSに実際にコンパイル!

さて、そしたら上に書いたやつを実際にコンパイルしてみます!

これも簡単です。

コマンドプロンプト(Windows 10ではPowerShell)を開いて

sassコンパイルエラー

おっと、コンパイルエラーが。。

文字コードをUTF-8にしているのに

ファイルの文字コードがShift-jisでした。

ここも丁寧に教えてくれるのは助かりますね!

これをコンパイルすると。。

こうなりました!

ちゃんと$bgcolorも展開してくれましたね。

これは今後CSSを使っていくうえでめちゃくちゃ便利になりそうですね!

Top