第5章現場で使える実践Sassテクニック5-2 レイアウト・パーツで使えるテクニックSample Code

clearfix をミックスインで活用する

1
@mixin clearfix {
2
  &::after {
3
    content: "";
4
    display: block;
5
    clear: both;
6
  }
7
}

1
@use "mixin" as *;
2

3
.item {
4
  @include clearfix;
5
}

1
.item::after {
2
  content: "";
3
  display: block;
4
  clear: both;
5
}

nullで簡単に条件分岐をしてレイアウトをする

1
$height: false;
2

3
.item {
4
  width: 500px;
5
  @if $height {
6
    height: $height;
7
  }
8
}

1
.item {
2
  width: 500px;
3
}

1
// 高さが必要な場合は値を単位付きで。不要な場合はnull。
2
$height: null;
3

4
.item {
5
  width: 500px;
6
  height: $height;
7
}

1
.item {
2
  width: 500px;
3
}

1
@mixin itemBox ($width, $height, $margin:null, $padding:null) {
2
  width: $width;
3
  height: $height;
4
  margin: $margin;
5
  padding: $padding;
6
}
7

8
.itemA {
9
  // 不要なプロパティはnull。
10
  @include itemBox(100px, null, 10px, 20px);
11
}
12
.itemB {
13
  @include itemBox(null, auto, 20px auto);
14
}

1
.itemA {
2
  width: 100px;
3
  margin: 10px;
4
  padding: 20px;
5
}
6

7
.itemB {
8
  height: auto;
9
  margin: 20px auto;
10
}

1
$duration: null;
2

3
a {
4
  transition: all $duration linear;
5
}

1
a {
2
  transition: all linear;
3
}

calc()とSassを組み合わせて四則演算を便利に使う

1
.item {
2
  width: calc(100% - 1px * 2);
3
}

1
.item {
2
  width: calc(100% - 1px * 2);
3
}

1
$border: 1px;
2
.item {
3
  width: calc(100% - $border * 2);
4
}

1
.item {
2
  width: calc(100% - $border * 2);
3
}

1
$border: 1px;
2
.item {
3
  width: calc(100% - #{$border} * 2);
4
}

1
.item {
2
  width: calc(100% - 1px * 2);
3
}

1
$border: 100px - 1px * 2;
2
.item {
3
  width: calc(#{$border});
4
}

1
.item {
2
  width: calc(98px);
3
}

1
$border: "100px - 1px * 2";
2
.item {
3
  width: calc(#{$border});
4
}

1
.item {
2
  width: calc(100px - 1px * 2);
3
}

1
$box: "100px - 1px * 2";
2
$contents: "100% - 20px";
3
.item {
4
  width: calc(#{$contents} - #{$box});
5
}

1
.item {
2
  width: calc(100% - 20px - 100px - 1px * 2);
3
}

@for を使って余白調整用のclassを生成する

1
$spaceClass: true !default;
2
$spacePadding: false !default;
3
$endValue: 10 !default;
4

5
@if $spaceClass {
6
  @for $i from 0 through $endValue {
7
    .mt#{$i * 5} {
8
      margin-top: 5px * $i !important;
9
    }
10
    .mb#{$i * 5} {
11
      margin-bottom: 5px * $i !important;
12
    }
13
    @if $spacePadding {
14
      .pt#{$i * 5} {
15
        padding-top: 5px * $i !important;
16
      }
17
      .pb#{$i * 5} {
18
        padding-bottom: 5px * $i !important;
19
      }
20
    }
21
  }
22
}

1
.mt0 {
2
  margin-top: 0px !important;
3
}
4

5
.mb0 {
6
  margin-bottom: 0px !important;
7
}
8

9
.mt5 {
10
  margin-top: 5px !important;
11
}
12

13
.mb5 {
14
  margin-bottom: 5px !important;
15
}
16

17
...（略）...
18

19
.mt50 {
20
  margin-top: 50px !important;
21
}
22

23
.mb50 {
24
  margin-bottom: 50px !important;
25
}

リストマーカー用の連番を使ったclass名を作成する

1
%markBase {
2
  padding-left: 15px;
3
  background-position: 0em .5em;
4
  background-repeat: no-repeat;
5
}
6

7
@for $i from 1 through 3 {
8
  .mark_#{$i} {
9
    @extend %markBase;
10
    background-image: url(../img/mark_#{$i}.png);
11
  }
12
}

1
.mark_3, .mark_2, .mark_1 {
2
  padding-left: 15px;
3
  background-position: 0em 0.5em;
4
  background-repeat: no-repeat;
5
}
6

7
.mark_1 {
8
  background-image: url(../img/mark_1.png);
9
}
10

11
.mark_2 {
12
  background-image: url(../img/mark_2.png);
13
}
14

15
.mark_3 {
16
  background-image: url(../img/mark_3.png);
17
}

連番を使ったclass名のゼロパディング（0埋め）をする

