LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@TSUBASA_KK(TSUBASA _KK)

Sass(SCSS)について学んでみた。

Posted at

はじめに

業務でscssファイルとやらがあり、これまでCSSやCSSフレームワークしか触った事が無く、実務でSass(SCSS)を触る事になりそうなのでこの機会にキャッチアップしていこうと思います。
基本的には公式ドキュメントを見ながら解説していこうと思います。

動作環境

  • OS：macOS Sequoia 15.1.1
  • Node.js：22.6.0
  • npm：10.8.2
  • sass：1.87.0

インストール方法

-のインストール
npm install -g sass
ディレクトリを作成
mkdir -p source/stylesheets build/stylesheets
scssファイルを作成
touch source/stylesheets/index.scss
index.scssファイルにSassを書いていきます。

Sass(SCSS)とは

CSSだけだと規模が大きくなってくると複雑になり、メンテナンスが難しくなる為、少しでもメンテナンスをしやすくする為にできた技術です。
SassをコンパイルするとCSSになるので、CSSを色々書きやすくした技術だと思っていて良さそうですね。
コンパイルの方法については後述します。

SassとSCSSについて

Sassと聞いて思うのが、SassとかSCSSとかなぜ名前が違うのか？だと思います。

SASSとSCSSの違いは構文（書き方）の違いです。
機能的にはどちらも同じ「Sass」言語の一部で、最終的にはどちらもCSSにコンパイルされます。

書き方が違うだけでSassの中の構文でSCSS構文があるみたいですね。
両方の構文の違いを見ていきます。

Sassの書き方

$color: #333

body
  font-family: sans-serif
  color: $color

  h1
    font-size: 2rem

bodyやh1の波括弧が無いのと、末尾のセミコロンが無くなっていますね。
何だか慣れないとちょっと見にくそうですね。。

SCSSの書き方

$color: #333;

body {
  font-family: sans-serif;
  color: $color;

  h1 {
    font-size: 2rem;
  }
}

SCSSは普通のCSSとほぼ同じ書き方のように見えますね。
CSSを書いた事があれば直感的に分かりそうです。

現在は SCSS構文が主流 です。

ChatGPTさんによるとSCSS構文の方がよく使用されているみたいです。
既存のCSSと同じ書き方が出来るのでSCSS構文が使用されるのは納得ですね。

コンパイル

上で少し触れたCSSからSass(SCSS)にコンパイルする方法について見ていきます。
SCSSの書き方のコードをsource/stylesheets/index.scss に追加してください。

sassコマンドを使用して1つ目にSass(SCSS)ファイルパスとファイル名を指定し、2つ目にコンパイル先のファイルパスと作成したファイル名を指定します。
sass source/stylesheets/index.scss build/stylesheets/index.css
コマンドを実行するとbuild/stylesheets/にindex.cssファイルとindex.css.mapファイルが作成されます。

build/stylesheets/index.css
$color: #333;

body {
  font-family: sans-serif;
  color: $color;

  h1 {
    font-size: 2rem;
  }
}

index.cssファイルはコンパイル後のCSSが記載されているファイルです。

build/stylesheets/index.css.map
$color: #333;

body {
  font-family: sans-serif;
  color: $color;

  h1 {
    font-size: 2rem;
  }
}

.mapファイル（ソースマップファイル）は、Sass(SCSS)などの元ファイル（ソース）とコンパイル後のCSSファイルを関連付けるためのファイルです。
Sass(SCSS)ファイルからCSSファイルにコンパイルされると、Sass(SCSS)ファイルの元の構造がわからなくなりますが、.mapファイルがあると検証ツール等でもSass(SCSS)ファイルを確認する事ができるようになるみたいです。

変数

SCSSでは変数を定義して使用する事ができます。

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

コンパイル後のCSSファイル

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

使用方法としてはプロジェクトで共通で使用するカラーコードを変数で定義してまとめたファイルを別ファイルから変数を使用して呼び出す等はよくありますね。

ネスティング(ネスト)

SCSSではHTMLと同じようにネストしてコードを書く事ができます。
(最近はCSSでもネストで書くことができる様になっている。)

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

  li {
    display: inline-block;
  }

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

