インストール

npm install -g sass

1、Sass変数の利用方法

Sassでは変数に$記号を使用します：

$変数名: 値;

$containerWidth: 760px;

.main-content {
  max-width: $containerWidth;
  margin: 0 auto;
}

2、Sassのネスト機能

ルールのネスト

以下にヘッダーメニューのスタイルをネストして記述する例を示します：

Sassコード：

.header {
  background-color: #333;
  
  &-nav {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    
    &-item {
      margin-left: 20px;
      
      &:first-child {
        margin-left: 0;
      }
    }
    
    &-link {
      color: white;
      text-decoration: none;
      transition: opacity 0.3s;
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
}

上記のSassコードが以下のCSSにコンパイルされます：

CSSコード：

.header {
  background-color: #333;
}
.header-nav {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}
.header-nav-item {
  margin-left: 20px;
}
.header-nav-item:first-child {
  margin-left: 0;
}
.header-nav-link {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s;
}
.header-nav-link:hover {
  opacity: 0.8;
}

プロパティのネスト

CSSプロパティには共通の接頭辞を持つものが多くあります（例：margin-top, margin-right, margin-bottom, margin-left）。

Sassでは、これらをネストして簡潔に記述できます：

Sassコード：
margin: {
  top: 10px;
  right: 15px;
  bottom: 10px;
  left: 15px;
}

display: {
  flex: flex;
  direction: row;
  justify: center;
}

上記のSassコードが以下のCSSにコンパイルされます：

CSSコード：

margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

display: flex;
flex-direction: row;
justify-content: center;

3、@importによるモジュール化

Sassの@import機能を使用すると、CSSの重複コードを減らし、開発時間を節約できます。

Sass @importディレクティブの構文： @import ファイル名;

4、@mixinと@includeの活用

Sassコード：

@mixin alert-style {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  color: #721c24;
}
.error-message {
  @include alert-style;
  font-weight: bold;
}

上記のSassコードが以下のCSSにコンパイルされます：

CSSコード：

.error-message {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  color: #721c24;
  font-weight: bold;
}

mixin内に別のmixinを含めることも可能です：

@mixin card-component {
  @include alert-style;
  @include shadow-effect;
  @include rounded-corners;
}

mixinはパラメータを受け取ることができます：

/* mixinが2つのパラメータを受け取る例 */
@mixin create-border($border-color, $border-width) {
  border: $border-width solid $border-color;
}
.card {
  @include create-border(#333, 2px);  // mixinを呼び出し、パラメータを渡す
}

上記のSassコードが以下のCSSにコンパイルされます：

CSSコード：

.card {
  border: 2px solid #333;
}

mixinのパラメータにはデフォルト値を設定することもできます：

@mixin button-style($bg-color, $text-color: white, $padding: 10px 20px) {
  background-color: $bg-color;
  color: $text-color;
  padding: $padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.primary-btn {
  @include button-style(#007bff);
}
.secondary-btn {
  @include button-style(#6c757d, #000);
}

可変引数

場合によっては、mixinや関数が受け取るパラメータの数が不定になることがあります。そのような場合、...を使用して可変引数を設定できます。

例えば、複数のbox-shadowを受け取るbox-shadow用のmixinは任意の数の引数を受け取ることができます。

@mixin multiple-box-shadows($shadows...) {
  -webkit-box-shadow: $shadows;
  -moz-box-shadow: $shadows;
  box-shadow: $shadows;
}
.card {
  @include multiple-box-shadows(0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1));
}

ブラウザプレフィックスのmixin ブラウザプレフィックスを付けるmixinも非常に便利です：

@mixin vendor-prefix($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  #{$property}: $value;
}
.animation-element {
  @include vendor-prefix(transform, rotate(15deg));
  @include vendor-prefix(transition, all 0.3s ease);
}

上記のSassコードが以下のCSSにコンパイルされます： CSSコード：

.animation-element {
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

5、@extendによるスタイルの継承

@extendディレクティブは、あるセレクタが別のセレクタからスタイルを継承することをSassに伝えます。

あるスタイルが他のスタイルとほぼ同じで、わずかな違いしかない場合、@extendは非常に役立ちます。

以下のSassの例では、基本的なボタンスタイル.base-buttonを作成し、その後、背景色とテキスト色が主な違いである2つのボタンスタイル.primary-buttonと.secondary-buttonを定義し、両方とも.base-buttonを継承しています。

Sassコード：

.base-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.primary-button {
  @extend .base-button;
  background-color: #4CAF50;
  color: white;
}
.secondary-button {
  @extend .base-button;
  background-color: transparent;
  color: #4CAF50;
  border: 1px solid #4CAF50;
}

上記のSassコードが以下のCSSにコンパイルされます：

CSSコード：

.base-button, .primary-button, .secondary-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.primary-button {
  background-color: #4CAF50;
  color: white;
}
.secondary-button {
  background-color: transparent;
  color: #4CAF50;
  border: 1px solid #4CAF50;
}

@extendを使用することで、HTMLのボタンタグで複数のクラス（例：class="base-button primary-button"）を指定する必要がなくなり、単一のクラス（例：class="primary-button"）を設定するだけで済むようになります。

@extendはコードの再利用を効果的に実現します。