ハイフンハイフンから始まる変数名でないとエラーになる
You must use – in variables, otherwise, it will result in an error. Property names that are prefixed with –, like –example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
Illegal Statement (Without the use of –)
Sass ではハイフンとアンダースコアは同一
Sassの変数名ではハイフン（-）とアンダースコア（_）が同一視される。
Sass と SASS と SCSS
- Sass: css を拡張したメタ言語
- SASS: Sassの記法
- 拡張子は .sass
- セミコロンや波括弧を使用しない
- コードが簡略化
- 書く際の負担が少ない
- SCSS: Sassの記法
- 拡張子は .scss
- 書き方がCSSに似ている
- CSSのようにネストを使用する
- SCSSのほうが一般的に普及
Sass のメリット
CSS を拡張するメリット
- 入れ子の使用が可能
- 変数を利用できる
- 四則演算が可能
- 関数を使用できる
- ミックスイン・継承による効率化
- ミックスイン: スタイルに引数を持たせる