MENU

Sassって何？という人向け超基本まとめ～記法から導入まで～

CSS
Sass
2022-05-25
Sassの基本 イメージ画像
目次

Sassとは

CSSをより効率的に書けるSassを知っていますか？

Sassとは、CSSを拡張したスタイルシート言語です。

CSSに加えて、変数や関数を使うことができます。

開発するときにSassで記述して、WEBで表示するときはCSSの形式に変換(コンパイル)します。

以下のようなイメージです。

Sassの基本動作

Sassの記法について

Sassには2種類の記法があります。

記法特徴
SASSインデントを使って記載する記法。;は使えない。
SCSSよりCSSに近い感覚で書ける。

Sassのファイルを作成するときに拡張子を.sassにするとSASS記法、.scssにするとSCSS記法が適用されます。

下記のボタンのスタイルを例に、それぞれの記法を確認してみましょう。

BUTTON

CSSの場合

.sample__button {
  background: #0f7dd6;
  color: #ffffff;
  border: none;
  padding: 0.4rem;
}
.sample__button:hover {
  background: #666666;
}

SASSの場合

$main-color : #0f7dd6
$hover-color : #666666

.sample__button 
  background: $main-color
  color: #ffffff
  border: none
  padding: 0.4rem
  &:hover 
    background: $hover-color

SCSSの場合

$main-color: #0f7dd6;
$hover-color: #666666;

.sample__button {
  background: $main-color;
  color: #ffffff;
  border: none;
  padding: 0.4rem;
  &:hover {
    background: $hover-color;
  }
}

SCSSの方が、よりCSSに近い記載になっていますよね。

単純にSassと言った場合、SCSS記法のことを指すことが多いようです。

これからSassを勉強するのであれば、SCSS記法を学んだほうが良いでしょう。

記法の特徴

$始まりは変数

$始まりの記載は変数です。変数は、1度定義すると、同じ値を使い回すことができます。

階層化して記述できる

以下のように、階層化して記載することができます。

$main-color: #0f7dd6;
$hover-color: #666666;

.parent {
    // 親要素のスタイル
   background: $main-color;
    &:hover {
      // 親要素がホバーされたときのスタイル
      background: $hover-color;
    }
    > .child {
      // 子要素のスタイル
    }
  .childOrGrandChild {
    // 子・孫要素のスタイル
  }
}
  • &を使うと、親要素に指定の文字を付け足します。
  • 上の例だと、.parent:hoverとして解釈されます。
  • >を使うと、直接の子要素のスタイルを指定できます。
  • .parent > .child と同じ意味です。
  • 何もつけずにクラス名や要素を書くと、親要素配下の該当するクラス・要素のスタイルを指定できます。
  • .parent .childOrGrandChildと同じ意味です。

別々のファイルに書いた記載を1つのファイルに結合できる

Sassでは、スタイルを複数ファイルに分割して書いて、それを簡単に結合することができます。

下記のような構成で、.scssファイルを作ったとします。

style
 ├ _a.scss
 ├ _b.scss
 └ global.scss
.aStyle {
  color: red;
}
.bStyle {
  color: blue;
}
@use '_a';
@use '_b';

このように書くと、global.scssは下記のように解釈されます。

.aStyle {
  color: red;
}

.bStyle {
  color: blue;
}
  • @useで他のファイルの呼び出しを行います。
  • ファイル名の前に_を付けると、他のファイルから呼び出すためのファイルになります。

関数を作ることができる

Sassでは関数を作ることができます。

関数とは、繰り返し記述する内容を効率的に記載するための仕組みです。

命令文の名前から、mixinと呼びます。

関数の作成について、詳しくは下記の記事を参照ください。

あわせて読みたい
Sassの@mixinでスタイル指定を効率化！ブレイクポイントの具体例で使い方とメリットを確認しよう Sassの@mixinを使うと関数を作ることができます。関数によって、繰り返し記述する内容の再利用が可能です。このページでは、@mixinでブレイクポイントを扱う例を通して@mixinの使い方とメリットを解説します。

Sassを使うには

Sass公式サイトではnpmを使う方法、Chocolateyを使う方法、Homebrewを使う方法が紹介されています。

参考：Sass: Install Sass

今回は、npmを使う方法の詳細を解説します。

前提条件

Node.jsが必要です。

Node.jsが入っていない場合は、下記のサイトからダウンロードしてください。

Node.js

ダウンロードができたら、PowerShellを立ち上げて、以下のコマンドを入力してください。

node -v

以下のようにバージョンが表示されればインストールできています。

v17.9.0

npmを使ってSassをインストールする

npmとは、Node.jsのパッケージ管理ソフトです。

Node.jsをインストールすると、npmも使えるようになります。

PowerShellで、下記のコマンドを実行します。

npm install -g sass

-gは、グローバルにインストールするためのオプションです。

PC全体でsassを使えるようにするためのものだと考えてください。

sassコマンドを使って.scssファイルを.cssに変換する

PowerShellで以下のコマンドを実行することで、.scssファイルを.cssファイルに変換することができます。

sass test.scss test.css

このコマンドでは、test.scssをtest.cssに変換します。

sass --watch test.scss test.css

上記のように--watchオプションをつけることで、test.scssに変更がある度に、test.cssへの変換を行います。

PowerShell上でctrl+Cを入力することで、止めることができます。

参考文献・サイト

CSS
Sass
目次