libsassってなんだろ

 

libsassを導入してみる。

概要

libsassの前に
まず、sassって?というとこから。

CSSの良いところは簡単かつ明確な点ですが、簡単ゆえにあまり複雑なことができません。プログラミング言語なら、変数とか演算を使って柔軟な命令ができますけど、CSSにはそれができない。そこで、CSSをもうちょっと便利にしようぜ!という発想からSassが生まれたようです。

https://liginc.co.jp/web/html-css/css/56599

より早くCSSが書ける便利なCSSということらしい。
sassとscssという似たようなものがあるがscssの方が後発で現在の主流らしい。

しかし、これはrubyでできているので、scssからcssへのコンパイル時の速さを求めるといまいち。

これを解決するのがC/C++で書かれたlibsassというライブラリ

libsassは速くて便利だが、libsass単体では使えない。wrapperが必要。

Node-SassはlibsassのNode.js用wrapper。
これは、Nodeを使った環境からCSSコンパイルしてくれる。
基本的にはNode-Sassが使われる。

このNode-Sassを実際に使うにはgulp(Node.jsを使ったタスク自動化ツール)を経由して使うのが一般的。

gulp経由のNode-Sassのことをgulp-sassという。

まとめると
SCSSというCSSを便利に書けるツールがあるがこれをより速く便利にするライブラリがあり、それをLibSassという。

LibSassはライブラリなので自分たちがを恩恵を受けるためにはwrapperと呼ばれるものが必要で、色々あるがNode-sassが一般的。
このNode-sassはgulpで使われ、その呼び名はgulp-sassとなる。



ちなみに、
gulpはタスクを自動化することができるツール。自分でコードを書いてカスタマイズが可能。

実際の導入は以下のサイトにしたがって行った。
http://whiskers.nukos.kitchen/2014/12/02/gulp-sass.html
http://whiskers.nukos.kitchen/2014/12/03/gulp-watch.html
http://qiita.com/KAMEch/items/b34159c70b9095485b77

導入

ディレクトリ作成

scssとcssのフォルダを作り階層を作る

ローカルインストー

プロジェクト内にpackage.jsonを作成。一番上の階層。

$ npm init 

ローカル用にgulpをインストール。

$ npm install --save-dev gulp

package.jsonと同じ階層にgulpfile.jsを作成。ここにタスクを記述する。

$ touch gulpfile.js

プラグインのインストー

$ npm install --save-dev gulp-sass

gulpfile.jsの記述

http://qiita.com/KAMEch/items/b34159c70b9095485b77#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

実行

$ gulp sass

まとめ


単にCSSで書くよりSCSSの書き方になれたら開発スピードも大幅に上がると感じた。
lib-sassやらnode-sassやら色々似たようなものがたくさんあって複雑に感じた部分もあったが理解できた。
Gulpに関してはもうちょっと知って色々と自動化できるよう生かしていきたい。

