Sass (.sass) / SCSS (.scss) は Sass 言語が持つ 2 つの記法ですね
主流は後者で、CSS のスーパーセットなので既存の CSS をそのまま持ってこれます
前者はインデントベースの記法です
node-sass があればどっちもコンパイルできます

Less はまた別のメタ言語で今はあまり使われてないです
— Chalk (@chalkygames123) August 15, 2018

教えてもらったしsass使ってみることにしました

sassについて

なんでsass(scss)って書かれてるのかと思ったら記法が２つあるみたいで

インデントでブロックを表すもの（Sass）と、cssのように{}でブロックを表すもの（Scss）がある

sassを使ってみる

（sassというか書いてるのscssですが）そもそもはsassはrubyで動かすツールみたいですが、フロントエンドなんだからNode.js使いたいですね

というわけでnode-sassを使うことにしました

www.npmjs.com

インストール

適当にプロジェクトのディレクトリを作ってnpmからツールを取ってくる

yarn add -D node-sass

使ってみる

scssはセレクタを入れ子にできるみたい

// src/style.scss
div {
  color: red;
  p {
    color: blue;
  }
}

これをnpx node-sass src/style.scss dist/style.cssでコンパイルすると下みたいな感じになるらしい

/* dist/style.css */
div {
  color: red; }
  div p {
    color: blue; }

アウトプット見るとclassを入れ子にしていくことでnamespaceっぽいことができるイメージなんだろうな

まとめ

とりあえず動かせることはできた
sassを使うことで入れ子にしたり、変数使ったり、forでコード生成したりもできるらしい

最初に貼ったsurvey見ても、結構生css使ってる人とか多いっぽいしbemで書けばなんとかなるなと考えている

なのでもうちょっと触ってみてプロジェクトに導入するかどうかを決めようと思ってる

もしこれ読んだらSassの素晴らしさがわかるみたいなのあれば教えていただけると嬉しいです

2018-07-30

dockerでフロントの開発環境を作ろうとした話

javascript Docker

こんにちは、ソウルジェムが日々濁っているゆずです

タイトル通り今回は開発環境をdocker化しようとした話なんだけど結果的に実現できず妥協したので、いい方法知ってる人はtwitterなりで教えていただけると嬉しいです

tl;dr

ローカルでyarn installして、ビルド自体はdocker上でやるようにした
ローカルでyarn installしとかないとエディタが型解決したりできない
ビルドした成果物だけが欲しい時はdockerさえあれば成果物だけ取得できる

動機

本番は使わせてもらえなさそうなので、開発環境ならdocker化しても文句言われないしぼっちプロジェクトチームなのでバレないだろうと思いたち、とりあえず手元にあったフロントのプロジェクトをdocker化にチャレンジしてみた

実現したいこと

docker-compose up -dしたら開発に参加できる*1

やったこと

とりあえずdocker-compose.yml書く

既に1000000煎じくらいなので誰かがやってるだろと、検索したらこれだよみたいなの見つけた

qiita.com

これを参考にdocker-compose.yml書いた

version: "3"
services:
  build:
    image: node:10
    working_dir: /app
    restart: always
    command: yarn run watch:dev # yarn install && webpack -d -w
    volumes:
      - .:/app
      - node_modules:/app/node_modules
volumes:
  node_modules:
    driver: local

これでいいかーという感じだったが、これだとエディタ（例えばVSCodeとか）がimport解決できないし、git cloneした時にnode_modulesがdocker権限でできてしまいyarn installできなくなってしまう

結局

.gitkeepみたいなの置くのは嫌だったので、結局volumesにnode_modules以外のビルドに必要なファイルを個別で指定するようにした

version: "3"
services:
  build:
    image: node:10
    working_dir: /app
    restart: always
    command: yarn run watch:dev # yarn install && webpack -d -w
    volumes:
      - ./public:/app/public
      - ./src:/app/src
      - ./package.json:/app/package.json
      - ./tsconfig.json:/app/tsconfig.json
      - ./webpack.config.js:/app/webpack.config.js
      - ./yarn.lock:/app/yarn.lock
      - node_modules:/app/node_modules
volumes:
  node_modules:
    driver: local

基本的にはsrc以下が増えていくはずなので、volumesを変更することって無いだろうなということで、これで少しの間開発していこうと思ってる

これで一応docker-compose up -dとかして、手元でyarn installすれば開発できる*2

*1:結果的には妥協した

*2:この2度手間感なんとかしたい…

ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

タイトルの横に線を引きたい

参考にしたもの

やりたかったこととの差

やったこと

数年振りにcssについて調べてsassを書いてみた

情報収集

sassについて

sassを使ってみる

インストール

使ってみる

まとめ

dockerでフロントの開発環境を作ろうとした話

tl;dr

動機

実現したいこと

やったこと

とりあえずdocker-compose.yml書く

結局