3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SASSのSCSS記法を触ってみた

Last updated at Posted at 2018-08-02

TL;DR

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

前提1

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

動作環境

手軽にrubyの環境を用意できるため、Dockerを利用2
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の作成コマンドは以下。3
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>

scss触ってみた_20180801.png

終わりに

  • フロントエンドの経験が全然少ない身の感想ですが、関数や継承が使えてなかなかいい感触。ドキュメントなど確認していきたい。
  • 今回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.

脚注

  1. バージョンは後ほど追記します。→追記しました

  2. docker-compose.ymlですが、Dockerfileでdebuggerを使うためのgemを入れていないため、stdin_openttyの設定は不要だったと気づきました。

  3. 参考:「Sassチートシート」コマンド

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?