コンテンツにスキップ

SASS

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

SASSの基本

[編集]

SASSとは何か

[編集]

SASS（Syntactically Awesome Style Sheets）は、CSS（Cascading Style Sheets）をより効率的に、そして強力にするためのスタイルシート言語です。CSSの機能を拡張し、再利用可能なスタイルを簡単に作成できるようにします。

SASSの歴史と背景

[編集]

SASSは2006年にハンプトン・キャトリン（Hampton Catlin）によって初めて開発されました。SASSの目的は、CSSをより強力で柔軟な言語にすることでした。その後、SASSは数多くのアップデートを経て、現在の安定したバージョンに至っています。

CSSとの違いとメリット

[編集]

SASSはCSSのスーパーセットとして機能し、以下のような機能を提供します：

変数
色やサイズなどの値を変数として定義できます。
ネスト
CSSルールをネストさせて、コードの可読性を向上させます。
ミックスイン
再利用可能なコードブロックを定義できます。
継承
他のセレクタからスタイルを継承できます。
関数
カスタム関数を定義して、複雑な計算や操作を簡略化できます。

SASSのインストール

[編集]

SASSを利用するためには、まずSASSコンパイラをインストールする必要があります。以下に、主要なインストール方法を紹介します。

Ruby版SASSのインストール

[編集]

Rubyがインストールされている環境であれば、以下のコマンドでSASSをインストールできます： 

gem install sass

Dart版SASSのインストール

[編集]

Dart版SASSは、公式に推奨されているSASSコンパイラです。以下のコマンドでインストールできます： 

npm install -g sass

SASSコンパイラの選択

[編集]

SASSコンパイラには複数の選択肢がありますが、以下の3つが一般的です：

CLI（Command Line Interface）
コマンドラインから直接SASSファイルをコンパイルできます。
Node-SASS
Node.js環境でSASSを使用するためのパッケージです。
Dart-SASS
Dart言語で書かれたSASSコンパイラで、現在最も推奨されています。

基本文法

[編集]

変数

[編集]

SASSでは、変数を使って値を再利用することができます。変数はドル記号（`$`）で始まり、以下のように定義します： 

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

SCSS記法とSASS記法

[編集]

SCSS記法とSASS記法は、どちらもCSSの拡張言語であり、同じ言語でありながら構文が異なります。

SCSS記法は、CSSと似た構文を持ち、中括弧（{}）やセミコロン（;）などの一般的なCSSの構文を使用します。また、変数や関数、条件分岐、ループなどのプログラミング言語のような機能を使用することができます。

例えば、以下はSCSSの変数を使用した例です。

nest-sample.scss
$primary-color: #007bff;

.nav {
  display: flex;
  li {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
    a {
      color: $primary-color;
    }
  }
}

一方、SASS記法は、インデントによって階層を表現し、中括弧やセミコロンを使用しません。

例えば、以下はSASS記法の例です。

nest-sample.sass
$primary-color: #007bff

.nav
  display: flex
  li
    margin-right: 10px
    &:last-child
      margin-right: 0
      a
        color: $primary-color

どちらの記法も、CSSを拡張するための強力な機能を提供し、個人の好みに応じて選択することができます。

ネスト

[編集]

ネストを使用すると、スタイルルールを入れ子にして記述できます。これにより、関連するスタイルをグループ化し、コードの可読性が向上します： 

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

パーシャルとインポート

[編集]

パーシャルは、再利用可能なスタイルを別ファイルに分割するための機能です。パーシャルファイルはアンダースコア（`_`）で始まります：

_reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

これをメインのスタイルシートにインポートします： 

@import 'reset';

ミックスイン

[編集]

SASSでは、ミックスインという機能を使って、再利用可能なスタイルを定義することができます。ミックスインは、@mixinを使って定義します。 

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
@mixinでborder-radiusというミックスインを定義しています。このミックスインは、引数として半径を与え各種プリフィックスのついたborder-radius関連のプロパティを出力します。

継承

[編集]

継承を使うと、一つのセレクタから別のセレクタにスタイルを継承させることができます： 

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message { @extend %message-shared; }
.alert   { @extend %message-shared; }
.success { @extend %message-shared; }

高度な機能

[編集]

関数

[編集]

SASSでは、カスタム関数を定義して使用することができます。また、組み込み関数も豊富に提供されています： 

@function pow($base, $exponent) {
  @return $base * $base * $exponent;
}

.result {
  width: pow(2, 3) * 1px;
}

組み込み関数の例： 

$color: rgba(255, 0, 0, 0.5);

.button {
  background-color: lighten($color, 10%);
  border-color: darken($color, 10%);
}

制御指示

[編集]

SASSでは、制御構文を使用して条件分岐や繰り返し処理ができます。

条件分岐

[編集]
@mixin respond-to($media) {
  @if $media == 'phone' {
    @media (max-width: 600px) { @content; }
  } @else if $media == 'tablet' {
    @media (max-width: 900px) { @content; }
  }
}

.container {
  @include respond-to('phone') {
    background-color: red;
  }
}

繰り返し

[編集]
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }
}

