LogoMark.png

Sass(SCSS) の変更点


#author("2019-10-06T13:54:57+09:00;2019-10-06T13:51:53+09:00","default:inoue.ko","inoue.ko")
*Sass(SCSS)
~

Sass(Syntactically Awesome Stylesheets)は、2006年ハンプトン・キャトリンが設計、ネイサン・バイゼンバウムが開発した''スタイルシート記法''のことで、ファイルの拡張子は ''.sass''。また SCSS(Sassy CSS)は、CSS3の記述と高い互換性があるスタイルシート記法で、拡張子は ''.scss''。いずれも''従来のCSSにプログラミング的要素を加えた記法''で、CSSコーディングの作業効率を上げる技術です。SassとSCSSの2つの記法があり、どちらを選ぶかについては、[[動向の見極めが必要です。>https://trends.google.co.jp/trends/explore?date=all&q=sass,scss]]
 style.scss > コンパイル(要Ruby等) > style.css 
という作業の流れでCSSを生成します。
~
&color(red){この記事は、Sass(SCSS)導入の概要のみを記述しています。''CSSそのものを十分理解している必要があり、あくまで「作業の効率化」が重要課題であるという現場において重要な技術・・といえます。''};
~

**導入の前提
Sass(SCSS)はプログラミングの要素を持った言語で、書いたものは、そのままではブラウザが理解しません。最終的にCSSファイルを得るために、Ruby、Koalaなどをインストールをして、開発環境を構築する必要があります。

参考:でも、以下のような方法で試すことも可能です
http://websae.net/sass-meister-20140708/
~

***Ruby
Sassを使えるようにするために、[[Ruby>Google:Ruby]]が必要です。新しいMacOSの場合は標準で搭載されているので、[[ターミナル>Google:Mac ターミナル]]から以下の入力で確認してみてください。
 $ ruby -v
~

***Koala
ターミナルからコンパイルすることもできますが、KoalaというGUI開発環境をインストールすると作業が楽になります。
-http://koala-app.com/
//-[[Koala 開発環境の使い方>]]
~


***補足
-ターミナルの利用ができれば簡単です。
-rubyの存在確認
 $ ruby -v
-念のため RubyGemsをアップデート
 $ sudo gem update --system
-Sassをインストール
 $ sudo gem install sass
-Sass の存在を確認
 $ sass -v
-style.scss があるとして、以下でCSSが生成できます。
 $  sass --style expanded style.scss:style.css

-Atomのパッケージ追加でも可能
ちなみにAtomにも sass-autocompile というパッケージを導入すると同様のことが可能になりますが(koalaが不要)、sass-autocompileを利用するには、事前にnode.jsとnode-sassをPC自体にインストールする必要があります。ということで、いずれにしても、開発環境を準備しなければならない・・という点で、それなりの手間が必要です。
~
~

**記述の利点
***セレクタのネストができる
-SCSSの記述
 .box{
      padding: 20px;
     h1{
         font-size: 16px;
     }
 }
-CSSの記述
 .box {
     padding: 20px;
 }
 .box h1 {
     font-size: 16px;
 }
~
***変数が使える
-SCSSの記述
 $blue: #55AAFF;
 .box{
     color: $blue;
 }
-CSSの記述
 .box {
     color: #55AAFF;
 }
~

***その他
-演算子が使える
-制御構文( if for while など)がある
-関数が使える
-ミックスイン(Mixin, @include)が使える

など、要するにこれは、CSSを能率的に生成するためのプログラミング言語です。本格的な利用にはそれなりの学習コストがかかるとお考えください。
ここでは、Sass(SCSS)の概要のみしか書いていませんので、具体的な事例等については、以下のようなキーワードで検索してください。
-[[Google: Sass 入門]]
-[[Google: Sass SCSS サンプルコード]]
-[[Google: Sass koala]]
~
~