【Sass, SCSSでコーディング】基本的な書き方からメリットを簡単に

スポンサーリンク
man

困ってる人

Sass(SCSS)でわざわざ覚えなきゃいけないのかなぁ?
Sassをメリットって、一体何なんだろう?
Sassでよく使う機能を必要最低限でいいから覚えたい


こんにちは、ヨロと申します。

今回は「Sass(SCSS)」について、

制作会社さんなどからお仕事を貰う時は「Sass」で、と言われる事も多く、割と必須スキル、

という事で、今回はSassの便利さと使い方について、

とりあえず、最低でもここら辺だけでも押さえておけばいいのでは?という部分を軽く。

スポンサーリンク

【Sass, SCSSでコーディング】基本的な書き方からメリットを簡単に

「Sass」を覚える事自体は、そこまで難しくはないのですが、比較的厄介だと思われるのが環境構築、コンパイルなどの準備や設定。

そこら辺に関してはこちらの記事にも目を通してみるといいかも。

Sass(SCSS)をCSSに変換, コンパイル – gulpの使い方・設定方法【自動化】

もし設定が上手くいかない、もしくはコンパイルとか面倒!もっと簡単な方法はないの?という場合には、

KoalaPreprosをインストールすればOK。

インストールが終わったら、あとはファイルをドラッグ&ドロップするだけで使えるようになるので、とても便利。

という事で、今回は「Sass(SCSS)」の便利さ、実際の書き方や使用方法についてという事で、

CSSではなく、Sass(SCSS)で書く事のメリット

{}で囲む事により他のCSS同士が干渉し辛いので、他のプロパティや値に邪魔されずに済む
・よく使うコードや設定、色を簡単に再利用できる
・Sassを使う事によって記述量を減らせる

具体的に、どんな感じに便利かというと、

例えば、CSSがこんな感じで、もし何か変更があった場合、通常だとクラス名を変える時に3ヶ所書き換える必要がある

// CSS

.menu {
	width: 800px;
}

.menu ul {
	font-size: 0px;
}

.menu li {
	font-size: 0px;
}

それが、SCSSだとこんな感じ。

// SCSS

.menu {
	width: 800px;

	ul {
	font-size: 0px;

		li {
		font-size: 0px;
		}
	}
}

1ヶ所で済む。

Scssの基本的な書き方はこんな感じで、入れ子構造で書いていくもの。

最初慣れない内は、書き方も面倒だし、逆に読みづらいかもだけど、すぐに慣れるはず。

SCSSの基本的な書き方:&記号

例えば、ボタンを作る時なんかに「hover」や「active」を使う時にも割と便利。

※hover: カーソルが乗っている時の動作
※active: クリックしている間の動作

// 通常のCSS

.button {
	// ここに内容を書いていく
}

.button:hover {
	// ここに内容を書いていく
}

.button:active {
	// ここに内容を書いていく
}

それが、SCSSだとこんな感じで書ける。

// SCSSの基本的な書き方 - &記号

.button {
	// ここに内容を書いていく
	
	&:hover {
		// ここに内容を書いていく
	}

	&:active {
		// ここに内容を書いていく
	}
}

SCSSの基本的な書き方:変数

例えば、こんな感じでよく使う色を変数にしておいて、

どこかに別の場所に保存しておいて、後から呼び出す事が可能。

// ここで変数に、色情報を格納しておいて、

$Twitter: #00acee;
$Facebook: #3b5998;

↓

.twitter-btn {
	background-color: $Twitter; // ここで呼び出す
}

.facebook-btn {
	background-color: $Facebook; // ここで呼び出す
}

こんな感じで使う事が出来る。

毎度わざわざ、Twitterの色って何色だっけ? Facebookって何色だったっけ?と、調べる必要がなくなる。

SCSSの基本的な書き方:@mixin, @include

自分が頻繁に使う設定を、@mixinに保存しておいて、@includeで呼び出すという使い方。

// @mixin, @include

@mixin 〇〇 {
	// ここに内容を書いていく
	//
	//
	//
}


↓ そして@includeを使って、@mixinに保存した設定を呼び出す ↓


.クラス名 {
	@include 〇〇; /* ここで@mixin ○○をいつでも呼び出すことが出来る */
}

例えばこんな感じ。

// SCSSの基本的な書き方:@mixin, @include

@mixin aaa { // 普段、頻繁に使う設定
	width: 300px;
	height: 300px;
}

↓
↓
↓

.box-1 {
	@include aaa; // ここでaaaを呼び出す
	background-color: red; // ここで追加で色を変えたり
}

.box-2 {
	@include aaa; // ここでaaaを呼び出す
	background-color: green; // ここで追加で色を変えたり
}

.box-3 {
	@include aaa; // ここでaaaを呼び出す
	background-color: yellow; // ここで追加で色を変えたり
}

こんな感じで、よく使う@mixinを外部ファイルにまとめておいて、使う時に@includeで呼び出すという使い方。

という風に、特によく使う機能はこんな感じ。

他にもいろいろな使い方があるので、興味のある方は調べてみるといいかも。

そして次に、Sassで作業をする際にはとても重要な、@import

これに関しては、少し長くなりそうなので、簡単なチュートリアルを別の記事で説明。

【Sass, Scss】@importの使い方 基本の書き方・簡単チュートリアルで練習

最後に

もし、始めの内は慣れずに書くのが難しいという事なら、

一旦まずはCSSで書いてみて、それをSCSSに変換するというのもあり。

その場合は、こちらのサイトとかを使うのもいいかも。

https://css2sass.herokuapp.com/

Sassの使い方としては、自分がよく使うfont-familyのセットを保存しておくのもありだし、

例えば、_font.scssに、この業界のフォントはあれとか、これとか、

_mixin.scssというファイルを作って、mixinをまとめる専用のファイルとして使ってもいいし、

あと、最後に注意点としては、

mixinや変数は使う場所よりも先に書かなくてはいけないという点。

それぞれのファイルの読み込むためには、@importというものを使わなくてはいけないので、

それに関しては、上で紹介した記事から確認してみるのもいいかも。

終わり。

コメント

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