%23%206/3%20libsass%0A%0A@%28%u5B66%u7FD2%u8A18%u9332%29%0A%0Alibsass%u3092%u5C0E%u5165%u3057%u3066%u307F%u308B%u3002%0A%23%23%23%u6982%u8981%0Alibsass%u306E%u524D%u306B%0A%u307E%u305A%u3001sass%u3063%u3066%uFF1F%u3068%u3044%u3046%u3068%u3053%u304B%u3089%u3002%0A%0A%3ECSS%u306E%u826F%u3044%u3068%u3053%u308D%u306F%u7C21%u5358%u304B%u3064%u660E%u78BA%u306A%u70B9%u3067%u3059%u304C%u3001%u7C21%u5358%u3086%u3048%u306B%u3042%u307E%u308A%u8907%u96D1%u306A%u3053%u3068%u304C%u3067%u304D%u307E%u305B%u3093%u3002%u30D7%u30ED%u30B0%u30E9%u30DF%u30F3%u30B0%u8A00%u8A9E%u306A%u3089%u3001%u5909%u6570%u3068%u304B%u6F14%u7B97%u3092%u4F7F%u3063%u3066%u67D4%u8EDF%u306A%u547D%u4EE4%u304C%u3067%u304D%u307E%u3059%u3051%u3069%u3001CSS%u306B%u306F%u305D%u308C%u304C%u3067%u304D%u306A%u3044%u3002%u305D%u3053%u3067%u3001CSS%u3092%u3082%u3046%u3061%u3087%u3063%u3068%u4FBF%u5229%u306B%u3057%u3088%u3046%u305C%uFF01%u3068%u3044%u3046%u767A%u60F3%u304B%u3089Sass%u304C%u751F%u307E%u308C%u305F%u3088%u3046%u3067%u3059%u3002%0A%0Ahttps%3A//liginc.co.jp/web/html-css/css/56599%0A%0A%u3088%u308A%u65E9%u304FCSS%u304C%u66F8%u3051%u308B%u4FBF%u5229%u306ACSS%u3068%u3044%u3046%u3053%u3068%u3089%u3057%u3044%u3002%0Asass%u3068scss%u3068%u3044%u3046%u4F3C%u305F%u3088%u3046%u306A%u3082%u306E%u304C%u3042%u308B%u304Cscss%u306E%u65B9%u304C%u5F8C%u767A%u3067%u73FE%u5728%u306E%u4E3B%u6D41%u3089%u3057%u3044%u3002%0A%0A%u3057%u304B%u3057%u3001%u3053%u308C%u306Fruby%u3067%u3067%u304D%u3066%u3044%u308B%u306E%u3067%u3001scss%u304B%u3089css%u3078%u306E%u30B3%u30F3%u30D1%u30A4%u30EB%u6642%u306E%u901F%u3055%u3092%u6C42%u3081%u308B%u3068%u3044%u307E%u3044%u3061%u3002%0A%0A%u3053%u308C%u3092%u89E3%u6C7A%u3059%u308B%u306E%u304CC/C++%u3067%u66F8%u304B%u308C%u305F**libsass%u3068%u3044%u3046%u30E9%u30A4%u30D6%u30E9%u30EA**%u3002%0A%0Alibsass%u306F%u901F%u304F%u3066%u4FBF%u5229%u3060%u304C%u3001libsass%u5358%u4F53%u3067%u306F%u4F7F%u3048%u306A%u3044%u3002wrapper%u304C%u5FC5%u8981%u3002%0A%0ANode-Sass%u306Flibsass%u306ENode.js%u7528wrapper%u3002%0A%u3053%u308C%u306F%u3001Node%u3092%u4F7F%u3063%u305F%u74B0%u5883%u304B%u3089CSS%u306B%u30B3%u30F3%u30D1%u30A4%u30EB%u3057%u3066%u304F%u308C%u308B%u3002%0A%u57FA%u672C%u7684%u306B%u306FNode-Sass%u304C%u4F7F%u308F%u308C%u308B%u3002%0A%0A%u3053%u306ENode-Sass%u3092%u5B9F%u969B%u306B%u4F7F%u3046%u306B%u306Fgulp%28Node.js%u3092%u4F7F%u3063%u305F%u30BF%u30B9%u30AF%u81EA%u52D5%u5316%u30C4%u30FC%u30EB%29%u3092%u7D4C%u7531%u3057%u3066%u4F7F%u3046%u306E%u304C%u4E00%u822C%u7684%u3002%0A%0Agulp%u7D4C%u7531%u306ENode-Sass%u306E%u3053%u3068%u3092gulp-sass%u3068%u3044%u3046%u3002%0A%0A**%u307E%u3068%u3081%u308B%u3068**%0ASCSS%u3068%u3044%u3046CSS%u3092%u4FBF%u5229%u306B%u66F8%u3051%u308B%u30C4%u30FC%u30EB%u304C%u3042%u308B%u304C%u3053%u308C%u3092%u3088%u308A%u901F%u304F%u4FBF%u5229%u306B%u3059%u308B%u30E9%u30A4%u30D6%u30E9%u30EA%u304C%u3042%u308A%u3001%u305D%u308C%u3092LibSass%u3068%u3044%u3046%u3002%0A%0ALibSass%u306F%u30E9%u30A4%u30D6%u30E9%u30EA%u306A%u306E%u3067%u81EA%u5206%u305F%u3061%u304C%u3092%u6069%u6075%u3092%u53D7%u3051%u308B%u305F%u3081%u306B%u306Fwrapper%u3068%u547C%u3070%u308C%u308B%u3082%u306E%u304C%u5FC5%u8981%u3067%u3001%u8272%u3005%u3042%u308B%u304CNode-sass%u304C%u4E00%u822C%u7684%u3002%0A%u3053%u306ENode-sass%u306Fgulp%u3067%u4F7F%u308F%u308C%u3001%u305D%u306E%u547C%u3073%u540D%u306Fgulp-sass%u3068%u306A%u308B%u3002%0A%3Cbr%3E%3Cbr%3E%3Cbr%3E%0A%u3061%u306A%u307F%u306B%u3001%0Agulp%u306F%u30BF%u30B9%u30AF%u3092%u81EA%u52D5%u5316%u3059%u308B%u3053%u3068%u304C%u3067%u304D%u308B%u30C4%u30FC%u30EB%u3002%u81EA%u5206%u3067%u30B3%u30FC%u30C9%u3092%u66F8%u3044%u3066%u30AB%u30B9%u30BF%u30DE%u30A4%u30BA%u304C%u53EF%u80FD%u3002%0A%0A%u5B9F%u969B%u306E%u5C0E%u5165%u306F%u4EE5%u4E0B%u306E%u30B5%u30A4%u30C8%u306B%u3057%u305F%u304C%u3063%u3066%u884C%u3063%u305F%u3002%0Ahttp%3A//whiskers.nukos.kitchen/2014/12/02/gulp-sass.html%0Ahttp%3A//whiskers.nukos.kitchen/2014/12/03/gulp-watch.html%0Ahttp%3A//qiita.com/KAMEch/items/b34159c70b9095485b77%0A%0A%23%23%23%u5C0E%u5165%0A%0A%23%23%23%23%20%u30C7%u30A3%u30EC%u30AF%u30C8%u30EA%u4F5C%u6210%0Ascss%u3068css%u306E%u30D5%u30A9%u30EB%u30C0%u3092%u4F5C%u308A%u968E%u5C64%u3092%u4F5C%u308B%0A%0A%23%23%23%23%u30ED%u30FC%u30AB%u30EB%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%0A%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u5185%u306Bpackage.json%u3092%u4F5C%u6210%u3002%u4E00%u756A%u4E0A%u306E%u968E%u5C64%u3002%0A%60%60%60%0A%24%20npm%20init%20%0A%60%60%60%0A%u30ED%u30FC%u30AB%u30EB%u7528%u306Bgulp%u3092%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u3002%0A%60%60%60%0A%24%20npm%20install%20--save-dev%20gulp%0A%60%60%60%0Apackage.json%u3068%u540C%u3058%u968E%u5C64%u306Bgulpfile.js%u3092%u4F5C%u6210%u3002%u3053%u3053%u306B%u30BF%u30B9%u30AF%u3092%u8A18%u8FF0%u3059%u308B%u3002%0A%60%60%60%0A%24%20touch%20gulpfile.js%0A%60%60%60%0A%0A%23%23%23%23%u30D7%u30E9%u30B0%u30A4%u30F3%u306E%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%0A%0A%60%60%60%0A%24%20npm%20install%20--save-dev%20gulp-sass%0A%60%60%60%0A%0A%23%23%23%23gulpfile.js%u306E%u8A18%u8FF0%0Ahttp%3A//qiita.com/KAMEch/items/b34159c70b9095485b77%23%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25B0%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%2592%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%25B9%25E3%2583%2588%25E3%2583%25BC%25E3%2583%25AB%0A%0A%23%23%23%23%u5B9F%u884C%0A%60%60%60%0A%24%20gulp%20sass%0A%60%60%60%0A%0A%0A%23%23%23%u307E%u3068%u3081%0A%0A---%0A%u5358%u306BCSS%u3067%u66F8%u304F%u3088%u308ASCSS%u306E%u66F8%u304D%u65B9%u306B%u306A%u308C%u305F%u3089%u958B%u767A%u30B9%u30D4%u30FC%u30C9%u3082%u5927%u5E45%u306B%u4E0A%u304C%u308B%u3068%u611F%u3058%u305F%u3002%0Alib-sass%u3084%u3089node-sass%u3084%u3089%u8272%u3005%u4F3C%u305F%u3088%u3046%u306A%u3082%u306E%u304C%u305F%u304F%u3055%u3093%u3042%u3063%u3066%u8907%u96D1%u306B%u611F%u3058%u305F%u90E8%u5206%u3082%u3042%u3063%u305F%u304C%u7406%u89E3%u3067%u304D%u305F%u3002%0AGulp%u306B%u95A2%u3057%u3066%u306F%u3082%u3046%u3061%u3087%u3063%u3068%u77E5%u3063%u3066%u8272%u3005%u3068%u81EA%u52D5%u5316%u3067%u304D%u308B%u3088%u3046%u751F%u304B%u3057%u3066%u3044%u304D%u305F%u3044%u3002