ゆずめも

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

おしらせ

FreeTalk

１ヶ月以上空きましたね。お久しぶりです。

いきなりですがみなさんにお伝えしたいことがあります。
アルバイト時代から入れると、3年ちょいお世話になった現職を年内の活動を持って卒業します。

完全に某国民的アイドル様に影響されてますが

人生でそんな何回もあるイベントじゃないし、なんで辞めるのとかそんな簡単には書けないので、その後の進路とか含め卒業してから書こうと思ってるんですが（俺も怪文書書きたい）
ざっくり言うと会社との音楽性の違いみたいなもので、やりたこと目指したい方向性と会社がこの先進めていく方向が違うよなーというのを最近ずっと感じてました。

年内で卒業するといってもあと３ヶ月あるので、残りの時間で今の案件含め結果にコミットしていくぞという気持ちなので、残りの時間で周りの人に成長したなって所をアピって行きたいと思います。

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

CSS

先に見本を示すとこういう事がしたかった

See the Pen タイトルの横に線を引く by yuzu (@yuzu441) on CodePen.

参考にしたもの

beatdjam.hatenablog.com

やりたかったこととの差

参考にさせていただいた例では左右に線を引いて文字を真ん中に持ってきていて、左右どちらかの線が無い場合、文字サイズ分を引いた残りの部分全てに線を引いてしまいます

やりたかったこととしては左右両方ではなく、片方に特定の長さ線を引きたかった

やったこと

flex-growプロパティを使って長さを調節していたので、それを普通のwidthにして長さを指定することで期待したものができました

長さを変更したい場合はwidthの設定を変更すると長さを変更できます

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

CSS

久しぶりにWebページを作る仕事が来て js関連は調べてるけど、css関連は全く知らないのでcss周りについてちょっと調べた

情報収集

とりあえずパイが多いやつってなんなんだろうと思って調べた

ashleynolan.co.uk

PostCSSはなんかbabel的なやつでしょという理解はあったけどSass, Lessは全くわからなくてtwitterで聞いたら教えてもらえた

教えてもらったし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の素晴らしさがわかるみたいなのあれば教えていただけると嬉しいです