Sass(Scss) Basics

9838 ワード
CSS Sass テキストリンク

Sassとは?


SassはCSS Preprocessorです.
CSSには存在しない様々な機能、変数、ネスト、mixinなどを提供し、CSSをより使いやすくします.
Sass自体はWeb上では利用できないため、CSSにコンパイルする必要がある.最も直接的な方法は、端末上でsass input.scss output.css を実行することである.

Sassの強み

  • スタイルシートを分割して管理する
    • .
  • コード
    • の繰り返しを避ける
  • メンテナンスが容易
  • その他

    • Sassの欠点

  • コンパイル
    • が必要
  • デバッグ困難
  • その他

    • Sass Basic Concepts


    Variables

    $font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
    どのCSS値も変数として格納できます.

    Nesting

    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
    HTMLと同じ視覚階層を持つことができます.

    Partials


    他のSassファイルに含めることができる一部のSassファイルを作成できます.CSSファイルにコンパイルするには、ファイル名をベースコードで開始する必要があります.(ex.'style.scss')@useルールを併用します.

    Modules

    // _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
    // styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
    1つのファイルにすべてのSassを書く必要はありません.@use ruleでは、必要に応じて任意の数のファイルを配布できます.@useルールは、別のSassファイルをモジュールとしてロードします.

    Mixins

    @mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
    CSS宣言グループを作成し、再利用を続行できます.@mixinでmixinを作成し、@includeで使用できます.

    Extend/Inheritance

    /* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}
    @extendによって、ある選択者は別の選択者を継承することができる.

    Operators

    .container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
    +、-、*および/および%などの数学的演算が可能です.
    リファレンス
    Rxjava2.0メモ-005-判断オペレータ