CSS

【CSS】知らないと損をするSass|初心者向けに使用方法を解説

 

イケゾー
・みんな使ってるSassって何?
・Sassを使ってみたい

 

このような疑問にお答えします。

 

本記事の内容

  • Sassとは何か
  • Sassのメリット・デメリット
  • Sassの使い方

 

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

 

WEB制作を学んでいる方はSassという言葉を知っている方は、多いかと思います。

そこで今回は、まだSassを使ったことがない初心者向けに解説します。

それでは、どうぞ!

 

 

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

Sassとは何か

Sassとは、CSSをより簡単に書くことができる言語です。

Sassには2種類の書き方があり、SCSS (拡張子「.scss」)が主流です。

  • SASS記法 記述量が少なく済むが、従来のcssと互換性が低い
  • SCSS記法 従来のcssと互換性が高い ←本記事ではこちら
cssをより効率的に簡単に書くことができます
イケゾー

 

Sassのメリット・デメリット

メリットとデメリットについて説明します。

メリット

  1. 作業効率が大幅UP
  2. メンテナンスが楽になる

デメリット

環境の準備が必要

 

メリット1. 作業効率が大幅UP

Sassの最大のポイントで、作業効率がUPします。

理由は、以下の2点です。

  • 入れ子構造(ネスト)が使える
  • コードを使いまわせる

 

入れ子構造は、セレクタ(class名やid名)を何度も書く必要がありません。

一度ボタンのデザインを作ってしまえば、同じデザインを使い回せます。

Sassを使うと、cssより記述量が減るので、効率的に設計が進みます。

作業効率アップが最大の魅力
イケゾー

 

メリット2. メンテナンスが楽になる

メンテナンスが楽になる理由は、以下の2点です。

  • 変数で値を使いまわせる
  • 四則演算ができる

 

よく使うカラーや横幅(px)などを、変数に入れて使い回せます。修正する場合は、1箇所の変数を書き換えるだけで済みます。

変更も簡単なのは嬉しいね
イケゾー

 

デメリット 環境の準備が必要

唯一のデメリットは、環境の準備です。

「.scss」ファイルはブラウザが読み込めないので、「.css」ファイルに変換するコンパイル作業が発生します。

といっても簡単でして、無料ツールをダウンロードするだけです。次章「Sassを使う方法」でご説明します。

始めに一度設定してしまえば、実質作業はないよ
イケゾー

 

 

Sassを使う方法

Sassを使うためには、以下2つが必要です。

  • エディタ Sassを編集する
  • コンパイラ Sassをcssに変換する

 

エディタ

普段使っているエディタをそのまま使えます。

念のため、代表的なフリーエディタをご紹介しておきます。

いつも使っているエディタがそのまま使えます
イケゾー

 

コンパイラ

自動でコンパイラをしてくれるアプリが必要です。

コンパイラとは、Sass「.scss」ファイルを「.css」ファイルに変換することです。

代表的なフリーアプリをご紹介しておきます。

koala  ←本記事では、こちらを使います

prepos

 

koalaをダウンロードし、起動します。

 

Sassファイルがあるフォルダをドロップ&ドロップします。

または、左上の「+」をクリックしてフォルダ選択。

 

準備はこれだけで完了です。

koalaを起動している間、Sassファイルに変更が加えられると、自動でcssをコンパイルしてくれます。

今後は、コンパイラを起動するだけでOK
イケゾー

 

 

Sassを使ったサンプルコード

それではサンプルを見ながら、Sassのメリットを説明します。

 

入れ子構造

Sassの一番のメリットの「入れ子構造」です。

通常のcssでは、.headerの下階層のセレクタを指定する場合、.header ulのように、何度も.headerの記述が必要です。

しかしSassの場合、同じ.headerの下階層のセレクタを、入れ子構造ulだけで記述できます。

同じセレクタを何度も書かなくて良いことになります。

index.html
<div class="header">
	<ul>
		
	</ul>
</div>
通常のcss
.header {
	width: 100%; 
}
.header ul {
	padding: 10px; 
}
Sassの場合
.header{
	width: 100%;
	ul {
		padding: 10px;
	}
}
コードがスッキリするね
イケゾー

 

&記号

セレクタに:hover:activeを適用する場合、&記号を使用します。

入れ子構造を使った記述が可能です。

通常のcss
li{
	font-size: 16px;
}
li :hover{
	color: red;
}
Sassの場合
li{
	font-size: 16px;
	&:hover{
		color: red;
	}
}
コードがスッキリするね
イケゾー

 

変数

サイト内で何度も使用するカラーなどを、変数として設定できます。

使い回しが可能になり、カラーの変更時も簡単です。

Sassの場合
$mainColor: #3959b2;
$subColor: #43AB9C;

h1{
	color: $mainColor;
}
h2{
	color: $subColor;
}
変更時は、変数だけ変更すればいいから楽だね
イケゾー

 

mixin

何度も利用するボタンデザインなどは、使いまわせます。

Sassの場合
@mixin cardBox {
 width: 100px;
 margin: 10px;
}

.card1 {
 @include cardBox;
 background: red;
}

.card2 {
 @include cardBox;
 background: blue;
}

mixinを適用して、それぞれの背景色を指定しました
イケゾー

 

四則演算

Sassでは、値に計算を入力して計算させることができます。

Sassの場合
.thumb {
width: 200px - (5 * 2) - 2;
padding: 5px + 3px;
border: 1px * 2 solid #ccc;
}

 

実際の運用では、以下のように変数と組み合わせて使用することが多いです。

Sassの場合
$main_width: 600px;
$border_width: 2px;
 
.box {
  $padding: 5px;
  width: $main_width - $padding * 2 - $border_width *2;
}

サイトの仕様変更に簡単に対応できるね
イケゾー

 

 

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

 

まとめ

まだSassを使ったことがない初心者向けに、Sassの基本を解説しました。

ポイント

・Sassとは、効率的にCssを書く記法

・Sassを使うには、コンパイラ作業が必要(アプリで自動)

・入れ子構造が最大の特徴

・コードの使い回しができる

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS
-