突然CSSいじって言われたときSassなんだが、Sass...？とはにならないようにする為の20分

readme.md

突然CSSいじって言われたときSassなんだが、Sass...？とはにならないようにする為の20分 〜 はじめてのSass 〜

本日内容

やらないこと

• 環境設定
• 細かい機能
  • mixin(,include), placeholder, extend
  • Module
  • Dart版とそれまでの違い
• 詳細度
• CSS設計等
  • https://speakerdeck.com/dafed/managing-css-projects-with-itcss?slide=48

やること

• 概要 1分
• 競合 2分
• 記法 1分
• よく使う機能 15分くらい
  • Nesting
  • Variable, Interpolation
  • Parent Selector

概要

Sass is ﾂﾖﾂﾖなプリプロセッサ(前処理)でｵﾗｵﾗしてCSSに出力してくれるツール

CSS仕様上、CSSを動的にする訳にはいかない(マッチングと再レンダリングが恐ろしく増えるから) →せやﾂﾖﾂﾖ前処理 を CSSに変換したろ！

競合

• Less
• Sass(SCSS)
• Stylus
• PostCSS https://postcss.org/

記法

SASS記法と、後発のSCSS記法がある SCSS記法のほうが人気で、プラグイン対応も多い

よく使う機能

{ {} } Nesting

https://sass-lang.com/guide#topic-3

$ Variable

https://sass-lang.com/guide#topic-3

Interpolation(SassScript展開)

"#{$val}" 変数展開

$name: avatar;
.icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    font-size: "#{(100 / 10)}";
}

↓

.icon-avatar {
    background-image: url("/icons/avatar.svg");
    font-size: "10";
}

& Parent Selector (使わない方針の職場もある)

https://sass-lang.com/documentation/style-rules/parent-selector

参考URL

sass2css https://sass2css.herokuapp.com/

codepen https://codepen.io/

ユーティリティクラス作成例 https://gist.github.com/harapeko/449ce613d91b6c919111f169c92d9035