Sass(Scss) Basics

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%;
}

+、-、*および/および%などの数学的演算が可能です.
リファレンス