Sassの書き方

「Sassとは？」のステップで、SassにはSass（インデント形式）とSCSS（波括弧形式）の2つの記述形式があると紹介しました。デザデジでは、CSSに近い記述ができるSCSS形式を採用しており、「Sassの書き方」以降のステップではSCSSを使って進めていきます。

Sassの基本的な書き方

SCSSでは、スタイルを入れ子構造（ネスト）で記述します。
これにより、親子関係がわかりやすく整理でき、通常のCSSよりも直感的で見やすくなります。

通常のCSSでは、親要素と子要素を個別に記述しますが、SCSSでは親要素の中に子要素を入れ子にして書けるため、より効率的にスタイルを管理できます。

CSSの場合

.nav {
  background-color: #333;
}

.nav a {
  color: white;
  text-decoration: none;
}

.nav a:hover {
  color: #ff6347;
}

SCSSの場合

.nav { 
  background-color: #333;  

  a { 
    color: white; 
    text-decoration: none;  

    &:hover { 
      color: #ff6347;
    } 
  } 
}

SCSSには、いくつかセレクタを参照する方法があります。
以下は基本的なSCSSの例となります。

通常の子セレクタのネスト
子要素は、親要素の中にネストして書くことで、親子関係を視覚的に整理できます。
&（アンパサンド）を使わず、通常のセレクタをそのままネストします。
```
.nav { 
  background-color: #333;  

  .item { 
    color: white; 
    padding: 10px;
  }
}
```
この場合では、.nav .itemにスタイルが適用されます。
&（アンパサンド）を使って参照する方法
&（アンパサンド）は親セレクタを参照するために使います。
親セレクタの一部を再利用したり、状態や疑似クラスを追加することができます。
```
.nav { 
  background-color: #333;  
  
  a { 
    color: white; 
    text-decoration: none;  
    
    &:hover {  // 親セレクタ（.nav a）のhover状態を指定
      color: #ff6347;
    }

    &.is-active {  // 親セレクタ（.nav a）のis-activeクラスを指定
      color: #ff6347;
    }
  } 
}
```
この場合では、&:hoverと&.is-activeを使って、aタグに対してhover状態や.is-activeクラスが追加された状態を指定しています。&を使うことで、親セレクタ（.nav a）に続けて状態やクラスを簡単に追加できます。

以上が、「Sassの書き方」についての説明でした。
SCSSを使うことで、複雑なレイアウトやスタイルを効率よく作成でき、スタイルシートの保守性も向上します。基本的な書き方を覚えて、実際にコードを書いてみることで、さらに理解を深めることができます。

次のステップで、「ブラウザで表示」について説明していきます。

Sassコーディング

全 9 動画

jQuery