個人的には凄く見やすくて良い印象ですね。
navを何度も書かずに済み、コードが短くてスッキリしますね。

パーシャル(pertial)とモジュール化

パーシャルとは、Sass(SCSS)でコードを分割して管理するための機能です。
小さな再利用可能な部品に分けて使うことで、スタイルを整理しやすく、保守性も向上します。
パーシャルファイルは先頭にアンダースコアを付ける必要があり、Sass(SCSS)は「このファイルは単体ではCSSに変換しない」と判断しコンパイルされないようになっています。

_base.scss
// 変数の定義
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// パーシャルファイル側でもスタイルを指定
body {
  font: 100% $font-stack;
  color: $primary-color;
}
index.scss
// @useでパーシャルの読み込み
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

コンパイル後のCSSファイル

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

.inverse {
  background-color: #333;
  color: white;
}

Sass(SCSS)ではReact等みたいにモジュール化できるようですね。
よく使用するボタンのスタイル等を切り分けて置くと良いかもしれないですね。

ミックスイン(mixin)

@mixinは関数のように名前付きのスタイルを定義し、@includeでどこでも呼び出せるようにするための仕組みです。

// ミックスインの定義
// 関数みたいに引数も渡す事ができる
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

コンパイル後のCSSファイル

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}
.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}
.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

@includで読み込んだ所に@mixinで定義したスタイルが入っている事が確認できます。
引数で値を渡した場合はスタイルが変更されている事も確認できますね。
スタイルをパーシャルファイルに分けることで、モジュール化も可能になります。

拡張/継承

Sass(SCSS)では、@extendを使ってスタイルを継承することができます。
共通のスタイルを複数のセレクタ間で共有できるようになります。

%button-style {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.button {
  @extend %button-style;
  background-color: blue;
  color: white;
}

.submit-button {
  @extend %button-style;
  background-color: green;
  color: white;
}

コンパイル後のCSSファイル

.submit-button, .button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.button {
  background-color: blue;
  color: white;
}

.submit-button {
  background-color: green;
  color: white;
}

@extend %button-styleで指定したのでbutton-styleの全てのスタイルが継承している事が確認できますね。
同じスタイルを複数のセレクタに使いまわしたい時に便利な機能ですね。

オペレーター(演算子)

Sass(SCSS)には、CSSには存在しない「演算子（オペレータ）」が使えます。
数値や色、文字列などに対して計算や結合ができ、より動的で柔軟なスタイルの記述が可能になります。

// Sassのmathモジュールをインポート
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  // divはdivision（除算）の略
  // 600px / 960pxの結果に100を掛けている
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  // divはdivision（除算）の略
  // 300px / 960pxの結果に100を掛けている
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

Sass(SCSS)のmathモジュールをインポートする事で、除算が使えるようになります。
math.floorだと小数点以下を切り捨てたりもできるようになっています。
mathモジュールを使用しなくても、演算はそのまま使用する事ができます。

色の演算

$base-color: #333;

.lighter {
  color: $base-color + #222; // 色を明るくする
}

コンパイル後のCSSファイル

.light {
  background-color: lighten(#333, 20%); // 明るくなる
}

文字列の結合

$prefix: "btn";
$state: "hover";

.selector {
  class: #{$prefix}-#{$state}; // 結果: "btn-hover"
}

比較演算子

$width: 100px;

@if $width > 80px {
  .box {
    border: 1px solid red;
  }
}

ディレクティブ（制御構文）

上記で出てきましたが、Sass(SCSS)ではif文なども使用する事が可能です。

$theme: dark;

body {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else if $theme == dark {
    background-color: #333;
    color: white;
  } @else {
    background-color: gray;
    color: black;
  }
}

コンパイル後のCSSファイル

body {
  background-color: #333;
  color: white;
}

条件によってスタイルを変更したい時に、JSでいちいちクラスを付け替えたりする必要が無くなるので便利な気がしますね。

終わりに

今回は公式ドキュメントを確認しながらSass(SCSS)について学習していきましたが、関数化できるようになっていたりHTMLと同じ様なネストで書ける様になっていたり、凄く便利になっているなと感じました。
初めてSCSSファイルを見た時は、少し警戒してしまいましたが基礎をしっかり学ぶと全然やっていけそうな感じがしました。

参考資料

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?