SASSのSCSS記法を触ってみた #Ruby

TL;DR

次の記事(2017年)をもとにSASSを触ってみました。
これからはcssはSassで書こう。

前提¹

OS: macOS High Sierra 10.13.6
Docker 18.06.0-ce (client, serverともに)

動作環境

手軽にrubyの環境を用意できるため、Dockerを利用²
sassは3.5.7がインストールされた。

Dockerfile

FROM ruby:2.5.1

RUN gem install sass

docker-compose.yml

version: '2'
services:
  scss:
    build: .
    volumes:
      - .:/var/www/scss
    stdin_open: true
    tty: true

動作させるには

docker-compose up -d
docker exec -it <フォルダ名>_scss_1 bash

SCSS記法でCSSを作ってみる

上記記事を参考に、変数・演算・関数・@extend(スタイルの継承)を試す

test.scss

$bg_color: lightgreen;
$strong_em: 2em;

@function Double($value) {
  @return round($value * 2);
}

div{
  background-color: $bg_color;
  margin: 0 auto;
  p{
    padding: 0 0 0 10px;
    span{
      font-size: Double($strong_em);
    }
  }
}

.btn{
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 3px;
  background-color: lightgray;
}

.btn-submit{
  @extend .btn;
  background-color: lightblue;
  font-size: 1.5em;
}

CSSの作成コマンドは以下。³
sass test.scss:test.css -style expanded

test.css

div {
  background-color: lightgreen;
  margin: 0 auto; }
div p {
  padding: 0 0 0 10px; }
div p span {
  font-size: 4em; }

.btn, .btn-submit {
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 3px;
  background-color: lightgray; }

.btn-submit {
  background-color: lightblue;
  font-size: 1.5em; }

/*# sourceMappingURL=test.css.map */

HTMLに当ててみる。

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SASSのテスト</title>
  <link rel="stylesheet" href="test.css">
</head>
<body>
  <div>
    div要素です。
    <p>
      div要素の中のp要素です。
      <span>span要素です</span>
      div要素の中のp要素です。
    </p>
    div要素です。
  </div>
  <input type="submit" class="btn">
  <input type="submit" class="btn-submit">
</body>
</html>

終わりに

フロントエンドの経験が全然少ない身の感想ですが、関数や継承が使えてなかなかいい感触。ドキュメントなど確認していきたい。
今回CSSファイルができたので、以下のエラーは追っていない。宿題事項

error No such file or directory @ rb_sysopen - expanded

最近rails開発でbundle installすると2019年3月でsassがdeprecatedと表示されるので、この機に対応もチェックする。(以下抜粋して引用)

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.
* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
sassc gem: https://github.com/sass/sassc-ruby#readme

脚注

バージョンは後ほど追記します。→追記しました ↩
docker-compose.ymlですが、Dockerfileでdebuggerを使うためのgemを入れていないため、stdin_openとttyの設定は不要だったと気づきました。 ↩
参考：「Sassチートシート」コマンド ↩

SASSのSCSS記法を触ってみた

TL;DR

前提1

動作環境

SCSS記法でCSSを作ってみる

終わりに

脚注

前提¹