会員限定 Sassの書き方

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

Sassの記述形式を確認したい方はこちら

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;
      } 
    } 
  }

この学習動画 / コンテンツの続きは

会員限定!

月額¥11,000税込/月が
今だけ30日間無料で使い放題!

会員登録はこちら