SCSSの導入 - Githubissues

starlod commented 8 years ago

Rubyがインストールされていること。

$ ruby -v
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin15]

Macは標準装備、Windowsはインストーラからイントールする。 http://rubyinstaller.org/

starlod commented 8 years ago

Sass, Compassのインストール

$ gem update --system
$ gem install sass
$ gem install compass

starlod commented 8 years ago

プロジェクト直下にconfig.rbを配置する。

require 'compass/import-once/activate'
# アディショナルCompassプラグインを利用するなら以下に書く

# プロジェクトのディレクトリをここにセットする
http_path       = "/"
css_dir         = "src/App/SrsBundle/Resources/public/css"    #CSSを書き出すディレクトリ
sass_dir        = "src/App/SrsBundle/Resources/public/scss"   #SASSファイルがあるディレクトリ
images_dir      = "src/App/SrsBundle/Resources/public/images" #画像用のディレクトリ
javascripts_dir = "src/App/SrsBundle/Resources/public/js"     #JavaScriptファイル用のディレクトリ
cache_dir       = "../.sass-cache"                            #キャッシュ用のディレクトリ

# アウトプットスタイルの選択（利用するスタイルのコメントを外して利用する）（デフォルト：expanded）
# output_style = :expanded   #通常のアウトプットスタイル
# output_style = :nested     #Sassなどのネストを継承したスタイル
# output_style = :compact    #1つのCSSCSSレイクタの設定が１行になるスタイル
# output_style = :compressed #コメントを取り除いて完全に圧縮するスタイル
output_style = (environment == :production) ? :compressed : :expanded

# Compassで拡張された関数で使うURLを、絶対パスか相対パスかを指定（デフォルト：false[絶対パス]）
relative_assets = true

# キャッシュを出力するか（デフォルト：true[出力する]）
# cache = false

# デバッグ用のコメントを出力するか（デフォルト：true[出力する]）
# line_comments = false

# SCSS記法とSass記法の切り替え
# Sass記法を利用する場合は、以下のコメントを外してください
# preferred_syntax = :sass

starlod commented 8 years ago

Sublime Text3でビルドする場合

SCSS
SCSS Snippets
Sass
Compass

上記のプラグインを導入する。

Sublime Text 3でsassファイルを開いた状態でビルドシステムを選択する。

Tool > Build System > Compass

MacならCommand+B WindowsならCtrl+Bでビルドできることを確認する。

starlod commented 8 years ago

ターミナルからビルドする場合

$ compass clean
$ compass compile
$ compass compile -e production

-e productionでコメントを除去した1行のスタイルシートを出力する。

starlod / MilleFeuille

SCSSの導入 #13