DartScssの記述方法
ScssをCSSへコンパイルしましょう #2/3
Vscodeの拡張機能であるLive Sass Compilerを使用して、DartScssを記述し、CSSにコンパイルしてデザインを適用する方法を以下に説明します。SCSSの構築方法については、こちらのリンクを参照してください。
DartScssの構築
こちらからコードをダウンロードできます。ご利用ください。
ディレクトリーの構成と設定内容
ディレクトリー構成
- dist
- css
- index.min.css
- index.css
- src
- global
- _index.scss
- _common.scss
- _variables.scss
- index.scss
- index.html// 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コードの解説
各ファイルの説明
src: SCSSのソースコードが格納されるディレクトリです。
global: グローバルなスタイルに関するファイルが格納されるディレクトリです。名前は任意です。
_index.scss: グローバルなスタイルを定義するためのSCSSファイルです。こちらが起点となるファイルで@forwardを使用し、以下の_common/_variablesファイルを読み込んでいます。
_common.scss: 共通のスタイル定義をまとめたSCSSファイルです。
_variables.scss: 変数や定数を定義するためのSCSSファイルです。
index.scss: メインのスタイルを定義するためのSCSSファイルです。@use ‘./global/’ as *;を記述することで、globalディレクトリーに記述内容を引き継ぐことができます。
$cWhite: #FFFFFF; $cBlack: Black; $cBlue: Blue; $cGray: Gray;
上記のコードでは、変数を定義してそれをスタイルに適用しています。変数はカラーコードの設定に使われており、値を変更する際には一括で変更することができます。変数を使用することで、スタイルの再利用性が高まり、スタイルの管理が効率的になります。カラーに限らず、max-widthの指定やフォントサイズの指定など、さまざまな用途で変数を活用することが可能です。
.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;
}
このファイルは共通のクラスをまとめたものです。ファイルを分割することでスタイルの管理が向上し、変更もこのファイルのみで行うことができるため、効率的です。共通のスタイルを集約したファイルですので、コードの重複を避けることができ、保守性も高まります。
@forward "variables"; @forward "common";
_index.scssは、通常は名前を変更しないファイルです。このファイルでは、@forwardディレクティブを使用して他のSCSSファイルをインポートしています。
@forward “variables”;: “variables”という名前のSCSSファイルをインポートしています。このファイルには変数の定義が含まれます。
@forward “common”;: “common”という名前のSCSSファイルをインポートしています。このファイルには共通のスタイルが定義が含まれます。
@forwardディレクティブを使用することで、他のファイルに定義された変数やスタイルをこの_index.scssファイルから利用することができます。これにより、モジュール化されたスタイルの管理や再利用性の向上が図られます。
適応されたコードを確認して見ましょう
<!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>_common.scssで記述した.flex-rowや.flex-columnの値が適応されていることがわかります。
@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%;
}_variablew.scssで記述した変数の値がCSSにコンパイルされて適応していることがわかります。
- VsCodeの拡張機能Live Sass Compilerで、SCSSファイルを指定したフォーマットでコンパイルし、生成されたCSSファイルを指定した保存先に出力される。
- 設定は、VsCodeのsettings.jsonに記述する。
- DartScssでは@forwardや@useといった内容を使用する。
- _index.scssが起点となるファイルであり、原則名前を変更することはできない。
- SCSSの利点を活かし、保守性の高いWebサイトを構築することが可能。
