Web活のロゴ

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

お問い合わせ

注目のタグ

#VsCode#Scss#Gsap#Pug#Swiper#ChatGTP
    TOP>CSS>DartScssの記述方法
    ScssをCSSへコンパイルしましょう #2/3

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

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

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
settings.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コードの解説

各ファイルの説明

src: SCSSのソースコードが格納されるディレクトリです。

global: グローバルなスタイルに関するファイルが格納されるディレクトリです。名前は任意です。
_index.scss: グローバルなスタイルを定義するためのSCSSファイルです。こちらが起点となるファイルで@forwardを使用し、以下の_common/_variablesファイルを読み込んでいます。
_common.scss: 共通のスタイル定義をまとめたSCSSファイルです。
_variables.scss: 変数や定数を定義するためのSCSSファイルです。

index.scss: メインのスタイルを定義するためのSCSSファイルです。@use ‘./global/’ as *;を記述することで、globalディレクトリーに記述内容を引き継ぐことができます。

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

$cWhite: #FFFFFF;
$cBlack: Black;
$cBlue: Blue;
$cGray: Gray;

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

_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※原則名前を変更することはできません。

@forward "variables";
@forward "common";

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

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

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

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

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

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

@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サイトを構築することが可能。
Copyright
© 2023 Souichi_Kimura All Rights Reserved.