SassとCompassをVM環境(CentOS7)に入れてみた

目的

業務効率化

前提

1. OracleのVirtualBoxインストール済であること
2. WindowsにVagrant環境インストールであること

OS情報

[root@localhost /]#  cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)

SassとCompassのインストール方法

SassとCompassはRuby上で動くプログラムなので、Rubyや関連プログラムをインストールしておく必要があります。
Linux系OSの場合、Ruby はインストール済みの場合が多いので、ターミナルで以下のコマンドを発行してインストール済みかを確認します。

[root@localhost /]# yum list installed | grep ruby

Ruby以外にも必要なプログラムがあるので、下記もインストール済みか確認

[root@localhost /]# yum list installed | grep ruby-devel
[root@localhost /]# yum list installed | grep rubygems
[root@localhost /]# yum list installed | grep gcc

これらがインストールされていない場合は、以下準備編から読む。インストールされてある場合は、準備編は読み飛ばしてください

準備編

Rubyのインストールに必要なモジュールを入れる

1). rbenvのインストール

2). gitのインストールが済んでない場合は以下コマンド実行

[root@localhost /]#  yum install git

3). rbenvを取得します。

[root@localhost /]# git clone https://github.com/rbenv/rbenv.git ~/.rbenv

4). rbenvのパスを通して有効化します。

[root@localhost /]# echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
[root@localhost /]#  ~/.rbenv/bin/rbenv init
[root@localhost /]#  source ~/.bash_profile

5). rbenvがインストールされたことを確認します。

[root@localhost /]# rbenv -v
rbenv 1.1.2-2-g4e92322

6). ruby-buildのインストール

ruby-buildを取得します。

[root@localhost /]#  git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build

7). ruby-buildをインストールします。

[root@localhost /]#  ~/.rbenv/plugins/ruby-build/install.sh

8). ruby-buildがインストールできるとrbenvのpluginであるrbenv installコマンドが使用できる

[root@localhost /]#  rbenv install -l

インストール可能なRubyのバージョンが一覧で表示されます。

Available versions:
  1.8.5-p52
  ・
  ・
  ・
  rbx-2.2.3
  rbx-2.2.4
  rbx-2.2.5
  rbx-2.2.6
  rbx-2.2.7
  rbx-2.2.8
  rbx-2.2.9
  rbx-2.2.10
  rbx-2.3.0
  rbx-2.4.0
  rbx-2.4.1
  rbx-2.5.0
  ・
  ・
  ・

Rubyのインストール

1). Rubyをインストールするのに必要なパッケージを先にインストールします。

[root@localhost /]# yum install -y openssl-devel readline-devel zlib-devel 

2).次にRubyのインストールをします。

[root@localhost /]# rbenv install 2.4.1

3).Rubyへのパスを通して有効化します。

[root@localhost /]# echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
[root@localhost /]# source ~/.bash_profile

4).rbenvで2.4.1を使用するように設定します。

[root@localhost /]# rbenv global 2.4.1

5).Rubyのバージョンが表示されればインストール完了です。

[root@localhost /]# ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]

Ruby以外の必要なプログラムをインストール

[root@localhost /]# yum -y install ruby-devel
[root@localhost /]# yum install rubygems
[root@localhost /]# yum install gcc

gemを更新

[root@localhost /]# gem update --system

gem はRuby言語用のパッケージ管理システムです。
このgem を使って Sass と Compass をインストールします。

ここまで準備できたら以下へ

Sass と Compass をインストール

[root@localhost /]# gem install compass 
[root@localhost /]# gem install sass

[root@localhost /]# sass -v
Ruby Sass 3.7.4
[root@localhost /]# compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2019 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

プロジェクトを作成

プロジェクトを作りたいフォルダ(プロジェクトのパス)に移動してコマンド実行

$ cd /vagrant/sample

$ compass create --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "img"

※sassファイルはscssフォルダへ、CSSファイルはcssフォルダに作成されます。
※JavaScriptファイルはjsフォルダ、画像ファイルはimgフォルダを参照してくれるようになります。

※ マウントしてあれば、ホスト側でコマンドを実行した時の確認が取れます。

config.rbの設定

config.rb

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass

Sass 作ってみる

test.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$hogeValue: 10px;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

nav {
  ul {
    margin: $hogeValue;
    padding: $hogeValue;
    list-style: none;
  }

  li { @include border-radius(10px); }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

コンパイルしてブラウザ表示まで

$ cd scss作成した作業パス

「test.scss」を「test.css」にコンパイルする（同じフォルダ内でコンパイル）

$ sass test.scss:test.css

フォルダをまたいでコンパイル(sassフォルダ、cssフォルダが別の場合)

$ cd sassフォルダ
$ sass test.scss:../css/test.css

test.css

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

nav ul {
  margin: 10px;
  padding: 10px;
  list-style: none; }
nav li {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

/*# sourceMappingURL=test.css.map */

マウント先のホストOSでブラウザ表示してみる ↓

参考

https://github.com/sass/sass
https://sass-lang.com/documentation/style-rules/declarations
https://qiita.com/AsagiriDesign/items/db12237796d1e7c9e632
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
http://book.scss.jp/code/c2/07.html
https://liginc.co.jp/designer/archives/11623
https://rfs.jp/sb/css/sass/sass05_linux_sass.html