Sass / SCSS
参考:
Sass – Syntactically Awesome Style Sheets [Official]
使い方
参考:
Sass 応用 ファイル分割 (@import)、関数 (@function)、継承 (@extend)、@mixin、@include、@content | はしくれエンジニアもどきのメモ
Sass の基本的な使い方のメモ | Web Design Leaves
Sass 3.2 で実装された新機能がヤバい | WebTecNote
知らないと損する Sass の組み込み関数徹底解剖 | イソップブログ
スタイルガイド
参考:
Sass Guidelines | Hugo Giraudel
Grandparent Selectors
参考:
How to do SASS Grandparent Selectors | codeburst
calc と変数を同時に使う
変数を #{}
で囲う。
$var: 10rem; .content { width: calc(#{$var} + 10px); }
参考:
SASS の変数と、CSS3 の calc() を併用するには – Qiita
@if 文で and や or を使う
@if ($var1 == value1 and not ($var2 == value2)) or ($var3 == value3) { // ... }
参考:
Using multiple conditions (AND) in SASS IF statement – Stack Overflow
@each
参考:
each や for を使って繰り返し記述する手間を省く | NxWorld
each が思ってたより難しかった | コンパイラかく語りき
@mixin / @include と @extend の使い分け
参考:
Sass の @mixin を使うと CSS ファイルに重複するコードが増えるなと思っていたけれど @extend を使うと解決した | rakuishi.com
@import でグロブを使う
参考:
Sass の複数の import は glob を使って一つにまとめると幸せ – Qiita
split
参考:
How to split a string into two lists of numbers in SASS? – Stack Overflow
[request] str-split function · Issue #1950 · sass/sass – GitHub
join
参考:
join a property list by commas using sass – Stack Overflow
デバッグ
@debug
@warn
type-of
quote
参考:
テストやデバックで使える @debug と @warn | Web 制作者のための Sass の教科書
Sass のデータタイプについて | Web 制作者のための Sass の教科書
ソースマップ
参考:
今更知る SCSS のソースマップの存在意義 | 乱雑モックアップ
gulp-sass + gulp-autoprefixer + gulp-sourcemaps で Source Map を出力したい | イナヅマ TV ログ
Sass 用のソースマップを作成してコーディング作業を更にもっと爆速化だ! Gulp Sass 向け | Garney.Web
node-sass と Webpack で SASS の sourcemap の行数が正しく表示されない – teratail
Using source maps with Sass 3.3 | The Sass Way
BEM の書き方
参考:
BEM の modifier と Sass の正しい書き方 | Web-Guided
ライブラリ
Sassy-Strings
参考:
at-import/Sassy-Strings: Advanced string handling for Sass – GitHub
SassyLists
参考:
プレイグランド
参考:
SassMeister | The Sass Playground!
フレームワーク
Ekzo
参考:
ArmorDarks/ekzo: Functional Sass framework for rapid and painless development
Bourbon
参考:
Bourbon – A Lightweight Sass Tool Set [Official]
thoughtbot/bourbon: A Lightweight Sass Tool Set – GitHub
thoughtbot/refills: no longer maintained – GitHub
Sass に慣れてきたら、mixin集 Bourbon を使ってみよう! | Tips Note by TAM
CSS フレームワーク Bourbon 超速入門 – Qiita
CSS フレームワーク Bourbon/Neat/Bitters/Refills は美しい – Qiita
Neat
参考:
Neat – A Lightweight and flexible Sass grid [Official]
thoughtbot/neat: A lightweight and flexible Sass grid – GitHub
Bitters
参考:
Bitters – Predefined Styles for Bourbon [Official]
thoughtbot/bitters: Add a dash of pre-defined style to your Bourbon – GitHub
property lookup
参考:
The ability to reference itself (property lookup) · Issue #1678 · sass/sass – GitHub
Access to property values without the use of variables · Issue #521 · sass/sass – GitHub
Refer to property without using an intermediate variable – Stack Overflow
パーサー/インタプリター/コンパイラ
参考:
Write your own scss-compiler | Vladislav Kopylov
Is there an SCSS parser that outputs an AST? – Stack Overflow
リポジトリ
参考:
sass/node-sass: Node.js bindings to libsass – GitHub
sass/dart-sass: A Dart implementation of Sass – GitHub
sass/ruby-sass: The original, now deprecated Ruby implementation of Sass – GitHub
sass/homebrew-sass: A Homebrew tap for Sass – GitHub
ドキュメント
参考:
SASS REFERENCE — Documentation by YARD [Official]
まとめ
参考:
@-rules and Directives | SitePoint
LibSass / libsass
デバッグ用に libsass.so
をビルドする。
$ make V=1 debug-shared
参考:
sass/libsass: A C/C++ implementation of a Sass compiler – GitHub
libsass/build.md at master · sass/libsass – GitHub
libsass/Makefile at master · sass/libsass – GitHub
速い sass、libsass について超簡単な説明 – Qiita
Function_Call – libsass/eval.cpp at 3.5.5 · sass/libsass – GitHub
c_func – libsass/eval.cpp at 3.5.5 · sass/libsass – GitHub
Gonzales PE
参考:
tonyganch/gonzales-pe: CSS parser with support of preprocessors – GitHub