Web.Tech

scss(sass) + compassを使ってみる。

2014年02月01日
  • Sass(Syntactically Awesome Style Sheet)
    • CSSを拡張したメタ言語
    • CSSジェネレーター
  • SCSS(Sassy CSS)
    • CSSの構文を拡張した記法
  • Compass
    • Sassを拡張したCSSライブラリ

インストール

rubyが入っている事が前提。

gem update --system

gem install sass
gem install compass

バージョン

$sass -v
Sass 3.2.13 (Media Mark)

$compass -v
Compass 0.12.2 (Alnilam)

プロジェクトを作成

プロジェクトを作成するディレクトリへ移動後

mkdir css
cd css
compass create

ファイルが作成される

.
├── config.rb
├── sass
│   ├── ie.scss               /* IE用 */
│   ├── print.scss            /* 印刷用 */
│   └── screen.scss           /* PCブラウザ */
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

既にフォルダがある場合

compass init --css-dir "css"

config.rb

サイトの構成に合わせて変更する

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

  • プロジェクトのパス等を指定。

    output_style = :expanded

    値 意味
    :expanded 一般的な{} で改行
    :nested Sassファイルのネスト形式
    :compact セレクタと属性を１行で出力
    :compressed 圧縮して出力

  • 相対パスを有効にする。

    relative_assets = true

  • CSSに行番号を出力しない(省略時する)

    line_comments = false

  • 現在一般的なscss記法ではなく、sass記法で書きたい場合

    preferred_syntax = :sass

    コマンドで変換できる。

    sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

cssへ変換

compass watch

sassファイルを編集すると自動的にstylesheetsのcssが作成される。

sassコマンドで変換

  • ファイルを指定して、手動で変換

    sass --style expanded scss/screen.scss:css/screen.css

  • ファイルを指定して、自動で変換

    sass --style expanded --watch scss/screen.scss:css/screen.css

  • フォルダを指定して、自動で変換

    sass --style expanded --watch scss:css

SCSS記法

変数

$base_color: pink;
p { color: $base_color; }

↓

p { color: pink; }

ネスト

#main {
  h1 { border: 0; }
  h2 { border: 0; }
}

↓

#main h1 {
  border: 0;
}
#main h2 {
  border: 0;
}

プロパティのネスト

.class {
  border: {
    style: solid;
    color: black;
  }
}

↓

.class {
  border-style: solid;
  border-color: black;
}

親セレクタ参照

a {
  &:hover { color: pink; }
}

↓

a:hover {
  color: pink;
}

演算

table { width: 800px - 100}

↓

table {
  width: 700px;
}

使用できる式：+, -, *, /, %

コメント

//コメント

※変換後のCSSへは出力されない

CSSに出力するコメントは/* */を使用。

@function

@function add ($a, $b) {
    @return $a + $b;
}

table {
  border: add(1, 2);
}

↓

table {
  border: 3;
}

@if

$type: blue;

p {
  @if $type == blue {
    color: blue;
  } @else if $type == red {
    color: red;
  } @else {
    color: black;
  }
}

↓

p {
  color: blue;
}

比較演算子：==,!=,<=,>=,<,>

@for

@for $i from 1 through 3 {
    .width#{$i} { width: 10% * $i; }
}

↓

.width1 {
  width: 10%;
}

.width2 {
  width: 20%;
}

.width3 {
  width: 30%;
}
  • through:指定された値まで
  • to:指定された値-1まで

※指定した順番にしか実行できない

@while

@forと異なり増減を変更できる。

$i: 5;
@while $i <= 20{
  .size#{$i}{
    size:#{$i}px;
  }
  $i: $i+5
}

↓

.size5 {
  size: 5px;
}

.size10 {
  size: 10px;
}

.size15 {
  size: 15px;
}

.size20 {
  size: 20px;
}

@each

$list: blue, red, black;

@each $color in $list {
  .#{$color}{
    color:#{$color};
  }
}

↓

.blue {
  color: blue;
}

.red {
  color: red;
}

.black {
  color: black;
}

@mixin

@mixin border-base {
  border: 0;
  color: pink;
}

table { @include border-base; }

↓

table {
  border: 0;
  color: pink;
}

@mixin(引数)

@mixin border-base($border: 0, $color: black) {
  border: $border;
  color: $color;
}

#t1 { @include border-base(); }
#t2 { @include border-base(1, pink); }

↓

#t1 {
  border: 0;
  color: black;
}

#t2 {
  border: 1;
  color: pink;
}

@extend

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

↓

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

@import

CSSの@importとは異なり、別のファイルに定義したCSSをビルド時に一つのファイルに統合する。
※CSSの@importは別のHTTPリクエストで読み込む。

インポートするファイルのファイル名の先頭を(_)とする。

/* _sample.scss */
@mixin border-base($border: 0, $color: black) {
  border: $border;
  color: $color;
}

/* style.scss */
@import "sample"
#t1 { @include border-base(); }

↓

/* style.css */
#t1 {
  border: 0;
  color: black;
}

compassライブラリ

クロスブラウザを意識した便利なfunctionやmixinを利用できる。

@import "compass";

@import "compass";で以下のライブラリを読み込む

リセットCSS

//reset.css
@import "compass/reset";

角丸

.sample {
  @include border-radius();
}

↓

.sample {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

ベンダープレフィックスを自動で付加してくれたりする。

sassがメインになってしまった。
Compassについては、色々便利な事が簡単に出来そうなので継続して勉強します。

参考

blog comments powered by Disqus