見出し画像

ホームページを作ってみよう! - Sass。

ホームページを作るときに必要なレイアウトですが、その役割を持っているのがCSS、スタイルシートです。

このスタイルシートの書き方が今劇的に変わってきているのですが、少し面倒な部分があり敬遠してきましたがVSCodeを使うことで簡単に使うことができそうなので試してみたいと思います。

スタイルシートをSassというものを使って書くということです。使い回しが簡単にできて、メンテナンス性が良いものということです。

Sassとは、「Syntactically(文法的に) Awesome(イケてる・すごい) StyleSheet(スタイルシート)」の略です。

Sassでは、SASS記法、SCSS記法がありますが、SCSS記法で試していきます。ますVSCodeの拡張機能をインストールします。

"DartJS Sass Compiler and Sass Watcher"というのをインストールします。拡張機能のインストール画面から、この名前を検索してインストールします。

これを入れてしまえば、拡張子scssとしてファイルを保存した時点で自動でコンパイル、以下のようなファイルを作成します。

.css 
.css.map 
.min.css
.min.css.map

mapがついているものはいわゆるソースコード的なもの。min.cssは容量を圧縮したものができているようです。実際に必要なものは".css"ということになります。

使い方については以下サイトがわかりやすいです。

参考サイト


いいなと思ったら応援しよう!