【HTML５・CSS３】 Sassを攻略してコーディングを効率良く書こう！

1
2
3
4
5
6
7
8
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

1
2
3
4
5
6
7
8
ul {
  margin: 1em;

  li {
  padding-left: 1em;
  color: red;
  }
}

1
2
3
4
5
6
7
8
9
/* CSSの書き方 */
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

1
2
3
4
5
6
7
8
9
/* CSSの書き方 */
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

1
2
3
4
5
6
/* SASSの書き方 */
ul
  margin: 1em
  li
    padding-left: 1em
    color: red

1
2
3
4
5
6
7
8
9
/* CSSの書き方 */
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

1
2
3
4
5
6
7
8
9
/* SCSSの書き方 */
ul {
  margin: 1em;

  li {
  padding-left: 1em;
  color: red;
  }
}

1
2
3
4
5
<ul class="parent">
  <li class="child">テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

1
2
3
4
5
6
7
.parent {
  color: red;
}

.parent .child {
  color: blue;
}

1
2
3
4
5
6
7
.parent {
  color: red;

  .child {
    color: blue;    
  }
}

1
<div class="content">中身</div>

1
2
3
4
5
.content {
  background-color: red;
  padding-top: 1em;
  padding-left: 2em;
}

1
2
3
4
5
6
7
.content {
  background-color: red;
  padding: {
    top: 1em;
    left: 2em;
  }
}

1
2
3
4
5
<ul>
  <li><a href="#">テキスト1</a></li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

1
2
3
4
5
6
a {
  text-decoration: none;
}
a:hover { /* ホバー時に色を変更する */
  color: green;
}

1
2
3
4
5
6
7
a {
  text-decoration: none;

  &:hover { /* &は親セレクタのaを参照する */
    color: green;
  }
}

1
2
3
4
<form class="form">
  <input type="text" class="form__text">
  <input type="submit" class="form__button">
</form>

1
2
3
4
5
6
7
8
9
10
.form {
  &__text { /* &はformを参照するので form__textになる */
    font-size: 18px;
  }

  &__button { /* &はformを参照するので form__buttonになる */
    color: white;
    background-color: blue;
  }
}

1
2
3
4
5
6
7
.form__text {
  font-size: 18px;
}
.form__button {
  color: white;
  background-color: blue;
}

1
2
3
4
5
/* 変数の定義 */
$変数名: 値

/* 変数を使う */
$変数名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 共通で使うカラーを定義 */
$color-main: #ff00ff;

a{
  text-decoration: none;

  &:hover {
    color: $color-main;
  }

  &::before {
    color: $color-main;
    content: "★";
  }
}

1
2
3
4
5
6
7
8
9
10
11
a {
  text-decoration: none;
}
a:hover {
  color: #ff00ff;
}
a::before {
  color: #ff00ff;
  content: "★";
}

1
2
3
4
.box {
    height:20px * 2;
    width:100px - 20px;
}

1
2
3
4
5
.box {
  /* プロパティ値が演算結果の値になる */
  height: 40px;
  width: 80px;
}

1
2
3
4
5
  /* 除算は丸括弧()で囲む */
.box {
    height:20px * 2;
    width:(1000px / 3);
}

1
2
3
4
.box {
  height: 40px;
  width: 333.3333333333px;
}

1
<div class="box"></div>

