[CSS] SASS/SCSS

✔CSSフロントプロセッサ
CSSプリプロセッサは独自の構文を持つプログラムであり、mixin、ネストセレクタ、継承セレクタなどを提供することでCSSの生成を支援し、CSS構造の可読性とメンテナンス性を確保します.
ㅤㅤSASS・LESS・Stylus・PostCSSなどいろいろありますが、ここで勉強して使うのが一番広いSASS✔ SASS/SCSS
SASSは「システム外観スタイルシート」の略であり、SCSSは「Sassy CSS」の略である.SCSSはSASSのすべての起源をインテリジェント化し、CSS文法と完全に互換性があり、より便利に使用できます.そこで、SCSSについて学びましょう.
ㅤㅤ
SASS/CSS自体はブラウザに適用できません.ブラウザで実行するには、コンパイラでCSSファイルにコンパイルする必要があります.
✔インストールとコンパイルnpm install -g node-sass:npmモジュールでnode-sassをインストールするnode-sass style.scss style.css : style.style scssファイル.cssでコンパイルnode-sass -w style.scss style.css : style.scss変更時の自動スタイル.cssでコンパイル

✔ Nesting
親の要素を繰り返し説明する必要はありません.

// CSS
.header{
  width: 100%;
}
.header div{
  height: 100%;
}
.header div:hover{
  margin: 10%;
}
ㅤ
// SCSS
.header{
  width: 100%;
  div{
    height: 100%;
    &:hover{
      margin: 10%;
    }
  }
}

✔$変数$共通属性を再利用できます.

$header-color: #d9d9d9;
ㅤ
.header{
  color: $header-color;
}

✔ @mixin@mixin共通属性のバンドルを再利用できます.

@mixin header-style{
  width: 100%;
  height: 100%;
}
ㅤ
.header{
  @include header-style;
}

✔ @import@importCSSファイルをインポートできます.

@import 'header.scss'

✔ @if@if条件付き分割可能

$theme: wave;
ㅤ
header{
  @if $theme == wave{
    color: blue;
  } @else if $theme == grass{
    color: green;
  } @else {
    color: white;
  }
}

✔ @for
繰り返し使用可能

@for $i from 0 through 3{
  .block-#{$i}{
    width: 30% * $i;
  }
}

適用
myPageプロジェクトに適用してみます.

$theme__color--normal: #d9d9d9;
$font__hover--weight: 700;
...
@mixin font-style{
  font-family: 'Roboto', 'Nanum Gothic', sans-serif;
  font-size: 15px;
}
...
input{
  &[type=submit]{
    @include font-style;
    background: none;
    border: none;
    padding: 0;
    &:hover{
      font-weight: $font__hover--weight;
    }
  }
}
...

👍 コメントサイト

SASS/CSS（フロントプロセッサ）

SASS公式サイト