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記述拡張

### ネスト

```scss
.hoge{
  p{}
}
```


### 親セレクタ参照

```scss
.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

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

↓

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

### プロパティネスト :

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

# 👍scss script


### 変数 $

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

### 演算

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

```scss
.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で取り出せる

```scss
$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インポート

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

### パーシャル

```scss
_hoge.scss
_piyo.scss
```

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

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

.huga {
  @include hoge;
}
```

### セレクタの継承(@extend)
既存クラスのオーバーライドのこと

```scss
.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()は別物なので注意

```scss
$type: ocean;

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

$type: ocean;

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

### 繰り返し(@for)

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

### 繰り返し(@while)
複雑なループを作りたい時に向いてるらしい

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

### 繰り返し(each)
@each、`$var1,$var2, ... in <list>`

```scss
@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;
  }
}
```