ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

Sass(SCSS)とは?使い方からメリットまで初心者向けに解説

CSS
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

現代の主流はCSSでコーディングするのではなくて、Sass(SCSS)が主流って聞くけど本当?

Sassとはなに?Scssを使うとどのようなメリットがあるのか、使い方や導入方法など基礎的な情報を教えて欲しい!

今回の記事では、今話題のフロントエンジニアは必ず使うSass(SCSS)に付いて基礎知識を網羅して初心者の方に解説します。

このSassの基礎知識が理解できるようになり、実際に使いこなせるようになると、、、

  • デザインのコーディング速度が格段に早くなる
  • CSSの修正が容易になる
  • 実務で通用する技術を使えるようになる
  • CSSのファイル管理が綺麗にできる

このようなメリットが得れます!

Hiko
Hiko

実際に実務の現場でWebサイトを作る際はCSSではなくて、Sassを使ってコーディングすることがほとんどです!

こんな方にオススメ
  • Sassはいいよ〜!とか聞くけど何か知らない方
  • CSSのコーディングが遅い方
  • 爆速でCSSを書きたい方
  • Sassの導入〜使い方を知りたい方
スポンサーリンク

Sass(Scss)とはそもそもなに?

Sass(サス)とは、超簡単に言うと、、、

「CSSをより効率的に書ける言語です!」

つまりSassとCSSは密接な関係があることをまずは覚えておいてください!

Sass=Syntactically Awesome StyleSheet を略した言葉で、

  • Syntactically = 構文的に
  • Awesome =  驚くべき
  • StyleSheet = スタイルシート

と言う意味になり、具体的に言うと「変数や関数(構文的に)を使うことによって、驚くくらいに早くスタイルシートを作ることができる!」と言う解釈でいいでしょう!

つまりイメージ的には、CSSでは10分かかったスタイリングがSassを使うことにより3分でスタイリングできてしまうと言うことです!

Sassは数学で例えると「掛け算」

例えば2つの数式があったとして、、、

  • 2+2+2+2+2+2+2+2+2+2+2+2+2+2+2=30
  • 2×15=30

これのどちらが計算しやすいですか?と聞かれた時、圧倒的に後者の「2×15」ですよね!

CSSとSassを比較するとこのようになります。

このように、スタイリングの実行結果は同じでも、SassとCSSでの記述法は違うことが分かります。

つまり、Sassは先程の足し算と掛け算の比較のように、

  • 記述が少ない
  • コードが見やすい

大きくこの2つのメリットがあると言えます!

ネコ君
ネコ君

Sassを使えば、早くスタイリングできることはよく分かったよ!

SassとScssの違い

タイトルにも書いてあるように、SassScssとも呼ばれたりしています。

SassとScssはスタイリング処理は同じだけど、書き方が少し違います。

Scss

.nav{
    margin:10px
    a{
     color:#12cacc;
     padding:10px 20px;
   }
}

Sass

.nav
    margin:10px
a
    color:#12cacc;
    padding:10px 20px;
}

このような少しの違いですが、ScssはCSSの名残を受けていて、SassはRubyの記述法に似ています。

ただ、どちらも実行結果は同じになるので、書きやすい方でコーディングするといいでしょう。

拡張子には気をつけよう!
  • Sassを書く場合:.sass
  • Scssを書く場合:.scss

Sassを使うメリット

先ほどは、Sassを使うと、「記述が少なく、コードが見やすくスタイリングできる」ことをご紹介しましたが、他にもSassを使うメリットはあるので、具体的にどのようなことができるかご紹介します。

Sassで出来る事・メリット
  • 文字サイズ、色コードを変数で指定できる
  • 入れ子でセレクタを管理できる
  • 擬似要素の書き方が簡単
  • メディアクエリの指定が楽

このようにCSSをコーディングする際に、多くの方がストレスを抱える部分をほぼほぼSassでカバーすることができます。

スポンサーリンク

文字サイズ、色コードを変数で指定できる

CSS

body{
background:#1353A0;
}
a{
color:#BE3468;
}

