variables.scss
assets に variables.scss を追加
色を登録する
code:scss
/* mono */
/* color */
フォント系を登録する
code:scss
/* font-family */
$noto-font: 'Noto Sans JP', 'Noto Sans Japanese', 'Noto Sans CJK JP',
'Source Sans Pro', sans-serif;
$roboto-font: 'Roboto';
/* font-size */
$font-regular: 400;
$font-medium: 500;
$font-bold: 700;
アニメーション(timing function)を登録する
code:scss
/* animation */
$bezier-fast-ease-out: cubic-bezier(0.1, 0, 0, 1);
$bezier-fast-ease-in: cubic-bezier(0, 0.1, 1, 0);
$bezier-fast-ease-in-out: cubic-bezier(0.77, 0, 0.23, 1);
独自のcss animation の keyframe 設定は animation.scss を新たに作るか、各コンポーネントに書く。
レスポンシブや要素幅の計算に使う共通変数
code:scss
/* responsive variable */
$side-menu-width: 360px;
$nav-menu-height: 80px;
サイドメニューの幅をここで指定しておくと、メインの領域の幅が計算できる。
code:scss
.main-area {
width: calc( 100% - #{ $side-menu-width } ); }