Sass クイックリファレンス

はじめに

Sass(Syntactically Awesome Stylesheets)はCSS(cascading stylesheets)のメタ言語。Sassは変数、インポート、ミックスイン、拡張／継承やオペレータ／演算子などを利用できます。Sassファイル(拡張子:*.scss)を作成し、コンパイルするとCSSファイルを生成できます。

インストール

SassのインストールにはRubyが必要。

SassはRubyGemsからインストールする。

gem install sass

パーミッションエラーが出るときは

sudo gem install sass

動作確認

sass -v

Sassの使い方

開発の流れ

• 拡張子を*.scssとし、Sassファイルを作成する。
• Sassファイルをsassコマンドを使用しコンパイルする。
• SassファイルからCSSファイルが生成される。

コマンド

SassファイルをCSSファイルにコンパイルする

sass input.scss output.css

"--watch"オプションを指定すると、Sassファイルが更新されたときCSSファイルをコンパイルする

sass --watch input.scss:output.css

変数

変数を利用して色やフォントなどのスタイルを指定できます。"$"で始まるシンボルは変数になります。

/* 変数 */
$my-font:sans-serif;
$my-color:red;
 
body{
    background-color: $my-color;
    font: $my-font;
}

セレクタのネスト

Sassではセレクタをネストできます。

Sass

nav{
    ul{
        margin: 0;
        padding: 0;
    }
 
    li{display: inline-block}
 
    a{
        display: block;
        padding: 6px 12px;
    }
}

Sassから生成されたCSS

nav ul {
  margin: 0;
  padding: 0; }
 
nav li {
  display: inline-block; }
 
nav a {
  display: block;
  padding: 6px 12px; }

インポート

"@import"を使用すると、外部のSassファイルをインポートできます。

Sass

/* base.scss */
@import 'inc';
 
body{
    background-color: $my-color;
    font: $my-font;
}

/* inc.scss */
$my-font:sans-serif;
$my-color:red;

Sassから生成されたCSS

body {
  background-color: red;
  font: sans-serif; }

ミックスインとインクルード

"@mixin"を使用すると、スタイルをまとめて宣言できます。

"@mixin"でスタイルを定義し、"@include"でスタイルを呼び出します。

Sass

/* @mixin"でスタイルを定義 */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
/* @include"でスタイルを呼び出す */
.box { @include border-radius(10px); }

Sassから生成されたCSS

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }

拡張/継承

"@extend"をスタイルを拡張したり、継承できます。

Sass

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success {
  @extend .message;
  border-color: green;
}
 
.error {
  @extend .message;
  border-color: red;
}
 
.warning {
  @extend .message;
  border-color: yellow;
}

Sassから生成されたCSS

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }
 
.success {
  border-color: green; }
 
.error {
  border-color: red; }
 
.warning {
  border-color: yellow; }

オペレータ/演算子

+、-、*、/や%などのオペレータ/演算子を使用できます。

Sass

$x:40px;
$y:60px;
 
.box{
    height: 600px / 960px * 100%;
    width: $x + $y;
    float: 200px+50px;
 
}

Sassから生成されたCSS

.box {
  height: 62.5%;
  width: 100px;
  float: 250px; }