おおたおおた
2017/05/17

Sassを使いたい6つの理由!

この記事は約5分で読めます。

Sassを使いたい6つの理由!

CSS

Sassって聞いた事はあるけど何だか難しそう…
どうやって使ったらいいの??Sassってなんやねん!
と考えている方に、今回はCSSより便利に、美しく記述できちゃう、Sassの特徴をご紹介します♪

Sassについて

Sassは元々SASS記法で書かれていたものが、Sass3.0からCSSで書くことができるSCSS記法になりました。
全てCSSで書いても大丈夫です。
でもせっかくなので、少しずつ便利なSassを使ってみましょう。

1.変数

変数と言われると敬遠してしまうのですが…
例えばサイト全体でフォントや、色を合わせたい時に便利です!

/*sass*/
$font: Helvetica, sans-serif;
$color:#333;

.main{
  font-family:$font;
  color:$color;
}

↓これをCSSに変換すると…

/*css*/
.main{
 font-family:Helvetica, sans-serif;
 color:#333;
}

このように代入されます。

2.入れ子(ネスティング)

/*scss*/
.main{
	color:#666;
	h2{
		color:red;
	}
	.section{
		background: blue;
	}
}

このように書く事で記述がすっきりするだけでなく、
新しいクラスにもいちいち.mainを毎回記述するような手間を省く事ができます。

/*css*/
.main{
	color: #666;
}
.main h2{
	color: red;
}
.main .section{
	background: blue;
}

3.パーツに分けて別ファイルをインポートできる

例えば何か所かに共通するstyleを使用したい場合に有効です。

/* _button.scss */

.button{
	border:1px solid #000;
	background: #000;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

/*top.scss*/
@import 'button';

この1行で、使いたいstyleを引っ張ってくる事ができます。

4.四則演算が使える

33.333%と書かずに3等分のcssを書くことができます!

.box1, .box2, .box3{
	width: (100%/3);
}

5.制御構文が使える

ifとかforとかがcssでも使えるという事です!

それがどれだけ便利かと言うと…

各<li>要素ごとimg-1、img-2、img-3…といった画像を設定したい時ありませんか?

/*scss*/

@for $i from 1 through 5{
	.list li:nth-child(#{$i}){
		background:url('img-#{$i}.png');
	}
}
/*css*/

.list li:nth-child(1){
	background:url('img-1.png');
}
.list li:nth-child(2){
	background:url('img-2.png');
}
.list li:nth-child(3){
	background:url('img-3.png');
}
.list li:nth-child(4){
	background:url('img-4.png');
}
.list li:nth-child(5){
	background:url('img-5.png');
}

これです。これがあっという間にできてしまいます。

6.mixin

mixinも共通で使うようなstyleを使う時に便利。
引数が渡せるので、以下の例だといろんな大きさ、いろんな色の丸ができます!

/*scss*/

@mixin circle($width:50px, $height:50px, $bg_color:white, $radius:50px) {
  width: $width;
  height: $height;
  background: $bg_color;
  border-radius: $radius;
}

.box1 {
  @include circle(100px, 100px, red, 100px );
}

.box2 {
  /* 引数を指定しなければデフォルト値が適用される */
  @include circle();
}

まとめ

このようにSassはとっても便利な機能が満載です。

CSSには慣れてきたって方にはぜひSassに挑戦してみて下さい♪

今回はSassの特徴についてでしたが、次回はSassの導入方法について書きたいと思います。

Sassを使いたい6つの理由!
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。