WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： furuhashi
カテゴリー： マークアップ >CSS

Web制作を効率化するCSSプリプロセッサとして有名な Sass。
Sassの基本的な使い方を「はじめての方向け」にわかりやすく解説します！

Sassとは？

Sass（Syntactically Awesome Style Sheets）は、CSSを便利にするための拡張言語です。
変数やネスト、計算式などの便利機能を使って、最終的にブラウザが読めるCSSを生成します。

Sassでできること

Sassの代表的な機能をいくつか紹介します。

変数

色やフォントサイズなどを変数で管理できます。

記述するSass

$main-color: #3498db;

body {
  color: $main-color;
}

h1{
  color: $main-color;
}

出力されるcss

body {
  color: #3498db;
}
h1 {
  color: #3498db;
}

色を定義すれば後から文字色変更やメイン色変更も楽になります。

ネスト

HTMLの階層構造に合わせて、スタイルを入れ子で書けます。

記述するSass

nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

出力されるcss

nav ul {
  list-style:none;
}

nav li {
  display: inline-block;
}

何度も親のクラス名を書かなくても入れ子にするだけで親クラス名が吐き出されます！

ミックスイン（mixin）

よく使うスタイルをひとまとめにして再利用できます。

記述するSass

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  @include flex-center;
  width:800px;
}

出力されるcss

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width:800px;
}

何度も流用するプロパティなどは事前に定義すれば、@includeを書くだけで読みこめます！

継承（extend）

共通部分をまとめて継承できます。

記述するSass

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

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

出力されるcss

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

.success {
  border-color: green;
}

まとめ

Sassを使えば、CSSの面倒な部分を効率的に管理できます。色やサイズを変数でまとめたり、階層構造をネストで整理したり、よく使うスタイルをmixinや@extend(継承)で再利用することで、無駄なコードを減らして作業をラクにできます。
これからWeb制作を始める方も、ぜひSassを活用して、
読みやすく、修正しやすいスタイルシートを作ってみましょう！