$map: (primary: #c6538c, secondary: #6538c6);

@each $name, $color in $map {
  .#{$name} { color: $color; }
}

リストとマップ

[編集]

リストやマップを使って、データを簡単に管理できます。

リストの操作

[編集]
$font-stack: Helvetica, sans-serif, Arial;

h1 {
  font-family: nth($font-stack, 1);
}

h2 {
  font-family: nth($font-stack, 2);
}

マップの操作

[編集]
$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.button {
  background-color: map-get($theme-colors, primary);
}

実践的な使用例

[編集]

プロジェクト構造

[編集]

効果的なSASSファイルの構造と管理方法を紹介します。プロジェクトのスケールに応じて適切なファイル構成を選択します。

リセットとノーマライズ

[編集]

リセットCSSやノーマライズCSSを使って、ブラウザ間のスタイルの一貫性を保ちます。 

@import 'reset';
@import 'normalize';

モジュール設計

[編集]

モジュール化されたスタイルシートを作成し、再利用性とメンテナンス性を向上させます。 

@import 'base';
@import 'layout';
@import 'components';
@import 'utilities';

レスポンシブデザイン

[編集]

メディアクエリを使って、レスポンシブデザインを実現します。 

@mixin respond-to($media) {
  @if $media == 'small' {
    @media (max-width: 600px) { @content; }
  } @else if $media == 'medium' {
    @media (max-width: 900px) { @content; }
  } @else if $media == 'large' {
    @media (max-width: 1200px) { @content; }
  }
}

.container {
  @include respond-to('small') {
    background-color: red;
  }
  @include respond-to('medium') {
    background-color: blue;
  }
  @include respond-to('large') {
    background-color: green;
  }
}

ツールとワークフロー

[編集]

タスクランナー

[編集]

タスクランナーを使うことで、SASSファイルのコンパイルやその他のタスクを自動化できます。

Gulpを使った自動化

[編集]
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

Gruntを使った自動化

[編集]
module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      dist: {
        files: [{
          expand: true,
          cwd: 'src/scss',
          src: ['**/*.scss'],
          dest: 'dist/css',
          ext: '.css'
        }]
      }
    },
    watch: {
      css: {
        files: 'src/scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['watch']);
};

プリプロセッサ統合

[編集]

WebpackやParcelなどのモジュールバンドラとSASSを統合して使用することで、プロジェクトのビルドプロセスを効率化します。

WebpackとSASSの統合

[編集]
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    })
  ]
};

ParcelとSASSの統合

[編集]

Parcelは特別な設定ファイルを必要とせず、`.scss`ファイルをインポートするだけでSASSをコンパイルできます。 

// styles.scss
body {
  color: red;
}

// index.js
import './styles.scss';

デバッグと最適化

[編集]

ソースマップを使用すると、コンパイルされたCSSと元のSASSファイルとの対応関係を維持し、デバッグを容易にします。 

// コマンドラインでのソースマップ有効化
sass --watch src/styles.scss:dist/styles.css --source-map

コンパイルエラーのデバッグには、エラーメッセージを確認し、問題のある箇所を特定します。また、SASSコンパイラが提供する警告やヒントを活用して、コードの品質を向上させます。

ベストプラクティス

[編集]

コードスタイルガイド

[編集]

一貫性のあるコードスタイルを確立することで、チーム全体でのコラボレーションを容易にし、コードの可読性を向上させます。

コードスタイルガイドの例

[編集]
// 変数の定義
$primary-color: #3498db;
$secondary-color: #2ecc71;

// ネストされたセレクタ
.nav {
  background-color: $primary-color;

  .nav-item {
    color: $secondary-color;
  }
}

// ミックスインの使用
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.1));
}

パフォーマンスの考慮

[編集]

高速なスタイルシートを作成するためには、以下の点に注意します：

不要なネストを避ける
深いネストはスタイルシートのパフォーマンスを低下させる可能性があります。
再利用可能なコードの作成
ミックスインや関数を活用して、重複したコードを避けます。
軽量なセレクタの使用
セレクタの特異性を低く保つことで、ブラウザのレンダリングを最適化します。

アクセシビリティ

[編集]

アクセシブルなスタイルシートを作成するためには、以下の点に注意します：

色のコントラスト
テキストと背景のコントラストを十分に確保します。
フォーカススタイル
フォーカス状態を視覚的に識別しやすくするスタイルを適用します。
リーダブルなフォントサイズ
可読性の高いフォントサイズを設定します。

メンテナンスとスケーラビリティ

[編集]

大規模プロジェクトでのSASSの運用においては、コードのメンテナンス性とスケーラビリティを確保することが重要です。

モジュール化と命名規則

[編集]
// モジュールの分割
@import 'base/variables';
@import 'base/mixins';
@import 'components/button';
@import 'layouts/header';
@import 'pages/homepage';

// 命名規則の例（BEM）
.button {
  &__text {
    color: white;
  }

  &--primary {
    background-color: $primary-color;
  }
}

ドキュメント化

[編集]

コードのコメントやドキュメントを充実させることで、他の開発者が理解しやすいスタイルシートを作成します。

附録

[編集]

SASSリファレンス

[編集]

主要なSASS機能とその使用方法をリファレンスとしてまとめます。

変数の定義と使用

[編集]
$font-size: 16px;
$line-height: 1.5;

ミックスインの定義と使用

[編集]
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

関数の定義と使用

[編集]
@function rem($pixels) {
  @return $pixels / 16px * 1rem;
}

body {
  font-size: rem(16px);
}

トラブルシューティングガイド

[編集]

よくある問題とその解決方法をまとめます。

コンパイルエラー

[編集]
// エラーメッセージの例
Error: Undefined variable: "$undefined-variable".

// 解決方法
// 変数が定義されているか確認し、誤字やスペルミスを修正します。

ネストの深さによるパフォーマンス低下

[編集]
// 深すぎるネストの例
.container {
  .item {
    .element {
      color: red;
    }
  }
}

// 解決方法
// ネストを浅くし、セレクタの特異性を低く保ちます。
.container .item .element {
  color: red;
}

外部リンク

[編集]
Wikipedia
Wikipedia
 ウィキペディアにSassの記事があります。
"https://ja.wikibooks.org/w/index.php?title=SASS&oldid=251973" より作成