💄

【初学者向け】CSSで代替可能なSassの機能

2024/02/16に公開

CSS

Sass

tech

2024/03/05追記
functionとmixinをCSSの機能として扱えるようにする動きがあるようです。
詳しくは、下記記事でチェックしてみてください。

前置き

Sassで検索すると、便利な機能がメリットなどに書かれていますが、ネイティブなCSSでも表現できる機能があったりします。
本記事で紹介する機能は主要なブラウザ（Chrome, Edge, Safari, Firefox）であればサポートされているため問題なく動作します。

IEについては、すでにブラウザのサポートが終了しているため、現場では基本的に検証対象から外れています。
また、現在は「HTML Living Standard」が標準仕様となっており、IEはこの標準仕様に沿ったブラウザ開発をしていないため検証対象から外れる1つの要素かなとも思います。

紹介する機能は、変数、ネスト、importです。順番に見ていきます。

変数

カスタムプロパティを用いて定義します。

カスタムプロパティはプレフィックスにハイフン2つ（—-）をつなげて書きます。

--primary-color: beige;
--secondary-color: tomato;
--fontSize16: 16px;

このカスタムプロパティを:root 内で定義することでグローバルでCSS変数として扱えるようになります。

:root {
  --primary-color: beige;
  --secondary-color: tomato;
  --fontSize16: 16px;
}

CSS変数を使用する側では、var(CSS変数) でCSS変数を展開することにより使用できます。

.main-content {
  background-color: var(--primary-color);  /* background-color: beige; */
}

.primary-title {
  color: var(--secondary-color); /* background-color: tomato; */
  font-size: var(--fontSize16);  /* font-size: 16px; */
}

対応ブラウザ

can i use

ネスト

下記のHTMLを参考にネストでスタイリングしていきます。

<div class="main-content">
  <p class="text">テキスト</p>
</div>

<div class="sub-content">
  <p class="text">テキスト</p>
</div>

数年前までは、.text にスタイルを当てる場合下記のように書いてました。

従来

.main-content .text,
.sub-content .text {
  color: tomato;
}

.main-content .text:hover,
.sub-content .text:hover {
  color: powerblue;
}

CSSでもネストを行えるようになり、下記のようにネスト記法で書けるようになっています。

今

.main-content,
.sub-content { 
  
  .text {
    color: tomato;

    &:hover{
      color: powerblue;
    }
  }
}

対応ブラウザ

can i use

import

importはCSSのat-ruleの1つで、外部のCSSファイルを読み込んでくれる機能です。

CSSをモジュール化できるため、コンポーネントごとにCSSファイルを分けたりできるので管理がしやすいです。

main.css

@import url("./css/reset.css");
@import url("./css/base.css");
@import url("./css/header.css");

/* something style */

<html>
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    // main.cssの読み込み
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    // content
  </body>
</html>

カスケードレイヤーでimportできたりもします。
カスケードレイヤーへのcssルールのインポート

カスケードレイヤーについては下記の記事が理解しやすいかなと思うのでリンクを記載させていただきます。

対応ブラウザ

can i use

まとめ

Sassにある機能でCSSでも代替可能なものを紹介してみました。

他にもmixinやextends、数学計算など便利な機能がありますが、CSS設計(命名規則など)をうまく運用していったり、
max()やmix()、calc()などの数学関数を使えばCSSでも問題なくカバーできます。

数年前まで、Sassを愛用していましたが、セットアップが面倒だったり、大規模になるにつれてコンパイルが長く開発にストレスがかかっていましたが、
昨今、CSSのアップデートが色々と施されているおかげでめっきりSassは使わないようになりました。

もちろん、プロジェクトの種類や粒度、目的などにおいて取捨選択する場面はありますが、
取捨選択する際の幅に広がりを持たせるひとつの指標と捉えていただけら幸いです。

ReactやVue開発が多いためそちらに焦点が集まりがちですが、こういったネイティブなCSSの知識も改めて重要なので、自分もアップデートを重ねていきたいです。

参考

CSS カスタムプロパティ（変数）の使用 - CSS: カスケーディングスタイルシート | MDN
CSS 入れ子 - CSS: カスケーディングスタイルシート | MDN
@import - CSS: カスケーディングスタイルシート | MDN

前置き

変数

対応ブラウザ

ネスト

対応ブラウザ

import

対応ブラウザ

まとめ

参考

Discussion