第5章 現場で使える実践Sassテクニック5-3 スマホ・マルチデバイス、ブラウザで使えるテクニックSample Code

1
@mixin linkIcon($color: #333) {
2
  &::before {
3
    content: "";
4
    position: absolute;
5
    top: 50%;
6
    right: 15px;
7
    width: 10px;
8
    height: 10px;
9
    margin-top: -7px;
10
    border-top: 3px solid $color;
11
    border-right: 3px solid $color;
12
    transform: rotate(45deg);
13
  }
14
}

1
ul.linkList {
2
  margin: 20px;
3
  li {
4
    list-style: none;
5
    margin: 0 0 1px;
6
    a {
7
      position: relative;
8
      display: block;
9
      padding: 15px {
10
        right: 27px;
11
      }
12
      background: #eee;
13
      color: #333;
14
      text-decoration: none;
15
      @include linkIcon();
16
    }
17
  }
18
}

1
ul.linkList {
2
  margin: 20px;
3
}
4
ul.linkList li {
5
  list-style: none;
6
  margin: 0 0 1px;
7
}
8
ul.linkList li a {
9
  position: relative;
10
  display: block;
11
  padding: 15px;
12
  padding-right: 27px;
13
  background: #eee;
14
  color: #333;
15
  text-decoration: none;
16
}
17
ul.linkList li a:before {
18
  content: "";
19
  position: absolute;
20
  top: 50%;
21
  right: 15px;
22
  width: 10px;
23
  height: 10px;
24
  margin-top: -7px;
25
  border-top: 3px solid rgba(0, 0, 139, 0.8);
26
  border-right: 3px solid rgba(0, 0, 139, 0.8);
27
  transform: rotate(45deg);
28
}

1
@media (width <= 767px) { ... }
2
@media (width <= 320px) { ... }

1
$breakpoints: (
2
  xs: "(width <= 320px)",
3
  s : "(width <= 575px)",
4
  m : "(width <= 767px)",
5
  l : "(width <= 991px)",
6
  xl: "(width <= 1199px)",
7
);

1
@use 'sass:map';
2

3
@mixin media($breakpoint) {
4
  @media #{map.get($breakpoints, $breakpoint)} {
5
    @content;
6
  }
7
}

1
body {
2
  background-color: white;
3
  @include media(l) {
4
    background-color: blue;
5
  }
6
  @include media(m) {
7
    background-color: green;
8
  }
9
  @include media(xs) {
10
    background-color: red;
11
  }
12
}

1
body {
2
  background-color: white;
3
}
4
@media (width <= 991px) {
5
  body {
6
    background-color: blue;
7
  }
8
}
9
@media (width <= 767px) {
10
  body {
11
    background-color: green;
12
  }
13
}
14
@media (width <= 320px) {
15
  body {
16
    background-color: red;
17
  }
18
}

1
@use 'sass:map';
2

3
@mixin media($breakpoint) {
4
  @if map.has-key($breakpoints, $breakpoint) {
5
    @media #{map.get($breakpoints, $breakpoint)} {
6
      @content;
7
    }
8
  }
9
  @else {
10
    @error "$breakpoints に #{$breakpoint} ってキーは無いよ！";
11
  }
12
}

1
$theme-colors: (
2
  background: (
3
    light: #ffffff,
4
    dark: #1a1a1a
5
  ),
6
  text: (
7
    light: #000000,
8
    dark: #ffffff
9
  ),
10
  link: (
11
    light: #002375,
12
    dark: #cad4ed
13
  ),
14
  primary: (
15
    light: #3498db,
16
  ),
17
  secondary: (
18
    light: #bf4080,
19
  )
20
);

1
@use 'sass:map';
2

3
:root {
4
  @each $key, $value in $theme-colors {
5
    --#{$key}: #{map.get($value, light)};
6
  }
7

8
  @media (prefers-color-scheme: dark) {
9
    @each $key, $value in $theme-colors {
10
      @if map.has-key($value, dark) {
11
        --#{$key}: #{map.get($value, dark)};
12
      }
13
    }
14
  }
15
}

1
:root {
2
  --background: #ffffff;
3
  --text: #000000;
4
  --link: #002375;
5
  --primary: #3498db;
6
  --secondary: #bf4080;
7
}
8
@media (prefers-color-scheme: dark) {
9
  :root {
10
    --background: #1a1a1a;
11
    --text: #ffffff;
12
    --link: #cad4ed;
13
  }
14
}

1
@mixin hack-ie11 {
2
  @at-root {
3
    @media all and (-ms-high-contrast: none) {
4
      *::-ms-backdrop, & {
5
        @content;
6
      }
7
    }
8
  }
9
}

1
.box {
2
  background: red;
3
  @include hack-ie11 {
4
    background: blue;
5
  }
6
}

1
.box {
2
  background: red;
3
}
4
@media all and (-ms-high-contrast: none) {
5
  *::-ms-backdrop, .box {
6
    background: blue;
7
  }
8
}