SASS | Once and Only

.sassと.scssがある。scssを用いる。

総論

リンク先が未定の場合はpathの仮置として#を置く

application.scss では基本的にimportのみをする。

@importの上から順。
reset cssを最初に書いて、上書きしたいものは下に書く。

&(アンパサンド)は、適用されているセレクタを指す。

分割したSassファイル
ファイル名を_（アンダースコア）をつける。
読み込むには、@import ファイル名と記述。

@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

_variable.scssに変数を定義する。
$hogehogeと「$」で宣言し、呼び出す際も$hogehogeと呼び出す。

_variable.scss
$SidebarTextColor: #FFFFFF;

application.scss
.sidebar {
  color: $SidebarTextColor;
}

スタイルを定義する。
_clearfix.scssのような別ファイルで管理する。

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

mixinしたい要素はincludeを用いて記述する。

.menu {
  @include clearfix();
}

式中はスペースを挟む必要がある。

height: calc(100vh - 100px);
↑　動く
↓　動かない
height: calc(100vh -100px);
height: calc(100vh- 100px);

p + ulのようなセレクタの書き方を行うと、
pタグに隣接したulタグに対してCSSを設定できる。