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


# 目的
業務効率化

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

# OS情報
```vim
[root@localhost /]#  cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)
```

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

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

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

```vim
[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のインストールが済んでない場合は以下コマンド実行

```vim

[root@localhost /]#  yum install git
```
### 3). rbenvを取得します。

```vim
[root@localhost /]# git clone https://github.com/rbenv/rbenv.git ~/.rbenv
```
### 4). rbenvのパスを通して有効化します。

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

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

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

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

> ruby-buildを取得します。

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

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

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

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

```vim
[root@localhost /]#  rbenv install -l
```
> インストール可能なRubyのバージョンが一覧で表示されます。

```vim
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をインストールするのに必要なパッケージを先にインストールします。

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

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

```vim
[root@localhost /]# rbenv install 2.4.1
```

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

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

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

```vim
[root@localhost /]# rbenv global 2.4.1
```

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

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


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

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

## gemを更新

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

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



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


#  Sass と Compass をインストール

```vim
[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
```

# プロジェクトを作成

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

```vim
$ cd /vagrant/sample

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

```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/05cc2184-8800-15da-5645-29b2411792f9.png)

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

# 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;
  }
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/b9fce4c6-d139-8eba-2230-3d68ae178233.png)


# コンパイルしてブラウザ表示まで
```vim
$ cd scss作成した作業パス
```

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

```vim
$ sass test.scss:test.css
```

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

```vim
$ 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 */

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/fbf86320-075c-edba-43b4-b4721b118a42.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/fdb22b61-9358-f2b1-db17-4e4664fdc57c.png)


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