Zenn
😊

Sass入門(基本的な文法を網羅的に解説)

2023/01/15に公開
CSS
Sass
初心者
フロントエンド
入門
tech

今回はAlt CSSの1つであるSaccについて解説していきます。

意外に今でも使っている現場は多いので、学んでおいて損はないかと思います。

それでは解説していきます。

そもそもSassとは？

Sassとは「Syntactically Awesome Style Sheets」の略になります。

要は、イケてるCSSの記述方法という事になります。

そもそもなぜSassが生まれたのかと言うと、CSSはシンプルだけど機能が乏しいからです。

Sassを使うとCSSにはないさまざまな機能を使うことができます。

つまり、効率的に開発をすることができるのです。

具体的には、以下のようなメリットが挙げられます。

  • コードの簡略化
  • コードの再利用性
  • 基本的なプログラミングができる
  • ファイル分割が可能

これが、Sassが使われる理由になります。

記法について

Sassにはsass記法、scss記法があります。

元々はsass記法だけでしたが、評判が悪かったからかscss記法が生まれました。

sass記法はシンプルに書くことができますが、CSSと書き方が結構異なるので慣れが必要です。

けれどscss記法は書き方がCSSとかなり近いので、すぐに馴染むことができます。

こういった背景から、主にscss記法を使っている現場が多いという印象です。

なので今回も、scssで記法で解説をしていこうと思います。

Sassの独自機能を解説

では早速、Sassの機能について解説していきます。

ネスト

まず、SassはネストしてCSSを書くことが可能です。

具体的な例を見た方が早いと思うので、次のコードを参考にどうぞ。

.hoge{
  .bar{
    color: red;
  }
}

.hoge .bar{
  color: red;
}

こうすることで、親のセレクタを繰り返し書かなくて済むので、記述量を減らすことができます。

また、可読性も向上します。

ちなみに、親セレクタを参照する時は&を使うことができます。


.hoge{
  &:hover{
    color: red;
  }
  &:focus{
    color: blue;
  }
}


.hoge:hover{
  color: red;
}

.hoge:focus{
  color: blue;
}

コメント

次に、コメントについて解説していきます。

Sassでは1行のコメントを簡単に記述することができます。


// コメント



/* コメント */

@mixin

次にmixinという機能を解説していきます。

このmixinを使うことで、よく使うコードをまとめておくことができます。

実際の例は次の通りになります。


@mixin flexContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  @include flexContainer
}

.container2{
  @include flexContainer
}



.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.container2{
  display: flex;
  justify-content: center;
  align-items: center;
}

このように、@mixinでモジュールを定義して、@includeで適用させるだけなので簡単に実装できます。

ちなみに、mixinは次のように引数を渡すこともできます。


@mixin flexContainer($textColor) {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $textColor;
}

.container{
  @include flexContainer(red);
}

@extend

次に、extendという機能を解説していきます。

Sassではこのextendを使うことで、所謂「継承」をすることができます。

コードは次の通りになります。


.flexContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  @extend .flexContainer;
}




.flexContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

確かにこの機能は便利ですが、mixinと違って引数が渡せなかったり、多用すると可読性が落ちるといった問題があります。

ただ、オブジェクト指向的な考え方を元にしてCSSを書きたいといった要望を叶えることができるので、使う現場では使われてるかと思います。

ちなみに 、「%」を用いることで継承元のセレクタをCSSファイルに生成させないようにできます。

変数

次に、変数について解説していきます。

Sassでは、プロパティ値などを変数化させることができます。

例えば、次のような感じです。


$themeColor: red;

.hoge{
  &:hover{
    color: $themeColor;
  }
  &:focus{
    color: blue;
  }
}

このように変数を利用することで、記述回数が大幅に減るので開発スピードが上がります。

演算

Sassでは、値の演算をすることができます。

例えば、次の通り。


.container{
  width: 100 * 2
}




.container{
  width: calc(100 * 2)
}

ただ、CSSもcalcを使って計算ができるので、正直そこまでのメリットはないです。

関数

Sassでは、関数も使うことができます。

元から定義されているビルドイン関数と独自に定義できる関数があるので、こちらはそれぞれ解説してきます。

ビルドイン関数

Sassでは元から定義されてる関数がいくつかあります。

いくつか例を挙げると次の通りです。

関数名 意味
ceil($number) 小数点以下を切り上げする
floor($number) 小数点以下を切り捨てする
round($number) 小数点以下を四捨五入する
abs($number) 絶対値を返す
min($number) 最小の数値を返す
max($number) 最大の数値を返す

実際に使うと次のようになります。


.container{
  font-size: ceil(13.5)px;
}

独自関数

Sassでは、@functionを使うことで、独自の関数を定義することができます。

ちなみに、返り値は@retrunを使います。


@function double($num){
  @return $num * 2;
}

.container{
  width: double(100)px;
}

条件分岐

Sassでは普通のプログラミング言語と同じように、if文を使って条件分岐を定義することもできます。


@mixin colorType($type) {
  @if($type == 0){
    color: white;
  }
  @if($type == 1){
    color: red;
  }
  @if($type == 2){
    color: black;
  }
}

.container{
  @include colorType(2);
}

繰り返し

Sassではforやwhileを使って繰り返し処理も定義することができます。

今回はfor文のみ具体的に解説します。

まず、基本的な書き方は次の通りです。


@for $変数名 from 開始値 to 終了値 {
  処理（スタイルなど）
}

なので、実際に書くと次のようになります。


@for $i from 3 through 1 {
  .box-#{$i} { width: 10px * $i; }
}



.bixA-3{ width: 30px; }
.bixA-2{ width: 20px; }
.bixA-1{ width: 10px; }

ちなみに、プロパティ名で変数を使いたい場合は、#{}で囲む必要があります。

まとめ

以上、Sassについての解説でした。

Sassはなかなか便利なので、機会があればぜひ使ってみてください！

宣伝

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください！

Discussion