CSSをもっと扱いやすく!Sass (SCSS)の基本を学ぶ

Sassとは、CSSをもっと扱いやすくした言語です。

基本的に、CSSでできることはSassで全てできると思います。

では、SassはCSSと何が違うのか。

 

1. コメントの仕方

CSSだと /*コメントここ*/ のように記述します。

これ、はっきり言って面倒です。

しかし、Saaaだと

//コメント

よく他のプログラミング言語でも使われているスラッシュを2回打つだけでコメントが書けます。何気にすごい便利です。便利というか、快適です!

 

2. 変数が使える!

これが、CSSとは機能面で大きく異なる点です。

例えば、私がよく使うグレーは、#f7f8f8なのですが、

$myColor: #f7f8f8;

div {
  background-color: $myColor;
}

このように自分で定義した変数を使うことができます。

あの色なんだっけ?ってならずに済みます。

 

さらに、変数の中には、もっとCSSを入れることができます。

@mixin base {
  background-color: #000;
  color: #fff;
}

div {
  @include footer-base;
}

こんな具合に@mixinと書くことで、その中にCSSを登録しておき、

@includeで呼び出すことができるのです。

これで同じコードを書かなくて済みます。

さらに、関数みたいなこともできてしまう!

数学でいうf(x)みたいなものですね。

@mixin base($color) {
  background-color: gray;
  color: $color;
}

p {
  @include base(blue);
}

3. ネストが使える!

例えば、こんなcss

.classname p {
color:#000
}

.classname p span {
color:#red
}

 これが、scssだとこんな感じに書けてしまいます。

.classname {
p {
color:#000;
}

span {
color:red;
}
}

 

 この他にもimportなどの便利な機能があったりします。

 

jadeやscssを導入することで記述量が減り、コードを書くスピードが上がります。

もちろん慣れるまで少し時間がかかりますが。

yamamotoo.hatenablog.com

 

仕事としては、「面倒くさい」という感覚はあまり良くないかもしれませんが、

効率化するために「面倒くさい」という感覚を大切にしたいです。

 

jadeとscss使ってみてはどうですか?