この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Ubuntuは、Canonical Group, Ltd.の登録商標です。
CSS のメタ言語である「Sass」をインストール・変換する
Ubuntu 環境に CSS のメタ言語である Sass をインストールして、sass を css に変換するコマンドを実行してみます。Sass は CSS を効率的およびメンテナンス性を上げる仕様のため、使うための下準備を行います。
※ちなみ今回の動作検証は、AWS にある Ubuntu18.04 で動作検証を行っています。
Sass をインストールするコマンド
〇apt コマンドを使った Sass をインストールするコマンド
apt install ruby-sass
apt コマンドで sass パッケージが準備されているので、上記のコマンドで簡単にインストールできます。ruby-sass というパッケージですが、ruby を導入していない環境でも動きました。
〇コマンドの実行履歴
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
root@example:/# apt install ruby-sass Preparing to unpack .../12-libruby2.5_2.5.1-1ubuntu1.6_amd64.deb ... Unpacking libruby2.5:amd64 (2.5.1-1ubuntu1.6) ... Selecting previously unselected package ruby-ffi. Preparing to unpack .../13-ruby-ffi_1.9.10debian-1build4_amd64.deb ... Unpacking ruby-ffi (1.9.10debian-1build4) ... Selecting previously unselected package ruby-rb-inotify. Preparing to unpack .../14-ruby-rb-inotify_0.9.7-1_all.deb ... Unpacking ruby-rb-inotify (0.9.7-1) ... Selecting previously unselected package ruby-listen. Preparing to unpack .../15-ruby-listen_3.1.5-1_all.deb ... Unpacking ruby-listen (3.1.5-1) ... Selecting previously unselected package ruby-sass. Preparing to unpack .../16-ruby-sass_3.4.23-1_all.deb ... Unpacking ruby-sass (3.4.23-1) ... Setting up libjs-jquery (3.2.1-1) ... Setting up fonts-lato (2.0-2) ... Setting up ruby-did-you-mean (1.2.0-2) ... Processing triggers for libc-bin (2.27-3ubuntu1) ... Setting up ruby-net-telnet (0.1.1-2) ... Setting up rubygems-integration (1.11) ... Processing triggers for man-db (2.8.3-2ubuntu0.1) ... Setting up javascript-common (11) ... apache2_invoke: Enable configuration javascript-common Setting up ruby-minitest (5.10.3-1) ... Setting up ruby-power-assert (0.3.0-1) ... Setting up ruby2.5 (2.5.1-1ubuntu1.6) ... Setting up ruby (1:2.5.1) ... Setting up ruby-sass (3.4.23-1) ... Setting up ruby-test-unit (3.2.5-1) ... Setting up rake (12.3.1-1) ... Setting up libruby2.5:amd64 (2.5.1-1ubuntu1.6) ... Setting up ruby-ffi (1.9.10debian-1build4) ... Setting up ruby-rb-inotify (0.9.7-1) ... Setting up ruby-listen (3.1.5-1) ... Processing triggers for libc-bin (2.27-3ubuntu1) ... root@example:/# |
Sass を CSS に変換するコマンド
〇Sass ファイルを CSS に変換するコマンド
sass (変換前のSassファイル名):(変換後のcssファイル名)
〇コマンドの実行履歴
|
1 2 3 4 5 6 7 |
root@example:/var/www/html/# sass _test.scss:test.css root@example:/var/www/html/# ls -la total 136 drwxr-xr-x 3 root root 4096 Feb 11 23:31 .sass-cache -rw-rw-r-- 1 root root 7670 Jan 12 2019 _test.scs -rw-r--r-- 1 root root 7579 Feb 11 23:31 test.css -rw-r--r-- 1 root root 4160 Feb 11 23:31 test.css.map |
さいごに
Sass のようなメタ言語は、
・作業効率の向上
・ソースのメンテナンスがし易くなる
などメリットが非常に多いです。
コンパイルしないと最終ファイルが出力されない欠点はあるものの、デメリットを補ってあまりある恩恵があるので積極的に使っていきましょう。
Linuxの知識については下記の本も参考になるので、スキルアップにお役立てください。
