Sass

Sassとは?

CSSフロントプロセッサとしてのCSSフロントプロセッサ.ブラウザはCSSしか実行できないため、直接Sassを実行することはできません.SassはCSSの構文と似ていますが、ネストや条件文の繰り返し文単位演算などのプログラミング言語を使用できます.ただし、Web上では直接実行されないため、CSSにコンパイルして使用することができます.

SassとSCSSの違い

セキュリティスタイルシートの3番目のバージョンでは、新しいSCSSはすべてのセキュリティ機能をサポートするCSSの親セットであり、CSS構文を完全に互換化するために新しい構文を導入しています.すなわち,SCSSはCSSとほぼ同じ構文でSass機能をサポートする.
違いは、Sassは{}(カッコ)と;省略(セミコロン)、SCSSは{}和;(セミコロン)CSSを受け入れます.

Sassのコンパイル方法

Sass構文をCSSに変換する操作.node js、SassMeister、Gulpなどにコンパイルできます.

SassMeister

SassMeisterのWebサイトでSass/CSS構文をリアルタイムでCSS構文に変換

Parcel

WebアプリケーションバンドルパッケージParcelはコンパイルを簡略化

へんすう

繰り返し使用する値を変数として指定できます.変数名の前には常に$が加算されます.

$변수이름: 속성값;

SCSS

$color-code: #000;
$url: "/common/images/";
$w: 200px;

.wrap {
    color: $color-code;
    background-image: $url;
    width: $w;
}

Compiled to

.wrap {
  color: #000;
  background-image: "/common/images/";
  width: 200px;
}

オーバーラップ

SASSはオーバーラップ機能を使用できます.上位選択者の重複を回避し、複雑な構造をより容易に作成できます.

SCSS

.wrap {
    width: 100%;
    .list {
        padding: 20px;
        li {
            color: red;
        }
    }
}

Compiled to

.wrap {
  width: 100%;
}
.wrap .list {
  padding: 20px;
}
.wrap .list li {
  color: red;
}

インポート

CSSには、現在のファイルに別のCSSをロードする@importという属性があります.このプロパティを使用すると、意図的にコードを分割して効率的にメンテナンスできますが、@importと宣言されたCSSごとにhttpリクエストが発行されるため、Webページのパフォーマンスが低下したため、使用を禁止します.SASSにも@importがあり、他のファイルをマウントできます.CSSの@importとは異なり、複数のSASSファイルは@import時に最終的に1つのCSSにコンパイルされるため、コードを複数のファイルに分けて管理することができ、パフォーマンスに影響を与えることはありません.もちろん、@importファイルで定義した内容は親SASSファイルでも使用できます.

// 작성 방법 : @import "파일명.scss" 또는 @import "파일명";
@import "reset";
@import "reset.scss";

えんざん

SASSは基本的な演算機能をサポートする.レイアウト作業では、状況に応じてサイズを計算したり、指定した値で作成したりするのに役立ちます.

算術演算子

比較演算子

論理演算子

@mixin

mixinでは、スタイルシート全体で再利用するCSS宣言グループを定義できます.@mixinは再利用するコンテンツを宣言する部分であり、@includeは@mixinで定義されたコンテンツを挿入、適用する部分である

@mixinの例

// SCSS문법
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// Sass문법
=large-text
  font-size: 22px
  font-weight: bold
  font-family: sans-serif
  color: orange

@include

@mixinで宣言された部分.
@includeの使い方

// SCSS문법
@include 믹스인이름;

// Sass문법
+믹스인이름

@includeの例

// SCSS문법
h1 {
  @include large-text;
}
div {
  @include large-text;
}
// Sass문법
h1
  +large-text
div
  +large-text

@content

宣言されたMixinに@contentが含まれている場合は、このセクションで必要なスタイルブロックを渡すことができます.このようにして、既存のmixinが有する機能にセレクタや属性などを追加することができる.

SCSSの例

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

CSSコンパイル後

  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

@extend

場合によっては、特定の選択者が他の選択者のすべてのスタイルを持つ必要がある場合があります.李京雨@extendを利用してオブジェクトへの継承のように使える

@extendの使い方

@extend 선택자;

SCSSの例

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

CSSコンパイル後

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}