SASS / SCSS

SASS:括弧;は存在せず、読みやすさは良いが、インデントが重要
SCSS:大かっこ;を含むCSSの上位集合で、CSS構文と完全に互換性のある新しい構文を導入し、Sassのすべての機能をサポートします.

SCSS中@mixinはSASSから=に変更されました.
SCSSでは、@includeがSASSから+に変更されます.(互いの違い)

🍉 コメント

SCSSは、注釈において、括弧を介して相対的に自由であることができる.
SASSは括弧がありません/* */位置合わせに注意してください
SCSSについて、//はコンパイルされておらず、CSSにはまったくコンテンツがありません./* */コンパイル済みであり、CSSにも存在する.

🍉 SCSSのネスト機能(Nesting)と&(親セレクタ)

SCSSの重ね合わせはそれぞれCSSに適用される.
&の場合は、親選択者を参照してください.

SCSS

.container{
    display : flex;
    .item {
        flex-grow : 1;
        > span {
            color : red;
            &:hover{
                color:blue;
            }
        }
    }
}

CSS

.container {
  display: flex;
}
.container .item {
  flex-grow: 1;
}
.container .item > span {
  color: red;
}
.container .item > span:hover {
  color: blue;
}

&:hoverは、親選択者>spanの影響を受ける> span:hoverを作成します.

親セレクタの前に値がある場合、CSSは어떤값 상위선택자부분として作成されます.
.banner { body.dart & {...}} => body.dart .banner{...}

🍉 変数、@at-rootキーワードの使用

基本的に変数は有効範囲内で使用できます
@at-rootの場合、ターゲットをルートパスに移動し、CSSに処理します.

SCSS

.container{
    .item{
        $size : 200px;
        width : $size;
        height : $size;
        @at-root .box{
            width:$size;
        }
    }
}

CSS

.container .item {
  width: 200px;
  height: 200px;
}
.box {
  width: 200px;
}

変数$sizeはwidthheightに影響し、@at-rootは既存.container .item .boxのwidthを200 pxではない..boxのwidth処理は200 pxである.

🍉 重複するキーワードをスキップ

重複する部分を반복되는 부분 : { .. }で処理する.

SCSS

.container{
    flex : {
        grow:1;
        shrink:0;
        basis:auto;
    };
}

CSS

.container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

🍉 変数(+a)の使用

let size = 100 => $size : 100

flagの設定

変数の値の後に、!flagとして追加します.
ex 1)領域変数の値は、!global既存のグローバル変数として再定義される.=>既存のグローバル変数に影響します.
ex 2)!default変数値が指定されている場合は処理します.

bootstrapのgithubコードは!defaultを使用して、bootstrapで既存の作成されたグローバル変数を上書きすることを回避しようとします.

🍉 補間(JSのbackticに類似)

変数を#{변수}に結合して値を処理します.
選択者または属性は、通常の変数では処理できません.
文字補間を使用してこの問題を処理し、#{}を使用してコード内の任意の場所に変数値を配置します.

SCSS

$name : "github";
$path : "~assets/images";

.box{
    background-image:url("#{$path}/#{$name}.png");
}

.box-#{$name}{
    font-size:12px;
}

CSS

.box {
  background-image: url("~assets/images/github.png");
}

.box-github {
  font-size: 12px;
}

🍉 SCSS変数のタイプ

Numbers
1) 1
2) .82
3) 20px
4) 2fr

Strings
1) bold
2) absolute
3) "as/ss"

Colors
1) yellow
2) rgba( , , )
3) #ffff00

Boolean
1) true
2) false

Null
1) null

Lists
1) (10px, 20px, 30px)
2) 10px, 20px, 30px
3) 10px 20px 30px

Maps
1) (a : apple , b : banana , c : chill )

Mapsの場合、カッコ省略はListsとは異なるが、

を省略することはできない

🍉 演算子

算術演算子

比較演算子

論理演算子

1.算術演算子

+ - * / %使用

注意:/は、前値と後値を区別する役割としても使用できます.意味を正しく区切るには、3つの方法があります.

1)除算演算を括弧で囲む( 20px / 2 )2)変数に入れる処理$a = 20px; ... $a/2 3)その他の演算子を追加します.20px / 2 + 1px

演算単位が異なる場合はcalc関数を使用します.
100%-50px => calc(100%-50px)

2.比較演算子

@if
@else

3.論理演算子

以前jsで使われていた&&|!に代わる
SCSSで使用または使用しない.