SCSS入門 導入と環境づくり

bootstrap5がリリースされてしばらく経つので、そろそろ導入を検討。

社内ではSCSSを使用するユーザがいないので習得を先延ばしにしていた(自分以外にメンテナンスできなくなる)SCSSだが、時代の潮流に合わせて習得することを目指すこととす。

SCSSとは?

SCSSとは、Sassの構文の一つであり、ウェブページのスタイルを指定するCSSをより効率よく記述するためのものです。

https://www.fenet.jp/dotnet/column/tool/5245/

SassにはSASS記法とSCSS記法があります。

Sass記法は、波かっこやコロン、セミコロンなどが必要なく、効率的にコードを書けるもので、.sassという拡張子を使います。

SCSS記法は、今までCSSとの互換性を持たせるために後から追加された記法で、拡張子は.scssとなります。

SCSS記法では、通常のCSSが分かる人であれば問題なくコードが理解できるようになっていることもあり、現在ではSCSS記法が主流です。

https://digitalidentity.co.jp/blog/creative/css-sass.html

要はSassという概念を実現するのに、SASS(全部大文字)とSCSSという2つの流派があって、後にできたSCSSの方が可読性に優れているので普及したという感じ。

Bootstrap5で採用されているのがSCSSとのことなので、主流派のSCSSを学ぶことにする。

メリット・布教法

CSSで十分、というユーザに布教する際のメリットは下記のようなものがある。

流行・権威

  • 現在のウェブ制作の世界では常識的に使われている
  • 主要なフレームワークなどでも採用されているので、知識がないと読解自体できない
  • 紹介記事が多数あるのでだいたい分からないことは解消できそう

利便性

  • 変数が使える(使いまわし・メンテナンスに便利)
  • 親子関係や疑似要素などが入れ子で簡潔に記述できる(関係性が誰から見ても明解)
  • パーツに分けたファイル管理ができる(CSSでやると読み込み遅延などデメリットが多い)
// 変数のサンプル
// SCSSはスラッシュ2つでコメントアウトでき、コンパイル後は消去される(便利!)
// 通常の/* hoge */式でもコメントアウトできる。こちらはコンパイル後も残る

header{
  a{
    background-color: black;
    color: #FFF;
  }
}

コンパイルするとこうなる。アウトプットの方式は4種類あり、SCSSの設定ファイルに記述することで自由に選択できる。基本はexpandedになりそう。

header a {
    background-color: black;
    color:#FFF;
}

SCSSの注意点

SCSSが通常のCSSと異なるのが、SCSSをCSSに変換(コンパイル)する工程が必要なところ。

正攻法でコンパイルする環境を作る場合は、Rubyをインストールした上でなんやかんや必要。ただvscodeの便利なプラグイン「Live Sass Compiler」があるのでそちらを使うことにする。これを入れると、.scssで保存をかけると同時に.css形式でデータが作成・更新される。神か。

なおdreamweaverは標準機能でSCSSの出力機能がある。

カテゴリー: SCSS
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る