今さらSASSの書き方

どうも、kiokaです。最近淡路島に行って風邪を引きました(*´﹃｀*)

では本題のsassの書き方をメモって行きます！

Sassとは？

簡単に言うと、cssを簡単、かつ効率良く管理、制作できる奴です。（誤報あるかもしれない）

Sassの書き方１

sassの最も特徴的な部分は入れ子に書くことです。

例えば、

body {

padding: 10px;

   h1 {

   text-align: center;

      img {

      width: 600px;

      }

   }

}

という感じで、中に中に書いていく方式です。（ネスト）

上の場合cssだと

body {padding: 10px;}

body h1 {text-align: center;}

body h1 img {width: 600px;}

と、このようになかになかにかくことで、余計なクラス付けをさけつつ、省略してcssをかけるのがsassです。（わかりずらいかな？）

Sassの書き方２

sassはファイルを分けることができます！

私はここがもっとも魅力的でしたね。詳しく説明すると、

cssをhader.css,footer.css,main.cssとわけるとしますよね？

でもこれだとたしかに、どこのcssファイルに書かれているかわかりやすいですが、

実際にwebページで見るときにブラウザはcssをいちいち３つもcssファイルを読み込まないと行けない。だがしかし、sassの場合。sassファイルを分けて、一つのcssにまとめる機能があります。

うひょうサイコー(´・ω・`)

まず、メインとなるsassファイルを作ります。そしてそのファイルを作り、

部分ごとに分ける_header.scss,_footer.scssを作ります。

そしてメインに下記のように書きます。

@import "header";←これでheader.scssにかかれているsassを吐き出されます。

@import "footer";←これでfooter.scssにかかれているsassを吐き出されます。

すばらしいぃ。

これなら、別ページで同じheader,footerのcssなら新しくsassファイルを作って、上記の内容をかけばすぐ使えますね！（同じディレクトリならこの書き方でいけます。違う場合はパスを書いてね。）

Sassの書き方３

個人的にこれはなんか使いドコロが難しいのであまり使わないでいます。

javascriptでvar id = document.getElementById("news");みたいな感じで、省略できるやつあるじゃないですか？（くそながらい短くするやつ。）

これがsassでもでもできます。

mixinといのがあって、たとえばくそ長いfont-familyを設定するときってありますよね？それを何度も、cssに書くのは不効率ではないと思いませんか？そんなときに役に立ちます。

例えば、

@mixin font-family {

font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;

}

これで次から、

body {

@include font-family;←これだけで、上記のさっきの内容と同じになります。

}

超カンタン！しかも、引数があてられるので、その度にかわるオプションの数値などもかえることができます！

例えば、transition系や、transformなどうってつけですよね？ｗ

こんな感じでsassは楽しいことがいっぱいです。まだsassデビューしてない方は是非デビュってみてください！ではでは。