Help us understand the problem. What is going on with this article?

Web開発環境構築 on Mac 【Sass、Compass編】

More than 3 years have passed since last update.

Sass #とは

リンク先見れば分かると思います(適当)

Compass #とは

リンク先みればわk(ry

いざ導入

註:ここから先はMac OS X El Capitan上での導入手順です。他バージョンでの導入手順は異なる場合がありますのであしからず。

Xcode Command Line Toolsのインストール

Compassのインストールには、「Xcode Command Line Tools」が必要。
インストールしよねせやね。

まずはXcodeをインストール

App StoreからXCodeをインストール(すでにインストールされている場合は飛ばしてOK)

Xcode Command Line Toolsの確認

  1. XCodeを起動し、[XCode] → [Preferences...]から設定ウィンドウを開く
  2. [Locations]タブのCommand Line Toolsにバージョンが表示されているか確認
    • 表示されていなければ、インストールされていないため、次の手順でインストール

kobito.1471509126.692905.png

Xcode Command Line Toolsのインストール

ターミナルからコマンドで。ちょっと時間かかるから茶しばきながら待とねせやね。

$ xcode-select --install

Rubyのインストール

Rubyのインストール確認

Sass動かすにはRubyが必要。
El CapitanならRubyはインストールされているはず。
一応確認な。

$ ruby -v

バージョンが表示されるはず。されない?
は?(威圧)

Rubyがインストールされていない or 最新がいいぜなミーハーちゃんたちへ

Homebrewインストール

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

path設定

$ echo 'export PATH=/usr/local/bin:$PATH' >> .bash_profile
$ source .bash_profile

インストール確認

$ brew doctor

パッケージ取得(基本的に不要のはず。一応)

$ brew update

ruby-buildのインストール

後述の「rbenv install」するために必要なプラグイン。

$ brew install ruby-build

rbenvのインストール

$ brew install rbenv

path設定

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> .bash_profile
$ echo 'eval "$(rbenv init -)"' >> .bash_profile
$ source .bash_profile

rubyのインストール

バージョン一覧

$ rbenv install -l

インストール(例:バージョン2.3.1)

$ rbenv install 2.3.1

rubyをrbenvでインストールしたものに切り替え

$ rbenv global 2.3.1 

バージョン確認

$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin15]

Sassのインストール

これもターミナルから。

gemのアップデート

予めgemをアップデートしておく

$ sudo gem update --system

sassのインストール

$ sudo gem install -n /usr/local/bin sass

敢えて/usr/local/binにインストールしています。理由は後述。

Sassのインストール確認

$ sass -v
Sass 3.4.22 (Selective Steve)

Compassのインストール

Compassのインストール

$ sudo gem install -n /usr/local/bin compass

El Capitanでは、システム整合性保護(SIP: System Integrity Protection)によって、保護されるフォルダに対するファイル作成はsudoで権限昇格(なんかWindows的…)しても制限され、Compassのインストールに失敗します。
Sassは問題なくインストールできます…が、なんとなく合わせておくのが無難なのでは?という完全に個人的なアレでSassもアレしてます。すまんな。

Compassのインストール確認

$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2016 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

とりあえず「compass create」してみる

$ compass create
directory sass/ 
directory stylesheets/ 
   create config.rb 
   create sass/screen.scss 
   create sass/print.scss 
   create sass/ie.scss 
    write stylesheets/ie.css
    write stylesheets/print.css
    write stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

まとめ

ひとまずここまで来たらSass、Compassは使えます。
正直、Koalaとかいらないと思います(単に面倒くさいだけ)。
というか開発元情報はちゃんと付けようよKoalaさん。
kobito.1471530758.221865.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away