Sass 導入 使い方

もはやスタンダードになっているSassの導入と使い方

Sass(Scss) とは？ 概要 特徴

Sass (Syntactically Awesome Stylesheets) つまり構文スゲースタイルシート

CSSを拡張したメタ言語 綺麗にまとめてくれる

  • 変数が使える ($名前 : 値;)
  • ミックスイン(関数)可能 (@mixin 名前($変数1,$変数2,…))
  • セレクタのネスト(入れ子)可能
  • セレクタのスタイル継承可能(@extend)

Sass , Scss 違い

Sass (Syntactically Awesome Stylesheets)

1
2
3
4
5
6

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Scss (Saccy Css)

インデントで階層を表現

1
2
3
4

table.hl
  margin: 2em 0
  td.ln
    text-align: right

Sass(Scss) 変数 Variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* var  */
$color-base:#fff;
$color-sub:#333;
$color-key:#666;

$fontsize-base:16px;
$fontsize-title:30px;

/* Scss */

body{
  color: $color-base;
  $fontsize-base:16px;
}

Sass(Scss) 関数 ミックスイン Mixins

関数というよりも、Cssスニペッドに名前を付けていつでも呼び出せるイメージ。
名前とその中で使える変数名(ローカル変数)を指定する。
ベンダーブレフィックスとか便利

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* 
@mixin 名前($変数1,$変数2,...){

    プロパティ1:$変数1;
    プロパティ2:$変数2;
    プロパティ3:$変数1 $変数2 ...;
}
*/

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Sass(Scss) ネスト 入れ子 Nesting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.box{
  background-color: #000;
  ul{
    margin: 3px;
    li{
      padding: 3px;
      a{
        background-color: #333;

        &:hover{
          background-color: #666;
        }
      }
    }
  }
  div{
    color: #999;
  }
}

Sass(Scss) 継承 Extend

h1、h2、スタイルは同じだけど、色だけ変えたい時など

1
2
3
4
5
6
7
8
9
10

h1{
  font-size: 30px;
  color: #333;
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, ＭＳ Ｐゴシック
}

h2{
  @extend h1;
  font-size: 20px;
}

Sass(Scss) インポート Import

他のscssのデータを全部読み込む reset.scss を base.scss に取り込む

1
2
3
4
5

//reset.scss
html,body,ul,ol{
  margin: 0;
  padding: 0;
}
1
2
3
4
5

//base.scss
@import 'reset';
body{
  background-color: #333;
}

Sass(Scss) Operators

ファイル内で四則演算ができる。
細かい計算とかしないで済む

1
2
3
4
5
6
7
8
9
10
11

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Sass(Scss) &

親参照セレクタ

1
2
3
4
5
6
7
8
9

a{
  background-color: #000;
  &.hover{
    background-color: #333;
  }
  .hover &{
    background-color: #666;
  }
}
1
2
3
4
5
6
7
8
9

a {
  background-color: #000;
}
a.hover{
  background-color: #000;
}
.hover a {
  background-color: #000;
}

参考サイト