Ubuntuは、Canonical Group, Ltd.の登録商標です。
CSS のメタ言語である「Sass」をインストール・変換する
Ubuntu 環境に CSS のメタ言語である Sass をインストールして、sass を css に変換するコマンドを実行してみます。Sass は CSS を効率的およびメンテナンス性を上げる仕様のため、使うための下準備を行います。
※ちなみ今回の動作検証は、AWS にある Ubuntu18.04 で動作検証を行っています。
Advertisement
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 |
Advertisement
さいごに
Sass のようなメタ言語は、
・作業効率の向上
・ソースのメンテナンスがし易くなる
などメリットが非常に多いです。
コンパイルしないと最終ファイルが出力されない欠点はあるものの、デメリットを補ってあまりある恩恵があるので積極的に使っていきましょう。
Linuxの知識については下記の本も参考になるので、スキルアップにお役立てください。
インフラカテゴリの最新記事
-
![[docker]対処法:コンテナにログインした時にvi(vim)コマンドが使えない](https://www.t3a.jp/wp-content/uploads/2023/01/docker_logo-730x410.png)
- 2023.08.20
- docker,
[docker]対処法:コンテナにログインした時にvi(vim)コマンドが使えない
-
- 2023.08.20
- docker,
[docker]対処法：OCI runtime create failed exec: “bash”: executable file not found
-
- 2023.01.06
- ubuntu,
Debian/Ubuntu系統のサーバOSではcrontabのMAILFROMは使えない件について
-
- 2022.07.19
- ubuntu,
[AWS]Ubuntu22.04 LTS にSSH接続(ログイン)できない問題の解決方法
-
![[python]torch がインストールできない場合の対応策](https://www.t3a.jp/wp-content/uploads/2022/06/python_logo-730x410.png)
- 2022.06.07
[python]torch がインストールできない場合の対応策
-
![[AWS]CloudWatchで監視を行う項目](https://www.t3a.jp/wp-content/uploads/2022/06/aws_cloudwatch-730x410.png)
- 2022.06.02
- cloudwatch,
[AWS]CloudWatchで監視を行う項目