[Web制作日記#21]Sassを解説してみる。

最近はやっとお盆休みが終わりそうで嬉しいベアさんです。

ベアさん

今日は「Sass」って技術をアウトプットしてみるよ！

ちなみに、アウトプットシリーズの全体像です↓

とはいえ、Sassは全然覚えてないのでアウトプットできないかもです(企画倒れ笑）

もちろん、「Sassって何？」って人でも読めるように書きました。

日常ネタも挟んでますので、興味がある方はぜひ最後まで見てくださいねー！

ベアさん

プログラマー / 起業家

Profile

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。

プロフィールを読む

X

Sassを解説してみる

アウトプットシリーズ６弾です！

今回もいつも通り

の２つを解説します。

それでは、見ていきましょう↓

頭の中にあること

前提知識

悩む人

そもそもSass(サス)って何？

って人もいるはずなので、前提知識から解説します。

SassとはCSSの拡張言語のことです。要するにCSSをもっと使いやすく、高性能にしたのがSassなわけです。

そのため、Sassのメリットは

などがあります。

ただ、もちろんSassにもデメリットはありますよー↓

などなど…主にハードルが高いってことですね。

また、Sassには

の２つがありますが、一般的にScss記法の方が有名です。(Sass記法はムズイ…)

なので、基本SassといえばScss記法のことを指してる方が多いし、以降でもScss記法を前提にコードの書き方などを解説します。

以上が前提知識です。

ここからはSassの機能などを書きますね。

CSSと違うこと

CSSと違うのは主に

です。

実はCSSってスタイルシート言語で、プログラミングじゃないんですよね。(デザイナー領域)

なので、変数や関数などはCSSにはありません…

しかし、Sassには

などが追加されてます。

プログラマーとしての一面を持つ僕的にはとっても嬉しいですし、割とSass学習しやすかったです。

他にも環境構築が必要などもあります、そんな感じ。

基本的な書き方

前提として、CSSのコードはSassでも使えます。(なので、ファイルの拡張子だけ.scssに変更すればOK)

CSSと違いがある点を一つずつ書きますね↓

●入れ子

まず、SCSSは入れ子で共通化をすることができます。(見た方が早そう)

CSSで書いたコード↓

.sample-class h1 {
  padding: 10px;
}

.sample-class p {
  padding: 5px;
}

上のコードをSassで書き直すと

.sample-class {
  h1 {
    padding: 10px;
  }

  p {
    padding: 5px;
  }
}

になります。

いかがでしょうか？sample-classの記述が一つですみましたね。

これがSass記法の１番の特徴です。ぜひ覚えてくださいね

●&(アンパサンド)

&を使うことで親要素を取得することができます。

&を使う前のコードはこちら

.block-name {
  padding: 15px;
}
.block-name.element-name {
  padding: 10px;
}
.block-name.element-name.modifier-name {
  padding: 5px;
}

上のコードを&を使って書き直すと

.block-name {
  padding: 15px;

  // block-name element-name クラスに
  &.element-name {
    padding: 10px;

    // block-name element-name modifier-name クラスに
    &.modifier-name {
      padding: 5px;
    }
  }
}

になります。

正直、アンパサンドって名前を忘れてましたが書く中で思い出しました！

ただ、ネットの記事を見る感じこんな使い方はしなさそうかもです？笑(あくまで参考程度に。)

割と使いそうなテクニックなので、ぜひ覚えてくださいね。

●変数

プログラミングでお馴染みの変数がSassでも使えます。

基礎文法は簡単で

って感じで定義して、色んな箇所で使えます。

例えば、下記のようなコードは赤の色が重複してます↓

.block-name {
  color: rgb(206, 20, 20);
}

.block-name2 {
  background-color: rgb(206, 20, 20);
}

変数を使うと以下のようになります。

$red: rgb(206, 20, 20);

.block-name {
  color: $red;
}

.block-name2 {
  background-color: $red;
}

プログラミングでよくいうDRYの原則に沿った良いコードになってますね。

変数もよく使いそうなので、押さえておきたいところです。

●if文

Sassにはif文っていう条件分岐もあります。

例えば以下のようなコードがあるとします↓

.block-name {
  color: blue;
}

上記のコード、if文を使って書くことができます。

$red: 0;
$blue: 1;

.block-name {
  @if $red == 1 {
    color: red;
  } @else if $blue == 1 {
    color: blue;
  }
}

これなら、0と1の数字を変えるだけで変更できますね！

…って

って思った人もいるはずです。

正直…僕も本当に使うのかわからないです笑

ただ、関数とセットで使うことも多そうなので以下も合わせて見ていただければと思います↓

●関数

前提として、Sassにはネイティブ関数があります。(デフォルトで使用できる便利な関数のこと)

ネイティブ関数とは、例えば

などがあります。

例えば、

.block-name {
  // 31pxになるよ
  // #{}はインターポレーションと言って、変数が使えないところで使えるようにする呪文だよ
  padding: #{round(30.923)}px;
}

などで使うことができます。

もちろん、自作関数もSassを使ったら実装できます。(僕が思ってたのはこっち)

@function originalRound($number) {
  @return #{round($number)}px
}

.block-name {
  padding: originalRound(30.923);
}

注意点として、変数もそうですが使い時よりも上に記述する必要があるみたいです。

気をつけて使いましょう！

●ミックスイン

先に言っておきます！(何するのか？すら忘れてました笑)

ただ、そういえば大切やったな〜って用語だけ覚えてたので書きました。

コード見た方が早そうです↓

@mixin initBox {
  padding: 4px;
  border: 1px;
}

.block-name {
  @include initBox
}

CSSに直すと以下のようになります↓

.block-name {
  padding: 4px;
  border: 1px;
}

要するにこっちはCSSの関数なわけですね。なので、もちろん変数だって使えます

@mixin initBox($value) {
  padding: $value;
  border: 1px;
}

.block-name {
  @include initBox(5px)
}

案の定大切な部分でよく使いそうでした。しっかり押さえておきます。

調べてなるほど！って思ったこと

いや、&(アンパサンド)あたりから全然わからなくて、書いてないですがほとんど調べてました笑。

具体的に分かってなかったのは

などがあったので、頭の中にあることの後半はほぼ調べました。

ベアさん

うぉぉぉ、次は頑張るよ！

そんな感じです！

Mrs. GREEN APPLEが好きって話

日常ネタとして今日は、僕の好きなバンド「Mrs. GREEN APPLE(ミセスグリーンアップル)」についてお話ししたいなと。

ご存じない方もいると思いますので、ざっくり紹介します↓

ちなみに、以降は略して「ミセス」って書くよ。

かれこれ6年ぐらいファン

僕が初めて聴いたのは「青と夏」って曲です。

その曲が出たのが大体6年ぐらい前なので、僕が11歳の頃ってわけっすね。

ベアさん

もう6年も経つのかー！

6年の間に色んな変化ありました。例えば、

などがあります。

僕も中学生から高校生になって、もう少しで社会人になりそうです。(まさに青春を一緒に駆け抜けたアーティストです笑)

書いてて思ったのですが

な日記になってるかもっす笑(日記やから許してね)

あ、あともう一つ。僕は古参アピールをしたいわけじゃないことは注意です！

僕はたくさんの人にミセスが好きになってもらえたら嬉しいし、ファン(JAM’s)に年月は関係ないと思ってますので。

おすすめの曲3選

せっかくなのでおすすめの曲を紹介できたらと思います！

1つ目：ロマンチシズム

ベアさん

爽やかな気分になれる曲。王道だけど、僕は一番好きだよ！

２つ目：ライラック

ベアさん

いつまでも高校生でいたいぃ…

３つ目：PARTY

ベアさん

ちょっとマニアックかもだけど、「今日を精一杯生きよう！」って思える…そんな歌だよ

って感じです！

気になった曲がありましたら、ぜひ聴いてくださると嬉しいです。

なんであれ、人を喜ばせるって素敵

ミセスで一番印象に残ってるのは、無期限の休止活動(フェーズ１の終了)です。

ファンの人は

など思った人も多いんじゃないでしょうか？

僕も帰ってくるって思ってましたけど、休止前ほど人気にはならないかなって思ってました。

ですが…活動再開(フェーズ２の始まり)しても復活しましたね。

ベアさん

今では日本を代表するアーティストになっちゃったよ〜(多分)

休止前、休止後もずっと人を喜ばせてて素敵やなって思います。それに、ミセスは「本物」なんだと痛感しました。

これからも応援しています！

そんな感じ。

次回：jQueryを解説してみる

次回はjQueryのアウトプットをしてみるよ！これも1冊本を読んだだけなので、うまくできるか謎ですが…

もちろん、日常ネタもセットで書きます。

お楽しみに！

P.S

22話書いたよ↓

あわせて読みたい

[Web制作日記#22]jQueryを解説してみる。

Web制作日記のアーカイブはこちら↓

あわせて読みたい

Web制作日記のアーカイブ【随時更新】

ベアさん

プログラマー / 起業家

X

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。