Sass無しでCSSネストが可能に #Chrome

そのままのCSSでネストが！？

結論：最新版のchrome(Chromeのv112)とEdgeの二つのみで対応しています。

実装状況はこちらから確認できます

EdgeはオープンソースであるChromiumと呼ばれるオープンソースのWebブラウザーエンジンをベースに開発されているので、Google Chromeと同じエンジンを使用しています。ですのでEdgeも対応しています。そしてSafariも次回から対応するようです。他のブラウザに関してはまだ実装されないようです。

ですので、実務等で使用するのはまだやめておいた方が良いでしょう。

実際に書いてブラウザ毎に確認してみた

共通しているコード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="parent">
      親要素です
      <p class="child">子要素です</p>
    </div>
  </body>
</html>

style.css

.parent {
  color: gray;
  .child {
    color: red;
  }
}

/*  ↓ 見やすくするためのスタイル */

.parent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 120px;
  width: 360px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

p {
  margin: 0;
  padding: 0;
}

簡単に言うと、純粋なCSSでもネストに対応していたら子要素の「子要素です」の文字が赤色になるというだけです。
現在のQiitaのコードブロックでもエラーが出ています。

2023/04/17 現在の状況です。

Visual Studio Code

Chrome(v.112)

Safari(v.12.1.2)

Firefox(v.111.0.1)

Chrome -> 反映　 Safari -> まだ反映されていない　Firefox -> 反映されない

Sassが必要なくなる？

個人的にSassの強みだと思う部分が変数やネスト、関数や演算だと思っていたのですが少しづつ純粋なCSSでかけるようになってきています。
色に対するアプローチはSassの方に軍配があがるのかなという感じですが、私個人としてはあまり色に対して関数を使用して指定することがないので実感したことはないです…

	CSS	Sass
変数	--primary-color: #ffffff;	$primary-color: #ffffff;
演算	width: calc(100% / 3);	width: 100% / 3;

個人的な感想ではありますが、@useディレクティブやモジュール化のサポートなどSassにしかできないことは数多く残っているので、小さなプロジェクトではわかりませんが、大きくなるにつれてSassの優位性、必要性というのも高くなるのかなと思っています。

まとめ

仮にある程度のブラウザで対応し始めて、CSSでネストして描くのがスタンダードになったとしてもSassはやはり便利です。
Sassの機能的な部分ではなく記法的な側面（楽にコード書きたい）からSassを使用しているという人たちは将来的にSassを使用しなくてもよくなるかもしれません。
ですが、そうではない強みというのもSassにはありますので、じゃあSass学ばなくてもいいじゃんとは考えずにぜひ学んでいくといいと思います。