HTML/CSS

sass/scssを使って効率化、変数、ネスト、コンパイルとは

更新日:

「コーディングを効率化したいな」

「sass/scssってなんだろう」

「sass/scssの使い方を知りたい」

こういった悩みに答えます。

目次

  • sass/scssの使い方
  • 変数とは
  • ネストとは
  • コンパイルとは

sass/scssの使い方

新規にサイトを作る時に画像のように.cssではなく.scssというファイル名にします。

変数とは

変数は、何度も使う「フォント・色・値など」をすぐに設定できるので便利です。

ネストとは

ネストは、画像のように「.box-inner」を「.box」の中に「&-inner」と記述することで省略できます。

つなみにこのコードで作っているのは、これです。

コンパイルとは

scssからcssに変換することをコンパイルと言います。

上記の画像はコンパイルしていますが、コンパイルをしないと画面に反映されないので注意しましょう。

コンパイルのやり方は、VS codeエディタのLive Sass Conpilerというプラグインを使います。

インストール後、VS codeの最下部にあるWatch Sassをクリックします。

その後、.scssにsassを書いていき「Ctrl+s」で保存すると自動的にcssとcss.mapが作成されます。

そして、htmlファイルに<link rel=”stylesheet” href=”stylesheet.css”>と記述して完了です。

まとめ

今回、sass/scssの使い方、変数、ネスト、コンパイルについてご紹介しました。

この記事を観てくれた人が少しでも参考になれたらと思います。

おすすめしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.