1
@for $i from 1 through 15 {
2
  $tmp: if(
3
    $i < 10, "0#{$i}", "#{$i}"
4
  );
5
  .mark_#{$tmp} {
6
    background-image: url(../img/mark_#{$tmp}.png);
7
  }
8
}

1
.mark_01 {
2
  background-image: url(../img/mark_01.png);
3
}
4

5
.mark_02 {
6
  background-image: url(../img/mark_02.png);
7
}
8

9
...（略）...
10

11
.mark_14 {
12
  background-image: url(../img/mark_14.png);
13
}
14

15
.mark_15 {
16
  background-image: url(../img/mark_15.png);
17
}

文字リンクカラーのミックスインを作る

1
@mixin link-color($normal, $hover) {
2
  color: $normal;
3
  &:hover {
4
    color: $hover;
5
    text-decoration: none;
6
  }
7
}
8

9
a {
10
  @include link-color(#f00, #00f);
11
}

1
a {
2
  color: #f00;
3
}
4
a:hover {
5
  color: #00f;
6
  text-decoration: none;
7
}

1
$normal: #f00;
2
$hover: #00f;
3

4
@mixin link-color($n:$normal, $h:$hover) {
5
  color: $n;
6
  &:hover {
7
    color: $h;
8
    text-decoration: none;
9
  }
10
}
11

12
a {
13
  @include link-color;
14
}

1
a {
2
  color: #f00;
3
}
4
a:hover {
5
  color: #00f;
6
  text-decoration: none;
7
}

1
@use 'sass:color';
2

3
@mixin link-color2($n) {
4
  color: $n;
5
  &:hover {
6
    color: color.adjust($n, $lightness: 30%);
7
    text-decoration: none;
8
  }
9
}
10

11
a {
12
  @include link-color2(#f00);
13
}

1
a {
2
  color: #f00;
3
}
4
a:hover {
5
  color: #ff9999;
6
  text-decoration: none;
7
}

複数の値を@eachでループし、ページによって背景を変更する

1
$nameList: top, about, company, contact;
2
@each $name in $nameList {
3
  .body-#{$name} {
4
    background-image: url(../img/bg_#{$name}.png);
5
  }
6
}

1
.body-top {
2
  background-image: url(../img/bg_top.png);
3
}
4
.body-about {
5
  background-image: url(../img/bg_about.png);
6
}
7
.body-company {
8
  background-image: url(../img/bg_company.png);
9
}
10
.body-contact {
11
  background-image: url(../img/bg_contact.png);
12
}

1
$bgSetList: top red, about blue, company green, contact yellow;

1
@use 'sass:list';
2

3
@each $bgSet in $bgSetList {
4
  .body-#{list.nth($bgSet, 1)} {
5
    background-image: url(../img/bg_#{list.nth($bgSet, 2)}.png);
6
  }
7
}

1
.body-top {
2
  background-image: url(../img/bg_red.png);
3
}
4

5
.body-about {
6
  background-image: url(../img/bg_blue.png);
7
}
8

9
.body-company {
10
  background-image: url(../img/bg_green.png);
11
}
12

13
.body-contact {
14
  background-image: url(../img/bg_yellow.png);
15
}

1
$bgSetList: (top red)(about blue)(company green)(contact yellow);
2
$bgSetList: (top,red)(about,blue)(company,green)(contact,yellow);
3
$bgSetList: ((top)(red))((about)(blue))((company)(green))((contact)(yellow));

シンプルなグラデーションのミックスインを作る

1
@use "sass:color";
2

3
@mixin linear-gradient($color: #f00, $way: to bottom, $percent: 20%) {
4
  background-image: linear-gradient($way, $color 0%,  color.adjust($color, $lightness: $percent) 100%);
5
}

1
.item {
2
  @include linear-gradient;
3
}

1
.item {
2
  background-image: linear-gradient(to bottom, #f00 0%, #ff6666 100%);
3
}

1
.item {
2
  @include linear-gradient(#999, to right, 50%);
3
}

1
.item {
2
  background-image: linear-gradient(to right, #999 0%, hsl(0, 0%, 110%) 100%);
3
}

Map型と@eachを使ってSNSアイコンを管理する

各SNSごとに背景画像と背景色を変更する

1
// Map型を使って定義
2
$sns-colors: (
3
  x: #000,
4
  facebook: #1877f2,
5
  instagram: #cf2e92,
6
);
7

8
// SNSアイコン
9
.sns {
10
  &__btn {
11
    background-repeat: no-repeat;
12
    // @each で処理を繰り返す
13
    @each $key, $value in $sns-colors {
14
      &.-#{$key} {
15
        background-image: url(/img/icon_#{$key}.png);
16
        background-color: $value;
17
      }
18
    }
19
  }
20
}

1
.sns__btn {
2
  background-repeat: no-repeat;
3
}
4
.sns__btn.-x {
5
  background-image: url(/img/icon_x.png);
6
  background-color: #000;
7
}
8
.sns__btn.-facebook {
9
  background-image: url(/img/icon_facebook.png);
10
  background-color: #1877f2;
11
}
12
.sns__btn.-instagram {
13
  background-image: url(/img/icon_instagram.png);
14
  background-color: #cf2e92;
15
}

サービス名とファイル名が異なる場合

1
$sns-colors: (
2
  x: '01.png' '#000',
3
  facebook: '02.jpg' '#1877f2',
4
  instagram: 'insta.png' '#cf2e92',
5
);

1
@use 'sass:map';
2

3
// SNSアイコン
4
.sns {
5
  &__btn {
6
    background-repeat: no-repeat;
7
    // @each で処理を繰り返す
8
    @each $key, $values in $sns-colors {
9
      &.-#{$key} {
10
        background-image: url(/img/icon/#{nth($values, 1)});
11
        background-color: #{nth($values, 2)};
12
      }
13
    }
14
  }
15
}

1
.sns__btn {
2
  background-repeat: no-repeat;
3
}
4
.sns__btn.-x {
5
  background-image: url(/img/icon/01.png);
6
  background-color: #000;
7
}
8
.sns__btn.-facebook {
9
  background-image: url(/img/icon/02.jpg);
10
  background-color: #1877f2;
11
}
12
.sns__btn.-instagram {
13
  background-image: url(/img/icon/insta.png);
14
  background-color: #cf2e92;
15
}

SNSアイコンの幅も変更できるようにする

1
// SNS設定
2
$sns-config:(
3
  colors: (
4
    x: #000,
5
    facebook: #1877f2,
6
    instagram: #cf2e92,
7
  ),
8
  sizes: (
9
    sm: 25%,
10
    md: 50%,
11
    lg: 100%,
12
  )
13
);

1
@use 'sass:map';
2

3
// SNSアイコン
4
.sns {
5
  &__btn {
6
    @each $name, $color in map.get($sns-config, 'colors') {
7
      &.-#{$name} {
8
        background: $color url(/img/icon_#{$name}.png) no-repeat center;
9
      }
10
    }
11
    @each $size, $width in map.get($sns-config, 'sizes') {
12
      &.-#{$size} {
13
        width: $width;
14
      }
15
    }
16
  }
17
}

1
.sns__btn.-x {
2
  background: #000 url(/img/icon_x.png) no-repeat center;
3
}
4
.sns__btn.-facebook {
5
  background: #1877f2 url(/img/icon_facebook.png) no-repeat center;
6
}
7
.sns__btn.-instagram {
8
  background: #cf2e92 url(/img/icon_instagram.png) no-repeat center;
9
}
10
.sns__btn.-sm {
11
  width: 25%;
12
}
13
.sns__btn.-md {
14
  width: 50%;
15
}
16
.sns__btn.-lg {
17
  width: 100%;
18
}

値が比較しづらいz-indexをMap型で一括管理する

1
$layer: (
2
  modal   : 100,
3
  header  : 20,
4
  tooltip : 10,
5
  default : 1
6
);

1
@use 'sass:map';
2

3
@mixin z-index($key) {
4
  z-index: map.get($layer, $key);
5
}
6
.modal {
7
  @include z-index(modal);
8
}
9
.header {
10
  @include z-index(header);
11
}
12
.tooltip {
13
  @include z-index(tooltip);
14
}

1
.modal {
2
  z-index: 100;
3
}
4
.header {
5
  z-index: 20;
6
}
7
.tooltip {
8
  z-index: 10;
9
}

@functionを使ってpx指定する感覚でフォントサイズをrem指定する

1
@use 'sass:math';
2

3
$baseFontSize: 16;
4
html {
5
  font-size: $baseFontSize + px;
6
}
7
@function rem($pixels, $context: $baseFontSize) {
8
  @return math.div($pixels, $context) * 1rem;
9
}

1
.text {
2
  font-size: rem(12);
3
}

1
.text {
2
  font-size: 0.75rem;
3
}

1
.text {
2
  font-size: rem(14, 12);
3
}

1
.text {
2
  font-size: 1.1666666667rem;
3
}

サンプルコード一覧へ

第5章 現場で使える実践Sassテクニック5-2 レイアウト・パーツで使えるテクニックSample Code

clearfix をミックスインで活用する

nullで簡単に条件分岐をしてレイアウトをする

calc()とSassを組み合わせて四則演算を便利に使う

@for を使って余白調整用のclassを生成する

リストマーカー用の連番を使ったclass名を作成する

連番を使ったclass名のゼロパディング（0埋め）をする

文字リンクカラーのミックスインを作る

複数の値を@eachでループし、ページによって背景を変更する

シンプルなグラデーションのミックスインを作る

Map型と@eachを使ってSNSアイコンを管理する

各SNSごとに背景画像と背景色を変更する

サービス名とファイル名が異なる場合

SNSアイコンの幅も変更できるようにする

値が比較しづらいz-indexをMap型で一括管理する

@functionを使ってpx指定する感覚でフォントサイズをrem指定する

第5章現場で使える実践Sassテクニック5-2 レイアウト・パーツで使えるテクニックSample Code