求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

Sassで最低限知っておくべき記述演習

Sassで記述演習

f:id:web-0220:20190217185644p:plain

  • Preprosを起動
  • 管理するフォルダーを指定する
  • テキストエディターで、管理するフォルダー内に「SCSSファイル」を作成します

実践

  • テキストLESSON28からのコーディングで使用します
管理フォルダー作成
  • 「CafeLeaf」フォルダー内に練習用のフォルダーを作成します(例:ex0218)
実際に記述してみる
  • 「scss」フォルダーを作成
  • 中に「sample.scss」ファイル作成

f:id:web-0220:20190217230851g:plain

内容を記述して保存すると、自動的にコンパイルされて「CSS」ファイルが作成されます。

記述演習

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ルールのネスト</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900|Sigmar+One&amp;subset=japanese" rel="stylesheet"> 
<link rel="stylesheet" href="css/sample.css">
</head>
<body>
<div class="container">

<header class="header">
  <h1><span class="star"></span>うちのにゃんこ<span class="star"></span></h1>
  <p class="lead">我が家のアイドル、にゃんこ達を紹介します!</p>
</header><!-- /.header -->

<nav class="nav">
  <ul class="gnav">
  <li><a href="#">我が家のにゃんこ紹介</a></li>
  <li><a href="#">飼い主紹介</a></li>
  <li><a href="#">猫写真募集</a></li>
  </ul>
</nav><!-- /.nav -->

</div><!-- /.container -->
</body>
</html>
ルールのネストと親セレクタの参照 &(アンパサンド)
  • セレクタのあとの「{ }」の中に次のルールを記述していきます
  • 「&」を書くことで親セレクタを参照できます
a {
  text-decoration: none;
  color: #DF4839;
  &:hover {
    color: #FF705B;
    text-decoration: underline;
  }
}
プロパティのネスト
  • ハイフンがあるプロパティは、すべてネストできる
/* header
------------------------------------- */
.header {
  h1 {
    color: #6FBB9A;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    & .star {
      color: #D0E35b;
    }
  }
  .lead {
    margin-bottom: 30px;
    padding: 15px;
    text-align: center;
    border: {
      top: 1px dotted #6FBB9A;
      bottom: 1px dotted #6FBB9A;
    }
  }
}
@mediaのネスト
  • モバイルの指定のあとにPC用を記述することができるため、見やすくなります
/* layout
------------------------------------- */
.container {
  width: 92%;
  margin: 20px auto;
  padding: 10px 2%;
  background: #FFF;
  @media screen and (min-width: 768px) {
    width: 960px;
    margin: 40px auto;
    padding: 40px 80px;
    border: 1px solid #F6BB9E;
    box-sizing: border-box;
  }
}
変数(Variables)
/* header
------------------------------------- */
.header {
  $bluegreen: #6FBB9A;
  $mb30: 30px;
  h1 {
    color: $bluegreen;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: $mb30;
    & .star {
      color: #D0E35b;
    }
  }
  .lead {
    margin-bottom: $mb30;
    padding: 15px;
    text-align: center;
    border: {
      top: 1px dotted $bluegreen;
      bottom: 1px dotted $bluegreen;
    }
  }
}
/* body
------------------------------------- */
body {
  $IMG_PATH: '../img/';
  background: #FBF9CC url(#{$IMG_PATH}bg-stripe01.png) repeat-x;
  font-size: 1.6rem;
  font-family:
    -apple-system, BlinkMacSystemFont,
    'Noto Sans JP', sans-serif;
}