SCSSのxamppによる基本的な開発環境構築

    任意のプロジェクトディレクトリを作成する。 
  1. mkdir scss-test
cd scss-test
  2. yarnでフロントエンドまわりを初期化する。 
    yarn init -y
  3. scssとcssディレクトリを作成する。 
    mkdir scss && mkdir css
  4. 見本scssファイルを作成。今回は_variables.scssと、それをインポートしたstyle.scssを作成する。 
    echo '$main-color: #007bff;' > scss/_variables.scss
echo '@import "variables"; body { color: $main-color; }' > scss/style.scss
  5. package.jsonに以下を追記する。 
    {
  "name": "scss-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "sass": "^1.86.3"
  },
	"scripts": {
  		  "dev": "sass scss:css --watch",
  		  "build": "sass scss:css --style=compressed"
  		}
}
  6. 見本のindex.htmlを作成。（プロジェクトディレクトリ直下に） 
    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>SCSS Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>SCSSテスト</h1>
</body>
</html>
  7. Sassを起動! 
    yarn dev
  8. xamppをコンパネからスタートし、ブラウザでアクセス。 
    http://localhost/scss-test/index.html
    ページが表示されれば成功
  9. ファイルとディレクトリの構成 
    C:\Users\user\git\scss-test
├── css
│   ├── style.css
│   └── style.css.map
├── index.html
├── node_modules
│   ├── .bin
│   ├── .yarn-integrity
│   ├── @parcel
│   ├── braces
│   ├── chokidar
│   ├── detect-libc
│   ├── fill-range
│   ├── immutable
│   ├── is-extglob
│   ├── is-glob
│   ├── is-number
│   ├── micromatch
│   ├── node-addon-api
│   ├── picomatch
│   ├── readdirp
│   ├── sass
│   ├── source-map-js
│   └── to-regex-range
├── package.json
├── scss
│   ├── _variables.scss
│   └── style.scss
└── yarn.lock

よく使う記法について

SCSS（Sassy CSS）は、従来のCSSに便利な機能を追加したプリプロセッサです。ここでは実務で特によく使われる構文を、例付きでわかりやすく解説します。

1. 変数（$variable）

色、余白、フォントサイズなどを変数にして再利用できます。

$primary-color: #007bff;
$padding-base: 16px;

.button {
  background-color: $primary-color;
  padding: $padding-base;
}

2. ネスト（Nesting）

セレクタを入れ子にすることで、構造を整理して読みやすくなります。

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: blue;
      }
    }
  }
}

3. ミックスイン（@mixin / @include）

再利用可能なテンプレートを定義し、引数付きで柔軟に使い回せます。

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.container {
  @include flex-center;
}

.column-container {
  @include flex-center(column);
}

4. 継承（@extend）

別のクラスやプレースホルダーのスタイルを引き継ぐことができます。

%btn-base {
  padding: 10px;
  border-radius: 4px;
}

.btn-primary {
  @extend %btn-base;
  background-color: blue;
  color: white;
}

5. 条件分岐（@if, @else if, @else）

変数の値でスタイルを切り替えるときに使います。

$theme: dark;

body {
  @if $theme == dark {
    background-color: #000;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #000;
  }
}

6. 繰り返し（@for, @each）

パターン化されたクラスを自動生成できます。

@for の例：

@for $i from 1 through 3 {
  .mt-#{$i} {
    margin-top: $i * 10px;
  }
}

@each の例：

$colors: red, green, blue;

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

7. 関数（@function）

カスタム計算処理を定義して、必要な場所で呼び出せます。

@function px-to-rem($px) {
  @return $px / 16 * 1rem;
}

h1 {
  font-size: px-to-rem(24);
}

8. モジュール読み込み（@use, @forward）

ファイルを分割して管理しやすくなります。

// _variables.scss
$main-color: #333;

// style.scss
@use 'variables';

h1 {
  color: variables.$main-color;
}

✅ まとめ

機能 キーワード 主な用途
変数 $変数名 色・サイズ・共通値の管理
ネスト セレクタ入れ子 階層構造を見やすく整理
ミックスイン @mixin, @include テンプレートスタイルの再利用
継承 @extend クラスのスタイル継承
条件分岐 @if, @else テーマ・状態で切り替え
繰り返し @for, @each パターン生成
関数 @function 自作計算
モジュール化 @use, @forward ファイル管理と再利用

このSCSS構文の活用により、スタイルの保守性・再利用性・開発効率が大きく向上します。


  1. ホーム
  2. プログラミングの覚書
  3. SCSSの覚書