Sassの基本の書き方まとめ

Sass便利だなぁと思いつつ使っていない機能とかが結構あるので、あらためてSassでできることを確認。

基本事項

  • Sassとは「Syntactically Awesome StyleSheet」の略。
  • sass記法とscss記法があるが、従来のCSSに近いscss記法が一般的。
  • コンパイルにはいろいろな方法がある。私はGulpを使う。
  • ファイル名がアンダースコア(_)から始まるファイルはコンパイルされない。(設定にもよる)
  • コンパイルや変数・変数のスコープ、関数などの用語の理解が前提としてあると楽。

ネスト

SassではCSSをネスト(入れ子に)して書くことができます。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

もちろん、classやidをセレクタとして使用することも可能です。

親セレクタの参照(&)

& を使用することで、親セレクタを参照することができます。

a {
  font-weight: bold;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  #main & {
    font-weight: normal
  }
}
a {
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#main a {
  font-weight: normal;
}

& によって親セレクタを参照した場合、通常のネストとは異なる出力結果となります。

BEMを使う方はこちらもあわせてどうぞ。

ネストを用いた接頭辞の省略

ネストを使用することで、特定のプロパティで記述を省略することができます。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

変数

Sassでは変数を使用できます。
使用方法は、 $変数名: 値; で定義し、使用箇所では $変数名 と書けばOK。
また、文中やセレクタに使用する場合は、使用箇所で #{$変数名} と書くことでコンパイル時に定義した値に置き換わります。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

特にサイト全体で使用する色の指定などに便利です。
後述する @import とあわせて変数だけをまとめておくケースも見かけますね。

変数のスコープ

Sassの変数は、ネストの内部が有効な範囲となります。
ネストの外側で定義された変数はグローバル変数として扱うことができます。

※変数のスコープに関する詳細やフラグ(オプション)の指定等については長くなりそうなのでここでは扱いません。(別記事としてまとめる予定。)

演算

Sassでは、 +, -, *, / % といった演算子を用いた値の計算も可能です。

.container { width: 100%; }

article {
  float: left;
  width: 600px / 960px * 100%;
}

aside {
  float: right;
  width: 300px / 960px * 100%;
}
.container {
  width: 100%;
}

article {
  float: left;
  width: 62.5%;
}

aside {
  float: right;
  width: 31.25%;
}

関数

Sassでは、関数を使用することができます。

ネイティブ関数

元から用意されている関数を使用することで、値の調整や変換、その他様々な機能を利用することができます。

例)percentage($number) ・・・数値をパーセンテージに変換する

.hoge {
  width: percentage(0.5);
}

.huga {
  width: percentage(600px / 960px);
}
.hoge {
  width: 50%;
}

.huga {
  width: 62.5%;
}

関数の一覧はこちら http://sass-lang.com/documentation/Sass/Script/Functions.html

自作関数

Sassでは、自身で関数を作成することも可能です。
作成方法は、 @function で定義し、 @return で返り値を示します。

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
#sidebar {
  width: 240px;
}

なお、名前の競合を避けるとともに、SassやCSSの一部ではないことを明確にするために、関数には接頭辞を付けることが推奨されます。

@mixin

@mixinを使用すると、サイト全体で再利用したいCSS宣言のグループを作成できます。
使用方法は関数に似ていますが、多少の違いがあります。
@mixin mixinの名前(引数名){内容} で定義し、 @include mixinの名前(引数); で使用します。

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

.box { @include border-radius(10px); }
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

関数では基本的に値のみを返すのに対し、mixinではプロパティやネストされたセレクタなどもまとめて返すことができます。

@import

@importで他の.scssファイルを読み込むことができます。
指定方法は、 @import 'ファイル名'; です。ファイル名を指定する際、拡張子や先頭のアンダースコアは不要です。

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

上記をコンパイルすると、以下のようになります。

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@extend

@extend を使用すると、あるセレクタから別のセレクタに一連のCSSプロパティを共有することができます。
使用する際は、 @extend 共有するセレクタ名; と記述します。
以下の例では、 .message に指定したプロパティを、他のクラスで共有しています。

.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;
}
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

シングルクラスでの設計に役立ちそうですね。

参考にしたページ

SassSass

Posted by WebMemo