[TIL] scss

nested

通常のcssに比べて,強いscssの利点はネストされているようだ.

body {
  // ...code
  .main {
    // ...code
  }
}

と一緒に使います.

へんすう

変数はファイルの一番上に指定$변수명$primary-color: #272727;使用時には以下のように清潔に使用することもできます.

body {
  background: $primary-color;
}

cssで..。

:root {
  --primary-color: #272727;
}

body {
  background: var(--primary-color);
}

map-get

javascriptの地図機能と似ています.
(objectとの差は少ないと思います)

$font-weights: (
    'regular': 400,
    'medium': 500,
    'bold': 700,
)
  // 위의 변수를 map-get 을 사용하여 적용한다
body {
  font-weight: map-get($font-weight, bold);
}

以下はルールです.
1つ目のargsはmapを適用したい(すでに存在する)変数名であり,2つ目は変数のkeyである.

map-get($map: , $key: )

選択者

&親に教える.
すなわち

.main {
  // ...CODE
  &__paragraph {
    // ...code
  }
}

次のように

.main {
  //...
}

.main__paragraph {
  //...
}

しかし、このように書くのは私たちが望んでいるものではないので、以下のように修正します.

.main {
  // ...CODE
  #{&}__paragraph {
    // ...code
  }
}

次のように

.main {
  //...
}

.main .main__paragraph {
  //...
}

#{&}ハイライトです.

その他の例

.main {
  // ...CODE
  #{&}__paragraph {
    // ...code
    &:hover {
      color: pink;
    }
  }
}

このような

partials

scssでは,モジュール化によりファイルをきれいに管理できる.
変数を単独で抽出しましょう.:hover如_variables.scss该会议.
また、変数ファイルをインポートするために、_파일명のようにimport文を書くことができます.
あるいはこのようにします.(同じフォルダにある必要があります)@import './variables'

@function

@import 'variables'とは若干異なる
これは計算が終わったら、@mixinを返します.valueスタイルを決める.

// function명(변수명)
@function weight($weight-name) {
  @return map-get($font-weights, $weight-name);
}

.main__paragraph {
  // 생성한 function을 적용한다.
  font-weight: weight(regular);
}

@mixin

よく使われるコードの重複を避けるために使用されます.mixin科@mixin同席です.

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main__paragraph {
  @include flexCenter;
}

@includeのようにargsを転送することもできます.

@mixin flexCenter($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.main__paragraph {
  @include flexCenter(row);
}

mixin例:theme

@mixin theme($light-theme: true) {
  @if $light-theme {
    background: lighten($primary-color, 100%);
    color: darken($text-color, 100%);
  }
}

.light {
  // 그냥 theme(true) 라고만 적어도 가능하다
  @include theme($light-theme: true);
}

mixin例:メディアquary

// mixin으로 반복하여 사용하는 모바일쿼리를 생성해보자.
@mixin mobile {
  // 아래의 $mobile 은 변수로 생성한 것.
  // $mobile : 800px
  @media (max-width: $mobile) {
    @content;
  }
}

.main {
  @include mobile {
    // 미디어 쿼리처럼 이제 사용 가능하다
    // 계속 반복되는 미디어 쿼리를 깔끔하게 처리한 것.
    flex-direction: column;
  }
}

@extend

@function継承スタイルを使用できます.

.main {
  #{&}__paragraph1 {
    font-weight: weight(bold);
    &:hover {
      color: pink;
    }
  }

  #{&}__paragraph2 {
    // extend만 작성했을 뿐인데 위의 스타일을 그대로
    // 상속받을 수 있다!
    @extend .main__paragraph1;
  }
}

数学演算子の有効化

通常cssは使用すべき@extend 상속받을스타일을 한 이름、
scssで使用可能calc(80% - 40%)・+・-・/・

.main {
  width: 100% - 20%;
}

同じタイプをよく使う必要があります

.main {
  width: 100% - 200px;
}

このように使用すると*、そして%を使用すると起動できません.