【初心者必見 | Scss（Sass）】これを押さえとけばだいたいいける基本知識 #初心者

はじめに

こんにちは。
唐辛子をぽりぽり食べながら一人前のフロントエンジニアを目指すテノヒラです。
最近Scssを触ることがあり、今後も使うためインプットしたことを復習しがてら備忘録として残します。
とりあえずこの記事は保存しときましょうか〜〜

そもそもScssとSassってなーに

ScssとはSassy Cascating Style Sheetsの略で「強気でかっこいいCSS」という意味です。
SassはSyntactically Awesome Style Sheetsの略で「構文的に素晴らしいスタイルシート」という意味です。
ネーミングセンスありすぎですね。エモい。

ところで、「あれ？ScssとSassって一緒じゃないの？」って思ったあなた、違いまっせ〜〜！！！
Qiitaの記事でも結構混同しているものが多いんですけど、ちょっと違うんですよ。ほんのちょっと
相違点はざっくりといえば下記2点です。

1. 拡張子
　- .scss
　- .sass

2. ネストの記述方法
Scssの書き方から括弧{}をひいたのがSass (ざっくり言うと)

まあ、ほぼほぼ一緒ですよ。
一般的に学習コストが低く、主流となっているのがScssですね。
実際に私の現場でもScssを使っています。

cssとの違い

ざっくりと下記2点です。
1. ScssとSassのほうが、効率的に書ける
2. コード量が減るため、リファクタしやすい
え？いまいちしっくりこないって？
では次項でScss/Sassの書き方を見ましょうか！

Scss/Sassの記述方法

今回は主にScssの書き方を書きます。

ネスト

ネストは日本語で入れ子という意味です。
ネストはよーく使うんで、ちゃんと理解しましょう！

まずサンプルのCSSです。

.hogeWrap {
  width: calc(400px / 2);
}
.hogeWrap > .arrow {
  position: relative;
  display: inline-block;
  padding: 0 15px;
}
.hogeWrap > .arrow::before,
.hogeWrap > .arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
}
.hogeWrap > .arrow::before {
  left: 5px;
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  border: 5px solid transparent;
  border-left: 5px solid red;
}
.hogeWrap > p {
  font-size:20px;
}
.hogeWrap > p > span {
  font-weight: bold;
  font-size: 12px;
}

ではこれをScssの書き方にしてみましょう。


.hogeWrap {
  width: calc(400px / 2);
  .arrow{
  position: relative;
  display: inline-block;
  padding: 0 15px;

    &:before,
    &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    }
    &:before {
    left: 5px;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 5px solid transparent;
    border-left: 5px solid red;
    }
  }
  > p {
    font-size:20px;
    color: red;

   > span {
    font-weight: bold;
    font-size: 12px;
    color: blue;
    }
  }
}

「あれ、長くなった？？」と思ったそこのあなた。まだまだですね。
パッと見ていただければわかる通り、hogeWrapの中のスタイルが一目でわかりますよね
検索するときもたとえ同じクラス名があったとしてもhogeWrapを調べてそこの配下を見れば、すぐ見つけられますよね。
気をつけることはちゃんとインデントを揃えること！
じゃないと親要素のクラスがわかんなくなっちゃいますからね
では次はSassを見てみましょう。

変数

よく使う値に対して変数をつけることができます。
CSSでは下記のような書き方をしていたのが

.shopTxt {
    color: #008080;
    font-size: 12px;
    padding: 1px 14px;
}
.ownerTxt {
    color: #008080;
    font-size: 12px;
    padding-top: 114px;
}

変数を使うことによって下記のような書き方になります。


$basicTxtColor: #008080;
$basicTxtSize: 12px;

.shopTxt {
    color: $basicTxtColor;
    font-size: $basicTxtSize;
    padding: 1px 14px
}
.ownerTxt {
    color: $basicTxtColor;
    font-size: $basicTxtSize;
    padding-top: 114px;
}

こんな感じによく使う色や大きさなどを変数にしてしまえば便利ですね！

四則演算

Scss/Sassはコンパイル後に加算（+）、減算（-）、乗算（*）、除算（/）、剰余（%）を勝手に計算してくれまうす

関数

Scss/Sassは便利な関数がたくさんあります！
ちょっと今回の記事に書いたらボリューミーになりすぎるので次回書きます！

@mixin

@mixinについては@nekoneko-wanwanさんがわかりやすくまとめられている記事があるので、これを参照してください。
　Sassで@mixinを作る時に知っておきたい基礎知識

＠extend

定義済みのスタイルを継承して新しいスタイルを作れる書き方です。


.tenopeeeWrap {
  width: 114px;
}

上記のを@expandで継承します。


.tenopeeeTxt {
  @extend .tenopeeeWrap;
  font-size: 14px;
  color: blue;
}

そしてコンパイルするとcssは下記のようになります。

.tenopeeeWrap, .tenopeeeTxt {
  width: 114px;
}
.tenopeeeTxt {
  font-size: 14px;
  color: blue;
}

あら便利。
でも、様々な記事に書かれていますが、初心者は@extendを使うことはあまりおすすめしません。
上記の例ではわかりづらいのですが、@extendをたくさん使うことによってスタイルシートがアホみたいに長くなることがあります。
気をつけて使えば便利な機能です。

＠import

CSSと同様に＠importを使って外部ファイルを読み込むことができます。
@charsetの直後に記述しましょう！
書き方は下記のとおりです。

@import 'kuma'; // kuma.scssを読み込み
@import 'sass/kuma'; // 相対パス

さいごに

もっとええ書き方あるんやで、と思った方はコメントでご教示ください。