• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

SassでCompassを使う

2018-03-13 by mocurot コメントを書く

Compassにはベンダープレフィックスを自動で追加してくれたりするミックスインなどが用意されていて、プロジェクトごとにSassの設定を変えたりできる。
Sassをより便利に使うためのCSSフレームワークである。

しかし Autoprefixer によるベンダープレフィックス管理が注目を集め、Ruby Sassよりも高速なC/C++製 LibSass も登場。Compassの利用者は一気に減少。 2016年、「今後メンテナンスしない」と発表された。

これからSassを学ぶなら「LibSass」+「gulp」をおすすめする。

Compass

Compassをインストールする

Sassと同様に、Macはターミナル、WindowsはコマンドプロンプトからCompassをインストールする。

$ gem install compass

「Successfully installed compass-****」のようなメッセージが表示されたらインストール成功。こちらも念のため、正常にインストールできたか確認をしておこう。

$ compass version
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2018 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の初期設定

Compassのインストールが完了したら、compassコマンドが使えるので、 前回使用した`「デスクトップ>test」で初期設定をしてみよう。

ディレクトリ移動〜Compass初期設定

$ cd ~/desktop/test/
$ compass create

上記のcompass createを実行すると、このようにファイルが展開される。

$ tree
.
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

2 directories, 8 files

オプションを付けてみよう

ディレクトリ名などを自分で設定したい場合は、compass create にオプションを付けてファイルを生成すればよい。

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

このオプションでは以下の設定を行っている。
– --sass-dir "sass"  sassのディレクトリはsassディレクトリ
– --css-dir "" cssのディレクトリはカレントディレクトリ
– --javascripts-dir "js" javascriptのディレクトリはjsディレクトリ
– --images-dir "images" 画像のディレクトリはimagesディレクトリ

$ tree
.
├── config.rb
├── ie.css
├── print.css
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── screen.css

1 directory, 7 files

また、「ie.scss」や「print.scss」、「screen.scss」のような最初に作られるscssファイルがいらない場合は、compass createにオプション—bareを付けてあげればよい。

$ compass create --bare

すると、config.rbとsassフォルダだけが生成される。

オプションを確認してみよう

生成された「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 = ""
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
.
.
.

基本設定をしよう

「config.rb」にscssファイルをコンパイルする際の設定が記されている。
自分の環境にあわせて「config.rb」を編集して保存するとコンパイル時に反映されるはずだ。
それでは基本的な設定を見ていこう。

  • http_path → サイトのパス
  • sass_dir → sassのディレクトリ
  • images_dir → 画像のディレクトリ
  • javascript_dir → javascriptのディレクトリ
  • line_comments → scssファイルの何行目に記述されたものかを出力するか
  • output_style:nested → Sassファイルのネストを引き継いで出力
  • output_style:expanded → {} で改行して出力
  • output_style:compact → セレクタと属性を1行にまとめて出力
  • output_style:compressed → すべてを1行にまとめて出力

キャッシュを吐き出さない設定

初期設定のままだとsassのキャッシュがどんどん作られてしまう。
このキャッシュが不要なら「config.rb」にキャッシュを吐き出さないように設定しよう。

cache = false

これでキャッシュが生成されなくなる。


Compassでのコンパイル

CompassにもSCSSファイルからCSSを生成する機能がある。CompassのCSSフレームワークを利用する際にはcompassコマンドでSCSSファイルをコンパイルしよう。
「config.rb」があるディレクトリで以下のコマンドを実行すれば、変更を監視して、保存の度にコンパイルしてくれる。

$ compass watch

CompassのCSSフレームワークをインポート

Compassには様々なミックスインやCSSスプライト自動作成機能が用意されている。このCompassの機能を使うには、@importで必要な機能をインポートする。
CSSスプライト:複数の画像を一枚の画像にまとめて、CSSのポジションを指定で表示する画像を変えること。

例)Compassのミックスインを使う

@import "compass";

@import "compass";でCompassのコアモジュールを呼び出すことができるようになる。以下のように個別にインポートすることもできる。

@import "compass/css3";
@import "compass/typography";
@import "compass/utilities";

Compassのミックスインを呼び出してみる。

.gnav{
  ul{
    li{
      @include border-radius;
      @include inline-block;
    }
  }
}

コンパイルが実行されると、以下のようなCSSが出力される。

.gnav ul li {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

ほかにもCSS3のミックスインはたくさんある。

.flex{
  @include display-flex;
}

.transition{
  @include transition(ease-in-out , 0.5s);
}

.boxShadow{
  @include box-shadow(0 10px 0 0 rgba(0,0,0,0.5));
}

.rotate{
  @include rotate(15deg);
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

.flex {
  display: -webkit-flex;
  display: flex;
}

.transition {
  -moz-transition: ease-in-out, 0.5s;
  -o-transition: ease-in-out, 0.5s;
  -webkit-transition: ease-in-out, 0.5s;
  transition: ease-in-out, 0.5s;
}

.boxShadow {
  -moz-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.5);
}

.rotate {
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

このように、Compassはベンダープレフィックスなんかを自動で追加してくれたりするミックスインなどがたくさん用意されている。

ベンダープレフィックスの自動追加で行数が減ってCSSの見通しが良くなったり、コーディングの時間を削減できたりと様々な恩恵を受けることができる。

次回「 ネスト」

関連

Filed Under: Sass 関連タグ:COMPASS, SASS, SCSS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
mocurot noteの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • Sassで@import
    Sassで@import
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • ダークソウル リマスター版の壁紙
    ダークソウル リマスター版の壁紙
  • underscoresでWordPressのテーマを作る1(導入)
    underscoresでWordPressのテーマを作る1(導入)
  • さくらのVPSで80/443ポートに繋がらない
    さくらのVPSで80/443ポートに繋がらない
  • CompassによるCSSスプライト作成 -その1-
    CompassによるCSSスプライト作成 -その1-

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン