11e. ProgateでSass(CSSをより便利に効果的に操作する言語)

Sass 学習コースⅠ(CSSをより便利に効果的に操作する言語)
完成版

Sass 学習コースⅠ(CSSをより便利に効果的に操作する言語)

・Sassとは
Sass(Syntactically Awesome StyleSheet)はCSS(Cascading Style Sheets)をより便利かつ効率的に書くことができる言語です。ファイル拡張子は.cssではなく.scssです。

・Sassを使うメリット

CSSより記述量を減らせる(入れ子構造)
コードを再利用できる(mixin)

・入れ子構造
Sassでは1つのセレクタの中に別のセレクタを入れ子にして指定することができます。

通常のCSS

/* stylesheet.css */
.header {
	width: 100%;
}
.header ul {				/* .headerを2回書かなければならない */
	padding: 10px;
}

Sassの場合

/* stylesheet.scss */
.header {
	width: 100%;

	ul {					/* .headerにあるulタグに対するCSS */
		padding: 10px;
	}
}

・&記号
入れ子構造を使用することによって、「セレクタ:hover」を「&:hover」に書き換えることができます。

通常のCSS

/* stylesheet.css */
li {
	font-size: 15px;
}
li:hover {
	background-color: red;
}

Sass

/* stylesheet.scss */
li {
	font-size: 15px;
	&:hover {					/* &:hoverと書き換えることができる */
		background-color: red;
	}
}

・特定要素の参照
HTML

<!-- index.html -->
<ul>
	<li>1</li>
	<li class="second">2</li>
	<li class="third">3</li>
</ul>

CSS

/* stylesheet.css */
li {
	font-size: 14px;
}
li.second

Sassの場合

/* stylesheet.css */
li {
	font-size: 14px;
	&.second {				/* 「li」の記述は1度でOK */
		color: red;
	}
}

・変数の使い方

/* stylesheet.scss */
$progate-color: #26546a;

h1 {
	color: $progate-color;		/* 定義した「#26546a」が代入される */
}
p {
	color: $progate-color;
}

・mixinとは
mixinとは、幾つかのコードを1つに纏めて、複数個所で簡単に呼び出すことができる機能です。

/* stylesheet.scss */
@mixin lesson-card {				/* 「mixin」を定義 */
	width: 300px;
	padding: 40px;
	background-color: #ffffff;
}
.lesson-1 {
	@include lesson-card;			/* 定義した「mixin」を呼び出す */
}
.lesson-2 {
	@include lesson-card;
}

・引数を使ってmixinにデータを渡す

/* stylesheet.scss */
@mixin font-data($color) {			/* 引数を変数に代入 */
	font-size: 14px;
	color: $color;
}
.card {
	@include font-data(#ff0000);		/* 引数を指定 */
}

・Sassで用意されている関数

/* stylesheet.scss */
color: darken(色, 50%);		/* 色を暗くする関数 */
color: lighten(色, 50%);		/* 色を明るくする関数 */
color: rgba(色, 0.5);		/* 色の不透明度を指定する関数 */

・import
「@import “ファイル名”」とすることで外部のファイルを読み込むことができます。

/* _colors.scss */				/* ファイル名の先頭に_(アンダーバー)を付ける */
$progate-color: #26546a;

/* stylesheet.scss */
@import "_colors.scss"			/* ファイルを読み込む */
p {
	color: $progate-color;
	font-size: 14px;
}

・importのよくある使い方
importのよくある使い方として、変数をまとめたファイルを作成し、使いたいファイル内で読み込むというものがあります。

/* _variables.scss */
$html: $1bd7cf;
$javascript: #ffe400;

/* stylesheet.scss */
@import "variables";			/* アンダーバーと拡張子を省略できる */
.html {
	background-color: $html;
}
.javascript {
	background-color: $javascript;
}

・引数を活用する

/* stylesheet.scss */
@mixin common($color) {				/* ②引数を変数に代入 */
	font-size: 14px;
	color: $color;
	background-color: $color;		/* ③変数を背景色に設定 */
}
.card {
	@include common(#ff0000);		/* ①引数を設定 */
}

・引数に変数を渡す

/* stylesheet.scss */
@mixin common($color) {				/* ③引数を変数に代入 */
	font-size: 14px;
	color: $color;
	background-color: $color;		/* ④変数を背景色に設定 */
}
$html:#1bd7cf;						/* ①変数を設定 */
.card {
	@include common($html);			/* ②引数に変数を設定 */
}

完成版

・index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>

  <body>
    <header>
      にんじゃわんこのホームページ
    </header>

    <div class="profile">
      <img class="profile-img" src="https://prog-8.com/images/sass/wanko.svg">
      <div class="info">
        <p>にんじゃわんこのホームページです！</p>
        <p>ぼくの勉強記録を公開しています。</p>
      </div>
    </div>

    <div class="html">				<!-- htmlクラスを追加 -->
      <h4>HTML & CSS</h4>
      <img src="https://prog-8.com/images/sass/html.svg">
      <a href="#">勉強記録をみる</a>
    </div>
    <div class="javascript">			<!-- javascriptクラスを追加 -->
      <h4>JavaScript</h4>
      <img src="https://prog-8.com/images/sass/javascript.svg">
      <a href="#">勉強記録をみる</a>
    </div>
    <div class="ruby">				<!-- rubyクラスを追加 -->
      <h4>Ruby</h4>
      <img src="https://prog-8.com/images/sass/ruby.svg">
      <a href="#">勉強記録をみる</a>
    </div>

    <footer>
      ©︎ ︎Ninjawanko
    </footer>
  </body>
</html>

・_variables.scss

/* 変数を定義 */
$html: #1bd7cf;
$javascript: #ffe400;
$ruby: #ff768a;

・stylesheet.scss

@import "variables";				/* 外部ファイルの読み込み */

@mixin card($color) {				/* mixinを定義 */
  padding: 40px 28px;
	margin: 16px 8px;
	display: inline-block;
	border-radius: 3px;
	background-color: $color;
	img {
		margin: 16px auto 20px;
		display: block;
	}
	a {
	  padding: 16px 32px;
		background-color: #ffffff;
		border-radius: 26px;
		display: inline-block;
		color: $color;
		&:hover {
			color: #ffffff;
			background-color: darken($color, 10%);
		}
	}
	h4 {
	  color: darken($color, 20%);
	}
}

body {   
  min-width: 700px;
	text-align: center;
	font-family: "Hiragino Kaku Gothic ProN";
	background-color: #f0f5fc;
}

header {
	width: 100%;
	padding: 10px 0;
	display: inline-block;
	background-color: #7579a3;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
}

.profile {
	padding: 56px 0;
	margin: 0 auto 32px;
	background-color: #ffffff;
	.info {
		margin-top: 16px;
		p {
			color: #2b546a;
		}
	}
}

.html {
  @include card($html);				/* 定義したmixinを呼び出す */
}

.javascript {
  @include card($javascript);
}

.ruby {
  @include card($ruby);
}

footer {
	margin: 100px 0 32px;
	color: #2b546a;
	font-size: 14px;
	text-align: center;
}