2018.02.15 フィンテック社会一変

こんにちは東京営業部・採用担当の武下です。 最近新聞やビジネス詩を読んでいてフィンテック系の記事が激増したなという印象を持ちます。 世の中がどんどん変わる。それも身近なところで変わる。 記事と自分の家族を照らし合わせて想… 続きを読む

2018.02.13 やっと、新PCを購入

初めて投稿します。 福岡、運用インフラチームの兒嶋です。 ご覧いただきありがとうございます。 自宅で使っているPCの話です。 もうかれこれ10年近く使用していた、TOSHIBA dynabookですが、 いかんせん古くO… 続きを読む

2018.02.08 CSSをSass(サス)で書く〜要素をネストする〜

東京開発チームの深尾です。

まだまだ寒い日が続きますが、あとひと月ちょっとで桜が咲くと思うと
気持ちだけでも暖かくなります。

今日はSassの書き方の特徴である要素のネストについて書きます。

CSSだと要素を何度も書かなければいけないのに対し、
ネストできるので記述量が減り、且つ視覚的にも見やすくなる利点があります。

具体的に我が社のホームページで見て見ましょう。

 

↓小さくて見にくいですが  div.content-wrapper という要素があります。     

 

デベロッパーツールでCSSのファイルを確認するとこのように

赤ワクで囲んでいるところがclassName=content-wrapperの記述です。

css

            

 

このCSSをSassのscss記法で書くとこのようになります。↓

.content-wrapperの記述が1回で済みます。構造も見やすくなっているでしょうか?

scss

 

ちなみにSassの記法には2種類あって
①sass記法(拡張子が.sass  )
②scss記法(拡張子が.scss)

今は②scss記法が主流のようです。上の例もscss記法

css をscssに変換してくれるサイトがあるので興味のある方は見て見てください。
ピンクが基調のおしゃれ可愛いページです。

https://www.sassmeister.com

では今日のところはこの辺りで・・・