トップ > ★Sass > Sass - ネストを記述

Sass - ネストを記述

★Sass

記述演習

実際に記述してみる
  1. 「scss」フォルダーを作成
  2. フォルダー内に「style.scss」ファイルを作成

ルールのネスト（Nested Roles）

  • 入れ子構造を使うとクラス名の変更が楽になります
  • 子孫の関係をシンプルに記述することができます


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
  <h1>ページタイトル</h1>
</header><!-- /.header -->
<main class="main">
  <section class="content">
    <h2>見出し</h2>
    <p>テーマ内容段落</p>
    <p class="notes">注意書き</p>
    <ul>
      <li><a href="#">リスト</a></li>
      <li><a href="#">リスト</a></li>
      <li><a href="#">リスト</a></li>
    </ul>
  </section>
  <section class="content">
    <h2>見出し</h2>
    <p>テーマ内容段落</p>
  </section>
</main><!-- /.main -->
</body>
</html>


《style.scss》

/* ------------------------------------
  reset
------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* ------------------------------------
  body
------------------------------------ */
body {
  color: #333;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}

/* ------------------------------------
  layout
------------------------------------ */
.header {
  h1 {
    color: #999;
    margin-bottom: 20px;
  }
}
.main {
  .content {
    margin-bottom: 50px;
    padding: 20px;
    background-color: #d9ebff;
    h2 {
      margin-bottom: 16px;
      color: #164c8e;
      font-size: 24px;
    }
    p, ul {
      margin-bottom: 20px;
    }
    p.notes {
      color: #f00;
    }
  }
}
@media のネスト

《style.scss》

/* ------------------------------------
  reset
------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* ------------------------------------
  body
------------------------------------ */
body {
  color: #333;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}

/* ------------------------------------
  layout
------------------------------------ */
.header {
  h1 {
    color: #999;
    margin-bottom: 20px;
  }
}
.main {
	.content {
    margin-bottom: 50px;
    padding: 20px;
    background-color: #d9ebff;
		h2 {
      margin-bottom: 16px;
      color: #164c8e;
      font-size: 24px;
		}
    p, ul {
      margin-bottom: 20px;
    }
    p.notes {
      color: #f00;
    }
	}
  @media screen and (min-width: 640px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 960px;
    margin: 0 auto;
  }
}