CSS
Sass

実務において最低限知っておくべきSass知識

More than 1 year has passed since last update.

Sassとは

CSSの拡張版で、CSSにはできない便利な機能が含まれます。最終的にはsassをcssに変換し、サイトに実装します。

変数宣言

サイト内で使いまわす主な色は名前をつけて変数化しましょう。こうすることで、複数人で作業する際に色がブレるリスクを軽減し、色を調べる手間を節約します。

style.scss
$color-text: #333;

body {
  color: $color-text;
}

ファイルの分割と参照

下記のようにファイルを分割することができます。ファイル名の先頭に _ をつけた場合、そのファイルは実際には生成されず、読み込み専用として機能します。

style.scss
_header.scss
_footer.scss
_btn.scss
style.scss
@import header
@import footer
@import btn

一つのcssにまとめて記述するとファイルが肥大化し、複数人で作業する際競合のリスクを生みます。実際の現場ではscssはコンポーネント単位で分割されることが多いのでこの仕組みに慣れておきましょう。

mixin

JSでいう関数のようなものを定義し、使用することができます。引数を使うことができるので、複雑かつ汎用的なスタイルはmixinとして定義しておくとよいでしょう。

style.scss
// 正方形のスタイルを当てるmixin(初期値100px)
@mixin square($size: 100px) {
  width: $size;
  height: $size;
}

.user-face {
  // 300px の正方形を定義できる
  @include square(300px);
}

入れ子

sassでは親子関係のclassを入れ子で記述することができます。cssにおいて親子関係に依存するcss定義はあまり推奨されないため、親子としてではなく、&を使ったBEM定義で多用されることが多いです。

style.scss
.hero {
  // &の位置には親のclass名が入ります
  &__name {
    font-size:13px;
    font-weight: bold;
  }
  &__age {
    font-size: 16px;
  }
  // &がない場合親子としての指定になります
  img {
    border-radius: 50%;
  }
}

この場合、下記のcssが書き出されます

style.css
.hero__name {
  font-size:13px;
  font-weight: bold;  
}
.hero__age {
  font-size: 16px;
}
.hero img {
  border-radius: 50%;
}