Sass/SCSS

Sass: Syntactically Awesome Style Sheets [Official]

sass/dart-sass: A Dart implementation of Sass – GitHub

sass/ruby-sass: The original, now deprecated Ruby implementation of Sass – GitHub

sass/node-sass: Node.js bindings to libsass – GitHub

sass/homebrew-sass: A Homebrew tap for Sass – GitHub

ドキュメント

Sass Basics [Official]

SASS REFERENCE — Documentation by YARD [Official]

使い方

参考:

Sassメモ – Qiita

Sass 応用(ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content) – はしくれエンジニアもどきのメモ

Sass の基本的な使い方のメモ | Web Design Leaves

Sassの機能を紹介 | SMART

WebTecNote » Sass 3.2で実装された新機能がヤバい

知らないと損するSassの組み込み関数徹底解剖 – イソップブログ

node-sass

参考:

デザイナーにもオススメ!シンプルですぐできるSass(SCSS)開発環境構築 | Black Everyday Company

まとめ

参考:

Sassチートシート – Qiita

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文でリストとして出力 – Qiita

eachが思ってたより難しかったw – コンパイラかく語りき

制御構文 | Web制作者のためのSassの教科書 – 公式サポートサイト

@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の教科書 – 公式サポートサイト

BEM の書き方

参考:

BEMのmodifireとSassの正しい書き方 │ Web-Guided – web制作の現場で使えるカモしれない備忘録

ライブラリ

Sassy-Strings

at-import/Sassy-Strings: Advanced string handling for Sass – GitHub

SassyLists

at-import/SassyLists – GitHub

SassyLists – Documentation

プレイグランド

SassMeister | The Sass Playground!

フレームワーク

Ekzo

ArmorDarks/ekzo: Functional Sass framework for rapid and painless development

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

Tagged:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です