Scss

$main-color:#1353A0;
$sub-color:#BE3468;

body{
 background:$main-color;
}
a{
 color:$sub-color;
}

$main-color:#1353A0; のように変数で色コードを指定することにより、「あのカラーコードの値なんだっけ?」と迷うこともありませんし、全体のメインカラーを変える際にも、変数の値を変更するだけなのでとても簡単です。

色コード以外にも、フォントサイズや、フォントの指定にも使えまうす。

入れ子でセレクタを管理できる

CSS

.nav{
padding:10px
}
.nav a{
color:#1353A0;
}

Scss

.nav{
  padding:10px
  a{
   color:#1353A0;
   }
}

このように、親要素と子要素を入れ子のようにして、スタイリングすることができます。

このようにすることで、記述を少なくできる事は勿論、同じ要素のスタイリングをひとまとまりにすることができるので、後から編集する際に非常にやりやすいです。

擬似要素の書き方が簡単

CSS

a{
background:#1353A0;
}
a:hover{
background:#135300:
opacity:0.7;
}

Scss

a{
 background:#1353A0;
 &:hover{
 background:#135300:
 opacity:0.7;
 }
}

擬似要素を指定する場合は、入れ子にできる+&を使って省略することができます。

これも同様、入れ子にすることで、ひとまとまりにできるので、非常に見やすく編集も簡単です。

メディアクエリの指定が楽

CSS

@media screen and (max-width:1440){
 body{
  background:red;
 }
}
@media screen and (max-width:740px){
 body{
  background:blue;
 }
}

Scss

//ここでpcとspの幅を定義
$pc: 1040px; 
$sp: 740px; 
//ここでmax-widthを指定
@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}
//@includeする事で、上記が適用される
.body {
  @include pc {
    background-color: red;
  };
  @include sp {
    background-color:blue;
  };
}

「あれ?Sassの方が記述長いじゃん!」と思うかもしれませんが、はじめにPCとSPの幅を定義しておくことによって、何度も@media screen and (max-width:1440)とかく手間が省けます。

初心者の方は、慣れるまで少し難しいですが、慣れるととっても早くレスポンシブ化することが可能になります。

Sassの使い方

Sassを使うには、CSSのようにファイルを作ってhtmlタグの<head>にパスを通せば使えるわけではなく、Sassを使えるように環境を作る必要があります。

つまり、、、

<link rel="stylesheet" href="/css/style.sass"/>

このようにstyle.sassファイルを作って、パスを通しても使うことができません。

SassはCSSにコンパイルする必要がある

SassはCSSをより書きやすくしたものなので、Sassで書いたコードをCSSにコンパイル(変換する)必要があります。

SassをCSSに変換するには、Rubyをインストールしたり、Preprosと呼ばれる変換ツールでコンパイルしたりしますが、僕がオススメする最も簡単にSassからCSSに変換する方法はVSCodeの拡張機能を使う方法です。

VSCodeの「Live Sass Compiler」と言う拡張機能をインストールするだけで、Sassをコーディングすれば自動で同じCSSファイルを生成してくれるとっても便利な機能です。

→ Live Sass Compiler

このようにmain.sassを書くと、自動的にmain.cssが生成されるので、、、

<link rel="stylesheet" href="/css/main.css"/>

このようにmain.cssのパスをhtmlファイルに通せば、Sassで記述したスタイリングが適用されます!

VSCodeでSassのコンパイル環境(CSSに変換)を一瞬で構築する方法

Sassとは?使い方・メリット まとめ

ネコ君
ネコ君

Sassってすごーい!簡単に習得できるし、CSSから卒業しよう!

いかがでしたでしょうか!

Sassは他のプログラミング言語習得みたいに、3ヶ月ほどの学習期間は必要なく、書き方さえ覚えれば1日たらずで習得できるので、ぜひSassを使いこなせるようにしましょう!

実際の実務の現場でもCSSで1からコーディングするのではなく、Sassを使うことがほとんどです!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
CSS
HikoPro Blog

コメント

タイトルとURLをコピーしました