Web活のロゴ

Web制作Output&初心者のための徹底ガイド

DartScssの記述方法
ScssをCSSへコンパイルしましょう #2/3

2023.06.17DartScssでScssをコンパイルする方法
はじめに
概要

Vscodeの拡張機能であるLive Sass Compilerを使用して、DartScssを記述し、CSSにコンパイルしてデザインを適用する方法を以下に説明します。SCSSの構築方法については、こちらのリンクを参照してください。

スポンサーリンク
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

DartScssの構築

こちらからコードをダウンロードできます。ご利用ください。

ディレクトリーの構成と設定内容

ディレクトリー構成

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
- dist
- css
- index.min.css
- index.css
- src
- global
- _index.scss
- _common.scss
        - _variables.scss
- index.scss
- index.html
- dist - css - index.min.css - index.css - src - global - _index.scss - _common.scss         - _variables.scss - index.scss - index.html
- dist
  - css
    - index.min.css
  - index.css
- src
  - global
    - _index.scss
    - _common.scss
        - _variables.scss
  - index.scss
- index.html
settings.json(VsCode)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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,
// 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,
// 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ディレクトリーに記述内容を引き継ぐことができます。

_variables.scss ※名前は任意です。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$cWhite: #FFFFFF;
$cBlack: Black;
$cBlue: Blue;
$cGray: Gray;
$cWhite: #FFFFFF; $cBlack: Black; $cBlue: Blue; $cGray: Gray;
$cWhite: #FFFFFF;
$cBlack: Black;
$cBlue: Blue;
$cGray: Gray;

上記のコードでは、変数を定義してそれをスタイルに適用しています。変数はカラーコードの設定に使われており、値を変更する際には一括で変更することができます。変数を使用することで、スタイルの再利用性が高まり、スタイルの管理が効率的になります。カラーに限らず、max-widthの指定やフォントサイズの指定など、さまざまな用途で変数を活用することが可能です。

_common.scss ※共通の内容で良く使われるファイル名です。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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※原則名前を変更することはできません。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@forward "variables";
@forward "common";
@forward "variables"; @forward "common";
@forward "variables";
@forward "common";

_index.scssは、通常は名前を変更しないファイルです。このファイルでは、@forwardディレクティブを使用して他のSCSSファイルをインポートしています。

@forward “variables”;: “variables”という名前のSCSSファイルをインポートしています。このファイルには変数の定義が含まれます。

@forward “common”;: “common”という名前のSCSSファイルをインポートしています。このファイルには共通のスタイルが定義が含まれます。

@forwardディレクティブを使用することで、他のファイルに定義された変数やスタイルをこの_index.scssファイルから利用することができます。これにより、モジュール化されたスタイルの管理や再利用性の向上が図られます。

適応されたコードを確認して見ましょう

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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の値が適応されていることがわかります。

index.scss

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@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%;
}
@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%; }
@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サイトを構築することが可能。

関連記事