１年間で学んだSCSSの色々まとめ

はじめまして、りえぞーです。
入社し約１年が経とうとしております。(1月下旬入社)
時の速さにぞっとします。。。ぞっ。。。。

SCSS構文について、めちゃめちゃ初歩的な内容ですが、
入社直後の「見聞きしたことある」状態から「理解できる」状態になったものをまとめました。
（自分への備忘録も兼ねて。。。）

#前提
SCSSとはcssの拡張版です
コンパイルすることによってcssファイルを生成します
コンパイルするための環境構築についてはこの記事では触れていません

#SCSS構文

変数

変数と聞くとぞっとしますが、scssの変数はとても簡単に書ける上に理解しやすい作りになっているので、
あまり気負わず使えるいいやつです。
$変数名：値; これで変数の定義ができてます、あとは好きなところで使うだけ！

style.scss

$red: #f00;
body {
  color: $red;
}

コンパイル後

style.css

body {
  color: #f00;
}

演算

計算式をそのまま書けば計算してくれる
足し算（+）、引き算（-）、掛け算（*）、割り算（/）、余り（%）

style.scss

.content {
  width: (100%/3);
}

コンパイル後

style.css

.content {
  width: 33.33333%;
}

【補足】（21/12/15追記）
現在推奨されているDart Sassでは除算に「/」を使用することを非推奨としており、将来的には廃止になる予定です。

Dart Sassでの除算は下記のように@use "sass:math";で組み込みモジュールを読み込む
math.div()で計算式を記述
「/」の代わりに「,」を使用します
↓例

style.scss

@use "sass:math"; /* sassファイル行頭で記述 */
.content{
  width: math.div(100%, 3);
}

コンパイル後

style.css

.content {
  width: 33.33333%;
}

@function

自作関数。好きに関数をつくれるよってやつ。
自分でまっさらなところからコーディングする必要が出た場合に必要に応じて使用する。
テンプレートとか人が書いたコードを触るときは、しっかり確認しないと無駄な記述増やしちゃう（自戒）
自分で便利な関数を作ったりできるので活用していきたい（抱負①）
例：vwに変換してくれるやつ

style.scss

//自作関数
@function vw($size, $viewport: 750) {
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}
//作った関数使います
.content {
  width: vw(500);
}

コンパイル後

style.css

.content {
  width: 66.66667vw;
}

@mixin

@mixin使うときは@include。こいつらはマブダチなので一緒に使います。
@mixinでスタイルの定義をします
@includeで呼び出します
そうすることで同じスタイルを何度も書かなくても繰り返し使うことができます
また、引数を渡すことも可能です。
活用していきたい（抱負②）

引数なしバージョン

style.scss

@mixin base-font {
  color: #ccc;
  font-size: 18px;
  line-height: 1.7;
}

.text {
  @include  base-font;
}

コンパイル後

style.css

.text {
  color: #ccc;
  font-size: 18px;
  line-height: 1.7;
}

引数ありバージョン

style.scss

//kadomaruがmixinの名前、自分の好きなようにつける
//$valueが引数名
@mixin kadomaru($value) {
  border-radius: $value;
}

//10px 9px 8px 7px が引数
.content {
  @include kadomaru(10px 9px 8px 7px);
}

.content_inner {
  @include kadomaru(10px);
}

コンパイル後

style.css

.content {
  border-radius: 10px 9px 8px 7px;
}

.content_inner {
  border-radius: 10px;
}

@import （非推奨）

分割したファイルを読み込みます
ここに書いておいてなんですが、現在は非推奨の扱いで、2022年10月には廃止予定となっています。
代わりに@useというのが使えるようです（Dart Sassでのみ使用できる）

Ruby Sass … 初代、サポート終わってる
LibSass（node-sass） … 2020年10月、非推奨になった
Dart Sass … Dart製、公式推奨

Dart Sassについても学習していきたい（抱負③）

#おまけ
グラデーション文字をmixinにして使い回す
（最近グラデーションについて調べることがありこんなやり方あるのかーと知りました）
background-clip:text　：背景を文字でマスクできるようなプロパティ
IE以外で使用できる（プレフィックス必要）

See the Pen Untitled by nakahara-rie (@nakahara-rie) on CodePen.

グラデーションって苦手意識あったけど最近素敵だなと思えてきました。。

#まとめ
このへんが基礎かなと思っていますがどうなのでしょうか…？
超入門すぎんだろ今年何やってたんだ！と怒られないか心配ですが、地道に成長していきたいです。
2022年は少しずつアウトプットへの苦手意識を克服していくぞ…！（抱負④）
お読みいただきありがとうございました。