scssで出来ることまとめ

ざっくり

• CSS Extensions

  • ネスト {{}}
  • 親セレクタ参照 &
  • 属性ネスト :
  • 演算 -+*/

• scss script

  • 変数 $
  • 演算　<>=!+-*/
  • scss関数

• @-Rules and Directives

  • インポート @important
  • パーシャル _hoge.scss
  • ミックスイン @mixin @include
  • セレクタ継承 @extend
  • メディア @media
  • マップ（連想配列的な）

• Control Directives & Expressions

  • 分岐 if()
  • 分岐 @if
  • 繰り返し @for
  • 繰り返し @while
  • 繰り返し @each

👍css記述拡張

ネスト

.hoge{
  p{}
}

親セレクタ参照

.hoge{
  &__piyo{}
  &:hover
}
↓
.hoge__piyo{}
.hoge:hover{}
---
.piyo {
    .huga & {
    }
}
↓
.huga .piyo{}
---
.foo {
    &:hover  { ... } //-> .foo:hover
    &:after  { ... } //-> .foo:after
    &.bar    { ... } //-> .foo.bar
    & + .bar { ... } //-> .foo + .bar
    & > .bar { ... } //-> .foo > .bar
    .bar & { ... }   //-> .bar .foo
    #{&}-bar { ... } //-> .foo .foo-bar
}

@at-root

.block {
  @at-root {
    #{&}__element {
      @at-root {
        #{&}--modifier { ... }
      }
    }
  }
}

↓

.block { ... }
.block__element { ... }
.block__element--modifier { ... }

プロパティネスト :

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

👍scss script

変数 $

$yoko: 250px;
.hoge {
    width: $yoko;
    span {width: #{$yoko};}
}

演算

• Number Operations
• S3ubtraction, Negative Numbers, and -
• Color Operations
• Boolean Operations
• List Operations

.hoge {
    width: 100px - 20px;
  width: 100px - (20 * 2) - 5;
}

$main_width: 375px;
$padding: 20px

.hoge {
    width: $base_width - ($padding*2);
}

関数

一覧
https://sass-lang.com/documentation/Sass/Script/Functions.html

p {
  color: hsl(0, 100%, 50%);
}

マップ（連想配列的な）

keyで取り出せる

$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

$grays: () !default;

$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

@function gray($key: "100") {
  @return map-get($grays, $key);
}

👍@-Rules and Directives

インポート @import

外部cssインポート

@import url("hoge.scss");
@import url("piyo");
@import "hoge", "piyo", "fuga";
@import url("assets/fugo.scss");
//アンダーバーと拡張子は省略可能、複数を一度に読み込み可能
//@import は、ファイル内のどこにでも記述可能

パーシャル

_hoge.scss
_piyo.scss

ミックスイン(@mixin @include)

@mixin hoge {
    display: block;
  margin: 20px 10px 10px 20px;
}

.huga {
  @include hoge;
}

セレクタの継承(@extend)

既存クラスのオーバーライドのこと

.tableHead {
    background-color: #222;
    color: #eee;
    font-size: 12px;
}

.myTableHead {
    @extend .tableHead;  // 既存のクラスが元になっている
    font-size: 10px;     // ここだけ変更
}

↓

.myTableHead {
    background-color: #222;
    color: #eee;
    font-size: 10px;
}

👍Control Directives & Expressions

条件分岐(@if)

＊@ifとif()は別物なので注意

$type: ocean;

p {
  @if $type == ocean {
    color: blue;
  } @else {
    color: black;
  }
}

$type: ocean;

p {
  color: if($type == ocean, blue, black);
}

繰り返し(@for)

@for $i from 10 through 20 {
  .fs#{$i} {
    font-size:#{$i}px;
  }
}

繰り返し(@while)

複雑なループを作りたい時に向いてるらしい

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

繰り返し(each)

@each、$var1,$var2, ... in <list>

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}