Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Sass基礎

Sassとは

Syntactically Awesome StyleSheet(文法的に格好良いスタイルシート)の略。
CSSを拡張した言語というか表記法。
変数や階層や関数を使えるように拡張されている。
CSSの肥大化が辛くて死にそうになった人が、プログラマブルにCSSを記載したくなり編み出したらしい。
実際使うときはコンパイラを通してCSSに変換して使う必要がある。
また、表記法としてもSASSとSCSSの2通りの書式がある。各々の所感は以下。

SASS
最初に作られたのはこちらの記法らしい。流行ってない。ファイルの拡張子は.sass
括弧やセミコロンを省略、予約語も記号等で表現したりする。
記載量を削減させようと規約ベースで頑張ってるイメージ。
初めてJavaプログラマがPython見たときの感想に近い。慣れれば早く書けるんだと思う。多分。

SCSS
後発で作られたのがこちら。主流はこちら。ファイルの拡張子は.scss
CSSの記法に寄せてあり、とっつきやすい。そして主流であるが故ネット上に情報も多い。
個人的に仕事で書くソースは誰もが読めるということが大事なので、こっちだけやればいいと思う。

SCSSの記載方法

変数定義

頭に$をつけると変数として扱われる。
CSS同様上から順に読まれるので先頭とかで定義することになる。
あと、スコープも効くので注意。

$aaaa: #ffffff;
.prof {
  background-color: $aaaa;
}

階層化

入れ子ができる。視覚的にまとまるし、親のclass名変わった時とかに便利。

.prof {
  background-color: #ffffff;
    .info {
      color:#aaaaaa;
    }
    p {
      color:#2b546a;
    }
}

階層化(hoverやaction等の擬似クラス)

&が親を指す。以下みたいに書くと有効になる。

.prof {
  background-color: #ffffff;
    &:hover{
      color:#aaaaaa;
    }
}

関数化

@ mixinのように書くと関数として宣言できる。使うときは@ includeで展開される。

@mixin layout-image {
  padding: 40px 28px;
  margin: 16px 8px;
  background-color: #ffffff;
}

.prof {
  @include layout-image;
}

関数化(引数あり)

関数に引数も取れる。これ便利。
あと四則演算も使える。

@mixin layout-image($padding, $color) {
  padding: $padding $padding / 2;
  margin: 16px 8px;
  background-color: $color;
}

.prof {
  @include layout-image(20px, #ffffff);
}

別SCSSファイルのインポート

読み込み対象のscssファイルは頭にアンダースコア、末尾に拡張子が必要。
_XXXXXX.scssというファイルを読み込む前提だと以下。

@import XXXXXX;

その他関数

SASSで定義されている関数がある模様。
全量はググってね。

関数名 概要 利用例
darken(色, パーセンテージ) 色を暗くする color: darken(#ffe400, 20%)
lighten(色, パーセンテージ) 色を明るくする color: lighten(#ffe400, 20%)
rgba(色, 透過値) 透過値変更 color: lighten(#ffe400, 0.5)

SCSSをCSSにビルドする

せっかくなので動かしたい。
preprosというツールがよさそう。
Rubyも含めてインストールしてくれるので、インストーラたたくだけ。
prepros

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?