解説

SASSとは、CSSでは不可能なプログラミング的な記述のできるシステムである。
また、Compassとは、SASSを補足し、ベンダープレフィックスを自動的に追加してくれるシステムである。
CSSのみで記述すると、煩雑になりやすく、同じような記述をしなければならない。
当然、間違いも起こりやすく、修正時にも労力が必要となる。
このようなことを避けるためにも、CSSを作成する上で、SASS・Compassを使用しないと言った選択肢は存在しないと言っても良い。
更新日:2017年2月1日

ネスト(入れ子)が使え、記述が省略できる

簡素に記述できることで、確実に間違いも少なくなり、他人が見ても、どこで、どのような定義がされており、その目的がどのようなことであるのかが、判断しやすくなる。
サンプル


a
{
	color: black;
   	&:hover
	{
       		color: blue;
   	}
}

変数を使用し、一箇所の修正で全て変更できるようにできる

変数を利用できることで、同じような値を複数の場所で記述することが不要となる。
例えば、「color」属性が挙げられる。
CSSで記述すれば、同じ値を、複数の場所で記述する必要があり、修正時に全て修正する必要性が発生し、開発効率が格段に落ちる。
サンプル


$base_color: #000;
 
p
{
    font-color: $base_color;
}

演算を使用することができる

これにより、「Calc」などを使用しなくて済む。
サンプル


$base_width: 800px;  
   
#main
{  
    width: $base_width - 100;  
} 

関数を使用することができる

これにより、同じような記述を避けることが可能になり、CSSの記述でありがちな、無駄で、助長な定義が不要となる。
サンプル


@function half($value)
{
	@return round($value / 2);
}
 
.box
{ 
	width: half(300px); 
}

複数のSCSSファイルを1つに纏めることができる

よく使用する定義セットを作成しておくことで、同じようなCSSを記述することが不要となるだけでなく、使用すればする程、質の良いコードとなる。
サンプル


@import "top.scss";
@import "about.scss";
@import "news.scss";
...

重要ファイル名称の先頭に「_」(アンダーバー)をつけると、CSSに変換されることのない、インポート専用のものになる!

制御文を使用することができる

これは、テスト時に特に有効である。
if文や、for文も使用可能である。
サンプル


$general: true;
 
@if $general
{
	.content
	{
		float: left;
	}
}
@else
{
	.content
	{
		float: none;
	}
}

必須要素

情報

注意事項

重要
  • なし。

更新履歴

2017/01/30 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.