Sassについての備忘録


概要

SassはCSSを効率的に書くための記法

Sassには2つの記法がある

  • SASS(拡張子は.sass)
  • SCSS(拡張子は.scss)

SASSとSCSSで書き方の違いがある例

SASSの場合

.div
  .container
    color: red

SCSSの場合

.div {
  .container {
    color: red;
  }
}

SASSの方が最初に作られたが、デザイナーに不評だったこともありCSSっぽいSCSSが現在の主流となっているので本記事はSCSSの記法をまとめることとする

Sassの導入方法(Mac)

Sassを動かすにはrubyが必要なのであらかじめ入れておく

gemを使ってSassをインストールする

$ sudo gem update --system
$ sudo gem install sass

Sass利用の流れ

① SCSS(.scss)ファイルを作成
② 作成したファイルに対してsassプログラムを噛ませるとCSSファイルが作成される

例として以下の内容でsample.scssを用意する

#main {
  width: 90%;
  p {
    font-size: 14px;
  }
}

これをsassコマンドを噛ませるとcssに変換してくれる

// --style expandedはインデントを整形するオプション
$ sass --style expanded sample.scss
#main {
  width: 90%;
}
#main p {
  font-size: 14px;
}

cssファイルとして保存を行う場合

$ sass --style expanded sample.scss:sample.css

変更を監視する

scssファイルに変更があった時にリアルタイムに.cssにも反映させる

$ sass --style expanded --watch sample.scss:sample.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
(変更を終了したい場合はCtrl+Cを押す)

SCSSの書き方

ホバーの書き方

a {
  text-decoration: none;
  
  // &は親要素(今回はa)のセレクタを表す
  &:hover {
    font-weight: bold;
  }
}

変数の使い方

変数のデータ型としては以下の5つが存在する

  • 数値
  • 文字列
  • 真偽
  • リスト

変数やif文を使っている例

$fontSize: 14px;
$imgDir: "../img/";
$mainColor: red;
$SubColor: rgba(255,0,0,0.9);
$debugMode: true;

#main {
  font-size: $fontSize - 2px;
  background: url($imgDir + "sample.png");
  // 以下の書き方でも可
  // background: url("#{$imgDir}sample.png");
  color: $mainColor;
  
  // 比較演算子は== != < > <= >=などが使える
  @if $debugMode == true {
    font-weight: bold;
  } @else {
    font-weight: nomal;
  }
}

上記のSCSSはsassを通すと以下のように変換される

#main {
  font-size: 12px;
  background: url("../img/bg.png");
  color: red;
  font-weight: bold;
}

ループ

// ループ for
@for $i from 1 through 2 {
  .xa#{$i} { font-size: #{$i}px; }
}
// ループ while
$i: 5;
@while $i < 7 {
  .xb#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}

cssに変換した結果↓

.xa1 {
  font-size: 1px;
}

.xa2 {
  font-size: 2px;
}

.xb5 {
  font-size: 5px;
}

.xb6 {
  font-size: 6px;
}

リスト

$items: sample1, sample2;

@each $item in $items {
  .#{$item}-label { background: url(../img/#{$item}_bg.png) 0 0 no-repeat; }
}

cssに変換した結果↓

.sample1-label {
  background: url(../img/sample1_bg.png) 0 0 no-repeat;
}

.sample2-label {
  background: url(../img/sample2_bg.png) 0 0 no-repeat;
}

マップ

Sass v3.3から実装された機能

$siteColors: (
  info: #aaaaaa,
  warning: #ffc107,
  danger: #dc3545
);

// eachを使う方法
@each $key, $color in $siteColors {
    .#{$key} {
        background-color: $color;
    }
}

// 単体で使う方法
a {
  color: map-get($siteColors, 'info');
}

cssに変換した結果↓

.info {
  background-color: #aaaaaa;
}

.warning {
  background-color: #ffc107;
}

.danger {
  background-color: #dc3545;
}

a {
  color: #aaaaaa;
}

関数

$siteWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count) {
  $padding: 5px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}

.grid {
  float: left;
  width: getColumnWidth($siteWidth, $columnCount);
}

cssに変換した結果↓

.grid {
  float: left;
  width: 184px;
}

デバッグ

printデバッグみたいに、@debugをするとビルド時にデバッグログを出してくれる

@function getWidth($hoge) {
  @debug $hoge;
  @return $hoge;
}

.sample {
  width: getWidth(1px);
}

デバッグログが出力される例

$ scss  --style expanded a.scss
a.scss:2 DEBUG: 1px

別ファイルに分ける方法

_で始まるファイル名にする必要がある、この分割したファイルをpartialと呼ぶ

  • main.scss
  • _settings.scss
  • _functions.scss

上記のように分割したいとしてmain.scssでpartialを読み込む方法

@import "settings";
@import "functions";

mixinについて

似たようなCSS設定をまとめることができる

@mixin font {
  font-size: 12px;
  font-weight: bold;
}

.label {
  color: red;
  @include font;
}

cssに変換した結果↓

.label {
  color: red;
  font-size: 12px;
  font-weight: bold;
}

引数も設定できる

// 初期値12pxとしている例
@mixin font($size:12px) {
  font-size: $size;
  font-weight: bold;
}

.label {
  color: red;
  @include font(18px);
}

結果は省略

extend(継承)について

スタイルを継承する

.msg {
  font-size: 12px;
  font-weight: bold;
}
.errorMsg {
  @extend .msg;
  color: red;
}
.warningMsg {
  @extend .msg;
  color: orange;
}

cssに変換した結果↓

.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
}

.errorMsg {
  color: red;
}

.warningMsg {
  color: orange;
}

mixinとの違い

  • mixinの場合だと共通部分がerrorMsg, warningMsgそれぞれ重複して書き込まれてしまう
  • 継承していることを明示的に記述できるのでわかりやすい

Nuxt.jsでSCSSを使う

個人でNuxt.jsを使うことがあって、SCSSで実装してみようと思ったのでついでにメモ

まずはnuxt.jsのソースコードを準備

$ yarn global add vue-cli
$ vue init nuxt-community/starter-template sass_sample
$ cd sass_sample
$ yarn install
$ yarn dev

http://localhost:3000/ でNuxtのページが見れるようになったはず

この状態で以下の修正を加える

$ yarn add -D node-sass sass-loader
$ vim pages/index.vue
- <style>
+ <style lang="scss">

styleに「lang=”scss”」と記述するとscssが記述できる


Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です