1
2
3
4
5
.box{
  background-color: mix(#000, #fff, 50%);
  height: 100px;   
  width: 100px;
}

1
2
3
4
5
6
7
8
/* 変数で定義 */
$base-color1: #000;
$base-color2: #fff;

.box{
  background-color: mix($base-color1, $base-color2, 50%);
  /* 中略 */
}

1
2
3
4
5
6
7
/* 関数を定義する */
@function 関数名(引数) {
    @return 戻り値;
}

/* 関数の呼び出し */
関数名(引数);

1
2
3
4
5
6
7
@function sample($value) {
    @return $value / 2;
}

div {
    width: sample(100px);
}

1
2
3
div {
  width: 50px;
}

1
2
3
4
5
6
7
8
9
10
11
/* 定義 */
@mixin common-box {
    background-color: #222;
    color: #eee;
}

.menu {
    /* 定義したミックスインを埋め込み */
    @include common-box;
    padding: 10px;
}

1
2
3
4
5
6
.menu {
  background-color: #222;
  color: #eee;
  padding: 10px;
}

1
2
3
4
5
6
7
8
9
10
@mixin box($background-color, $color) {
    background-color: $background-color;
    color: $color;
}

.menu {
    /* 引数に値を指定する */
    @include box(#222, #eee);
    padding: 10px;
}

1
2
/* @extend セレクタ名; */
@extend .sample;

1
2
3
4
5
6
7
8
9
10
11
.base-content {
  border: 1px solid grey;
  font-size: 20px;
  padding: 20px;
  width: 200px;
}

.content1 {
  @extend .base-content; /* .base-contentを継承する */
  border-color: red; /* borderの色だけgreyからredに変更したい*/
}

1
2
3
4
5
6
7
8
9
10
.base-content, .content1 { /*同じスタイルはまとめられる*/
  border: 1px solid grey;
  font-size: 20px;
  padding: 20px;
  width: 200px;
}

.content1 { /*独自で定義したスタイルは個別に記述される*/
  border-color: red;
}

1
2
3
4
/* .sampleにプレースホルダーセレクタを使う場合 */
%sample {
  color: red;
}

1
2
3
4
5
6
7
8
9
10
11
%base-content { /* .base-contentから%base-contentに変更 */
  border: 1px solid grey;
  font-size: 20px;
  padding: 20px;
  width: 200px;
}

.content1 {
  @extend %base-content; /* ここも%base-contentに変更 */
  border-color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 /* 全てのボタンのベースのスタイルを設定 */
.base-button {
  border-style: solid;
  display: inline-block;
}

/* buttonに関連性があるので、@extendで.base-buttonを継承出来る*/
.green-button {
  @extend %base-button;
  background: green;
}

/* .base-buttonのスタイルを使いたいが、関連性がないので@extendで継承しない！*/
.footer {
  background: grey;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* フォントのベースのスタイルを設定 */
@mixin base-font {
  color: #575f74;
  font-family: sans-serif;
}

.nav {
  @include base-font;
}

.header {
  @include base-font;
}

.footer {
  @include base-font 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin base-font($color) {
  color: $color;
  font-family: sans-serif;
}

.nav {
  @include base-font(#575f74);
}

.sidber {
  @include base-font(#4b505e); 
}

.footer {
  @include base-font(#474a52);
}

1
2
3
4
5
/*  ファイルをインポートする  */
@import "ファイル名.scss"; 

/* 拡張子は省略可能なので、下記でも良い*/
@import "ファイル名"; 

1
2
3
/* 色をまとめたファイル */
$base-black: #383838;
$base-write: #fff;

1
2
3
4
5
6
7
/* 拡張子は省略可能 */
@import "color.scss";

/* color.scssで定義したカラーを利用する */
main {
  color: $base-black;
}

1
2
3
main {
  color: #383838; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.nourth-intersection {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
      opacity: 1; //赤色だけ追加
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@mixin current-signal($color) {
/* nourth-intersectionクラスは信号クラスを定義するクラスではないので
mixinには含めません。*/
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
    }
  }
  //ここから追加
  @if $color == red {
    .red-signal {
      opacity: 1 !important;
    }
  } @else if $color == yellow {
    .yellow-signal {
      opacity: 1 !important;
    }
  } @else if $color == blue {
    .blue-signal {
      opacity: 1 !important;
    } 
  } @else {
    .signal-child {
      opacity: 1 !important;
    }
  }
}

// @mixinで定義したスタイルを@includeで呼び出す
.nourth-intersection {
  @include current-signal(red);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.signal {
  height: 100px;
  width: 300px;
  background-color: gray;
  display: flex;
  .signal-child {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.2;
  }
  .red-signal {
    background-color: red;
  }
  .yellow-signal {
    background-color: yellow;
  }
  .blue-signal {
    background-color: blue;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@mixin current-signal($color) {
  @if $color == red {
    .red-signal {
      opacity: 1 !important;
    }
  } @else if $color == yellow {
    .yellow-signal {
      opacity: 1 !important;
    }
  } @else if $color == blue {
    .blue-signal {
      opacity: 1 !important;
    } 
  } @else {
    .signal-child {
      opacity: 1 !important;
    }
  }
}

.nourth-intersection {
  @include current-signal(red);
}

1
2
3
4
5
6
7
8
9
10
11
12
// before
.nourth-intersection {
  @include current-signal(red);は以下のスタイルに置き換わる
}

// after
.nourth-intersection {
  // @include current-signal(red);は以下のスタイルに置き換わる
  .red-signal {
    opacity: 1 !important;
  }
}

1
2
3
.nourth-intersection .red-signal {
  opacity: 1 !important;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@mixin current-signal($color) {
  @if $color == red {
    .red-signal {
      opacity: 1 !important;
    }
  } @else if $color == yellow {
    .yellow-signal {
      opacity: 1 !important;
    }
  } @else if $color == blue {
    .blue-signal {
      opacity: 1 !important;
    } 
  } @else {
    .signal-child {
      opacity: 1 !important;
    }
  }
}

.nourth-intersection {
  @include current-signal(yellow);
}

1
2
3
.nourth-intersection .yellow-signal {
  opacity: 1 !important;
}

1
2
3
.nourth-intersection {
  @include current-signal(all);
}

1
2
3
.nourth-intersection .signal-child {
  opacity: 1 !important;
}

1
2
3
4
.nourth-intersection {
  // Error: Missing argument $color.とエラーが出る
  @include current-signal();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// デフォルト引数にblueを指定
@mixin current-signal($color: blue) {
  @if $color == red {
    .red-signal {
      opacity: 1 !important;
    }
  } @else if $color == yellow {
    .yellow-signal {
      opacity: 1 !important;
    }
  } @else if $color == blue {
    .blue-signal {
      opacity: 1 !important;
    } 
  } @else {
    .signal-child {
      opacity: 1 !important;
    }
  }
}

.nourth-intersection {
  @include current-signal();
}

1
2
3
.nourth-intersection .blue-signal {
  opacity: 1 !important;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@mixin current-signal($color) {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
    }
  }
  @if $color == red {
    .red-signal {
      opacity: 1 !important;
    }
  } @else if $color == yellow {
    .yellow-signal {
      opacity: 1 !important;
    }
  } @else if $color == blue {
    .blue-signal {
      opacity: 1 !important;
    } 
  } @else {
    .signal-child {
      opacity: 1 !important;
    }
  }
}

.nourth-intersection {
  @include current-signal(red);
}

1
2
3
4
5
6
.signal-child {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.2;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="nourth-intersection">
    <p>北交差点</p>
    <div class="signal">
      <div class="signal-child red-signal"></div>
      <div class="signal-child yellow-signal"></div>
      <div class="signal-child blue-signal"></div>
    </div>
</div>

<!--ここから追加-->
<div class="east-intersection">
    <p>東交差点</p>
    <div class="signal">
      <div class="signal-child red-signal"></div>
      <div class="signal-child yellow-signal"></div>
      <div class="signal-child blue-signal"></div>
    </div>    
</div>

<div class="south-intersection">
    <p>南交差点</p>
    <div class="signal">
      <div class="signal-child red-signal"></div>
      <div class="signal-child yellow-signal"></div>
      <div class="signal-child blue-signal"></div>
    </div>    
</div>

<div class="west-intersection">
    <p>西交差点</p>
    <div class="signal">
      <div class="signal-child red-signal"></div>
      <div class="signal-child yellow-signal"></div>
      <div class="signal-child blue-signal"></div>
    </div>    
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@mixin current-signal($color: blue) {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
    }
  }
  @if $color == red {
    .red-signal {
      opacity: 1 !important;
    }
  } @else if $color == yellow {
    .yellow-signal {
      opacity: 1 !important;
    }
  } @else if $color == blue {
    .blue-signal {
      opacity: 1 !important;
    } 
  } @else {
    .signal-child {
      opacity: 1 !important;
    }
  }
}
.nourth-intersection {
  @include current-signal(red);
}
// ここから追加
.east-intersection {
  @include current-signal(yellow);
}
.south-intersection {
  @include current-signal();
}
.west-intersection {
  @include current-signal(all);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
.north-intersection {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
      opacity: 1;
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
    }
  }
}

.east-intersection {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
    }
    .yellow-signal {
      background-color: yellow;
      opacity: 1;
    }
    .blue-signal {
      background-color: blue;
    }
  }
}

.south-intersection {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 0.2;
    }
    .red-signal {
      background-color: red;
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
      opacity: 1;
    }
  }
}

.west-intersection {
  .signal {
    height: 100px;
    width: 300px;
    background-color: gray;
    display: flex;
    .signal-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: 1;
    }
    .red-signal {
      background-color: red;
    }
    .yellow-signal {
      background-color: yellow;
    }
    .blue-signal {
      background-color: blue;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.nourth-intersection {
  @include current-signal(red);
}

.east-intersection {
  @include current-signal(yellow);
}

.south-intersection {
  @include current-signal(blue);
}

.west-intersection {
  @include current-signal(all);
}