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