Sass、Compass入門 - ぺーぺーSEのブログ

SassとCSS界のjQueryことCompassを触ってみた。
下記を見たことを前提に書く。

blog.pepese.com
※npmとかGrunt使うよ！

また、CSSについては下記を参照。
blog.pepese.com

SassはCSSを簡単に書けるメタ言語。コンパイルしてCSSを出力する。
CompassはSassのフレームワーク。Sassで使える便利セットが詰まっている。
またここでは「.sass」ではなく、「.scss」を使う。
※「.scss」の方がメジャーっぽい。

インストール

RubyをインストールしておいてGemでSassとCompassをインストール。

> gem install sass
> gem install compass
> sass -v
Sass 3.4.14 (Selective Steve)
> compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

GruntのプロジェクトでSass、Compass使うときはプラグインをインストール。

> npm install --save-dev grunt-contrib-sass grunt-contrib-compass

Sass文法

SCSS形式の文法ね。

■セレクタの入れ子

こんなふうに

要素１ 要素２ {
  プロパティ : 値;
}
要素１ 要素３ {
  プロパティ : 値;
}

書くのめんどいよね。
下記のように書ける。

要素１ { 要素２ { プロパティ : 値; } 要素３ { プロパティ : 値; } }

もちろんコンパイルしたら上のcssが出る。

■プロパティの入れ子

p {
  background-color: blue;
  background-image: url("hoge.jpg");
  background-repeat: repeat-y;
}

書くのめんどいよね。
下記のように書ける。

p{ background: { color: blue; image: url('hoge.jpg'); repeat: repeat-y; } }

■「&」

入れ子にしてコンパイルした後スペース空くのが嫌な時は「&」をつける。
こう書くと、

.row-offcanvas-right { right: 0; &.active { right: 50%; } }

こうなる。

.row-offcanvas-right {
  right: 0;
}
.row-offcanvas-right.active {
  right: 50%;
}

■継承

「@extend」でセレクタを指定して継承することができる。

.p1{ background-color: gray; color: red; } .p2{ @extend .p1; /* .p2に対して.p1のスタイルをそのまま適用 */ border: 1px solid white; /* .p2にだけ適用したいスタイルも書ける */ }

↓↓↓

.p1, .p2 {
  background-color: gray;
  color: red;
}
.p2 {
  border: 1px solid white;
}

■変数

「$変数名: 値;」の形式で定義・値代入し、「$変数名」で使用することができる。

$original-red:#a82f34; $a-width:400px; a{ color: $original-red; width: $a-width + 300px; /* 四則演算も可能 */ }

■MixinとInclude

「@mixin」でスタイルの塊を定義して「@include」で使用することができる。
Mixinは下記のように定義できる。

@mixin Mixin_Name { 好きなスタイル }
@mixin Mixin_Name(引数１, 引数２, …) { 引数を使用した好きなスタイル }
@mixin Mixin_Name(引数１:デフォルト値,引数２:デフォルト値…) { 引数を使用した好きなスタイル }

MixinはIncludeで下記のように使用できる。

@include Mixin_Name; @include Mixin_Name(引数１, 引数２, …); @include Mixin_Name(引数１: 値, 引数２: 値, …);

■Import

「@import」を使用すると指定したcss/sassファイルの中身をそのまま適用できる。

@import "hoge.css"; @import "foge.scss";

■Partial

ImportしたSCSSファイルはコンパイルするけど、ImportされたSCSSファイルはコンパイルしたくない。（だっていらないもの）
このコンパイルしたくない、ImportだけしたいSCSSファイルのことをPartialファイルという。
ファイル名の先頭にアンスコ「_」をつけるだけでPartialファイルになる。
「_hoge.scss」とか。

Compassの使い方

■設定

Compassの設定ファイルconfig.rbをプロジェクトルートに作成する。

css_dir = "dest/assets/css"
sass_dir = "src/scss"
images_dir = "src/img"
javascripts_dir = "dest/assets/js"
relative_assets = true

Compassの初期化。

> compass init
directory dest/assets/css/
   create src/scss/screen.scss
   create src/scss/print.scss
   create src/scss/ie.scss
    write dest/assets/css/ie.css
    write dest/assets/css/offcanvas.css
    write dest/assets/css/print.css
    write dest/assets/css/screen.css

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

You may now add and edit sass stylesheets in the src/scss 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="/dest/assets/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/dest/assets/css/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/dest/assets/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

Gruntを使用している場合はGruntfile.jsを修正。

'use strict';

module.exports = function(grunt) {

  // initConfigの中で各タスクを設定
  grunt.initConfig({
    // package.jsonに設定されている内容を取得
    // バージョンや名称などの情報を外部ファイルで共通化できる
    pkg: grunt.file.readJSON("package.json"),
    
    // compassタスク（grunt-contrib-compass）の設定
    compass: {
      compile: {
        options: {
          config: 'config.rb'
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-compass');
}:

「grunt compass」すればコンパイルされる。

■使い方

Compassのモジュールを使うときはSCSSファイルの先頭等で

@import "compass/css3";

を記載する。
これでCompassで様々用意されているMixinを使用できる。
Mixinの詳細は下記を参照。
http://compass-style.org/reference/compass/css3/

■例

@import "compass/css3";
.row-offcanvas {
  position: relative;
  @include transition-property(all);
  @include transition-duration(.25s);
  @include transition-timing-function(ease-out);
}

↓↓↓

.row-offcanvas {
  position: relative;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

ベンダプレフィックス全部ついてる。。。