Sass

Sass

→CSSの機能を拡張した言語のこと

メリット

・記述の簡略化ができる

・プログラムのような処理が可能

・複数のCSSを一つにまとめることができる

・同じ値を使いまわすことができる

Sassではパーシャルという機能を使用し複数のSassを一つにまとめれる。

→作成するには、ファイル名を_（アンダースコア）から始めます。パーシャルファイルを読み込むには、@import ファイル名と記述

例）

@import "reset";

mixinという機能を使用することで、同じスタイルをまとめることもできる

→定義するには、@mixin mixin名( ) { }のように記述

例）

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

&(アンパサンド)は、擬似要素であるafterが適用されているセレクタを指します。以下の例では、&は.menuに相当します。
つまり、擬似要素afterは、.menuに対して適用されているということです。

このmixinの呼び出しは@includeを使用して以下のように書きます。

.menu {
  @include clearfix();
  ...

  .menu__list {
    float: left;
    ...
  }
}

まあ今日はこんな感じ。

CSSの上位互換て感じですかね。

では、また