SASSを使ってみた

naohiro19
記事: 256
登録日時: 15年前
住所: 愛知県

SASSを使ってみた

投稿記事 by naohiro19 » 8年前

SASS(サース)とは、CSSを拡張して、ミックスインや関数などの機能を組み込んだものです。Visual Studio 2013で「Web Essential 2013」を導入するとSASSファイルをコンパイルしてくれます。

たとえばCSSでborder-radiusプロパティを一括で設定したい場合に使えます。

CODE: 

@mixin rounded($radius: 5px) {
	-webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;

}

.test {
    @include rounded;
}

.test2 {
    @include rounded(10px);
}
このSASSをコンパイルすると以下のとおりになります。

CODE: 

.test {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.test2 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
testクラスはデフォルト値の5pxで反映されてますが、test2は引数で受け取ったものがそのまま反映されています。

SASSを使えば複雑な書き方もサポートしています。
最後に編集したユーザー naohiro19 on 2017年6月16日(金) 01:23 [ 編集 1 回目 ]
ページトップ
ISLe
記事: 2650
登録日時: 15年前

Re: SASSを使ってみた

投稿記事 by ISLe » 8年前

最近までRubyを使える環境なら簡単にインストールして使えるようになるというのを知りませんでした。

既存サービスのカスタマイズする場合とかのCSSは特に複雑になるので、SASSを通すようにしていじるのがすごく楽になりました。
ページトップ