[CSS] Sass入門して、Next.jsで作ったブログ(このブログ)のCSSをSassに置き換えたい

2021/9/25

thumbnail

目次

やりたいこと

このブログのCSSをSassに置き換えたい。

自分はフロントエンジニアなのに、業務ではCSSを書かないので、ほとんどCSSが書けない。このブログのcssも.cssファイルにベタ書きしている。でも転職などを考えた際に、フロントエンドなのにCSS書けないのはたぶん転職の幅を狭めてしまうとおもっていたので、いつかCSSは勉強しないといけないなと思っていた。それに個人開発するにあたってはCSSも必須になってくるし。

で、ちょうどこのブログがあるので、このブログの.cssを.scssに置き換えることを目標に頑張ろうと決めた。

下調べ

node-sassというSassコンパイラを入れればいいと思っていたけれど、どうやらいまは非推奨になっているらしい。dart-sassというのをいれるべきらしい。

dart-sassをinstallする

$ npm i -D sass

ファイルの拡張子を.cssから.scssに更新して、Sass記法で書いてみる

  • 1.ネスト

ブロック単位で書けて、とても見やすい。

.nav {
  padding: 10px;

  ul {
    list-style: none;
  }
}
  • 2.変数

CSSよりもシンプルに変数定義ができてよい。

$primary-color: rgb(79, 126, 255);

a {
  color: $primary-color;
}
  • 3.パーシャル

ファイルを分割できていい。

@use './variables';

h1 {
  color: variables.$primary-font-color;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0.5rem 0;
}
  • 4.mixin

mixinに関してはReactでコンポネントを分けてるので、このブログでは特に使わなくても大丈夫そう

スタイルを関数化できるみたいなので、必要なときがきたら使ってみよう。

.scssファイルはコンポネントでは読み込めない？

.scssファイルを個別に作ったコンポネントで読み込もうとしたら Global CSS cannot be imported from files other than your Custom <App>. ... というエラーがでた。_app.tsxで読み込んでねみたいなことらしい。_app.tsxで.scssファイルを読み込むようにしたらエラーは消えた。

じゃあ個別のコンポネントのファイルに.scssを読み込むときはどうすれば良いのかと思って調べたら、CSS Modulesと同じようにして読み込めるらしい。ファイル名を hogehoge.module.scss とすればコンポネントのファイルから読み込んでもエラーが出ない。

import styles from './hoge.module.scss'

それと、CSS Modules としてCSSを書くと className={styles.card} みたいにしないといけないので、ケバブケースでスタイルのクラス宣言できないの不便だなあってずっと思ってたけど、ブラケット記法で記述すればいいだけの話だった。className={styles['card-title']}みたいなかんじ。

まとめ

ネストと変数定義とファイル分割のおかげで、かなり見た目がスッキリした気がする。Sass記法もかなり読めるようになったし、これで仕事でちょっとしたCSSの修正をしたいときも自分でできるようになったはず。とはいえCSSは命名規則とか気にするの面倒だなあというのがつきまとうので、次は Tailwind CSS に置き換えてみようかな。

おしまい！

追記

メディアクエリもネストで書けるのめちゃめちゃいいなと思った

これは最高。

.thumbnail-wrapper {
  background: linear-gradient(
    to right bottom,
    variables.$thumbnail-background-gradation-color-start,
    variables.$thumbnail-background-gradation-color-end,
  );
  margin: 2rem 0 1rem 0;
  display: flex;
  justify-content: center;

  img {
    width: 100%;
    height: 300px;
    max-height: 300px;
    object-fit: cover;
  }
  // これ！最高！
  @media screen and (max-width: 600px) {
    img {
      height: 200px;
    } 
  }
}

sponsored link

  • top
  • blog
  • product
  • about