はじめに
概要
Vscodeの拡張機能であるLive Sass Compilerを使用して、DartScssを記述し、CSSにコンパイルしてデザインを適用する方法を以下に説明します。SCSSの構築方法については、こちらのリンクを参照してください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
読者DartScssの記述方法ScssをCSSへコンパイルしましょうは、最初にどこを理解するとよいですか？
木村使用するツールの役割、設定ファイルの場所、実行する順番を先に整理すると、環境差によるつまずきを減らせます。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
DartScssの構築
DartScssの構築では、DartScssの記述方法ScssをCSSへコンパイルしましょう #2/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
こちらからコードをダウンロードできます。ご利用ください。ディレクトリーの構成と設定内容
ディレクトリー構成- dist
- css
- index.min.css
- index.css
- src
- global
- _index.scss
- _common.scss
- _variables.scss
- index.scss
- index.htmlsettings.json(VsCode)
// Scssの詳細設定
"liveSassCompile.settings.formats": [
// 拡張子が ".css" のファイルを作成する（デフォルト設定）
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist"
},
// 拡張子が ".min.css" のファイルを作成する
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/dist/css"
}
],
// live sass ソースマップを出力しない
"liveSassCompile.settings.generateMap": false,setting.jsonの解説
上記のコードは、VscodeのLive Sass Compiler拡張機能の詳細設定を示しています。以下で各項目の説明をします。 liveSassCompile.settings.formats: SCSSファイルのコンパイル時に生成するCSSファイルのフォーマットを指定します。複数のフォーマットを定義することができます。 format: CSSファイルのフォーマットを指定します。”expanded”は読みやすい形式（テスト環境用）、”compressed”は圧縮された形式（本番環境用）です。 extensionName: 生成されるCSSファイルの拡張子を指定します。上記では、テスト環境は.cssを指定し、本番環境では.min.cssを指定しています。 savePath: 生成されたCSSファイルの保存先パスを指定します。ここでは”/dist”を指定し、このディレクトリにコンパイルされたCSSが生成されます。 ※上記の例では、”/dist”フォルダ内にはテスト環境用と本番環境用のCSSが生成されます。 liveSassCompile.settings.generateMap: SCSSファイルのコンパイル時にソースマップを生成するかどうかを指定します。ソースマップは、開発者ツールでSCSSファイルの元のソースコードを参照できるようにするためのものです。この設定では、falseに設定されており、ソースマップの生成を無効化しています。SCSSコードの解説
SCSSコードの解説では、DartScssの記述方法ScssをCSSへコンパイルしましょう #2/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
各ファイルの説明
src: SCSSのソースコードが格納されるディレクトリです。 global: グローバルなスタイルに関するファイルが格納されるディレクトリです。名前は任意です。 _index.scss: グローバルなスタイルを定義するためのSCSSファイルです。こちらが起点となるファイルで@forwardを使用し、以下の_common/_variablesファイルを読み込んでいます。 _common.scss: 共通のスタイル定義をまとめたSCSSファイルです。 _variables.scss: 変数や定数を定義するためのSCSSファイルです。 index.scss: メインのスタイルを定義するためのSCSSファイルです。@use ‘./global/’ as *;を記述することで、globalディレクトリーに記述内容を引き継ぐことができます。_variables.scss ※名前は任意です。
上記のコードでは、変数を定義してそれをスタイルに適用しています。変数はカラーコードの設定に使われており、値を変更する際には一括で変更することができます。変数を使用することで、スタイルの再利用性が高まり、スタイルの管理が効率的になります。カラーに限らず、max-widthの指定やフォントサイズの指定など、さまざまな用途で変数を活用することが可能です。
$cWhite: #FFFFFF;
$cBlack: Black;
$cBlue: Blue;
$cGray: Gray;_common.scss ※共通の内容で良く使われるファイル名です。
このファイルは共通のクラスをまとめたものです。ファイルを分割することでスタイルの管理が向上し、変更もこのファイルのみで行うことができるため、効率的です。共通のスタイルを集約したファイルですので、コードの重複を避けることができ、保守性も高まります。
.flex-row {
display: flex;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.fw-bold {
font-weight: 700;
}
.fw-medium {
font-weight: 500;
}
.fw-light {
font-weight: 300;
}_index.scss ※原則名前を変更することはできません。
_index.scssは、通常は名前を変更しないファイルです。このファイルでは、@forwardディレクティブを使用して他のSCSSファイルをインポートしています。
@forward “variables”;: “variables”という名前のSCSSファイルをインポートしています。このファイルには変数の定義が含まれます。
@forward “common”;: “common”という名前のSCSSファイルをインポートしています。このファイルには共通のスタイルが定義が含まれます。
@forwardディレクティブを使用することで、他のファイルに定義された変数やスタイルをこの_index.scssファイルから利用することができます。これにより、モジュール化されたスタイルの管理や再利用性の向上が図られます。
@forward "variables";
@forward "common";SCSSコードの解説で押さえたいポイント
SCSSコードの解説は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
適応されたコードを確認して見ましょう
適応されたコードを確認して見ましょうでは、DartScssの記述方法ScssをCSSへコンパイルしましょう #2/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
HTML
_common.scssで記述した.flex-rowや.flex-columnの値が適応されていることがわかります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
/>
<link rel="stylesheet" href="dist/index.css" />
</head>
<body>
<header class="flex-row">ヘッダー</header>
<div class="hero flex-row">メインビジュアル</div>
<!-- /.hero -->
<main>
<div class="wrapper flex-column">
<section>
<div class="box1 flex-row">box1</div>
<!-- /.box1 -->
</section>
<section>
<div class="box2 flex-row">box2</div>
<!-- /.box2 -->
</section>
<section>
<div class="box3 flex-row">box3</div>
<!-- /.box3 -->
</section>
</div>
<!-- /.wrapper -->
</main>
</body>
</html>index.scss
_variablew.scssで記述した変数の値がCSSにコンパイルされて適応していることがわかります。
@use './global/' as *;
body {
color: $cWhite;
font-size: 2rem;
letter-spacing: 0.02em;
}
header {
justify-content: center;
height: 150px;
background-color: $cBlue;
}
.hero {
justify-content: center;
height: 500px;
background-color: $cBlack;
}
.box1,
.box2,
.box3 {
justify-content: center;
height: 300px;
background-color: $cGray;
}
.wrapper {
justify-content: center;
padding: 100px 0;
width: 80%;
margin: 0 auto;
gap: 50px;
}
section {
justify-content: center;
width: 100%;
}適応されたコードを確認して見ましょうで押さえたいポイント
適応されたコードを確認して見ましょうは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
適応されたコードを確認して見ましょうの確認方法
実行前後のバージョンと設定値を控え、再起動後も同じ動作になるか確認します。チーム作業では、個人のパスや秘密情報を設定ファイルへ固定しないことも重要です。
まとめ
- VsCodeの拡張機能Live Sass Compilerで、SCSSファイルを指定したフォーマットでコンパイルし、生成されたCSSファイルを指定した保存先に出力される。
- 設定は、VsCodeのsettings.jsonに記述する。
- DartScssでは@forwardや@useといった内容を使用する。
- _index.scssが起点となるファイルであり、原則名前を変更することはできない。
- SCSSの利点を活かし、保守性の高いWebサイトを構築することが可能。
Sassのコンパイル手順を順番に確認できて助かりました。生成されたCSSだけでなく、source mapも一緒に出力しておくと開発者ツールで追いやすくなりますか？
はい、開発中にsource mapを出力すると、開発者ツールから元のSassファイルと行番号を追いやすくなります。本番ではファイル容量やソース公開の方針を確認し、不要であれば出力しない設定へ分けるのがおすすめです。