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

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

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

@mixin の使い方

参考:

Sassで@mixinを作る時に知っておきたい基礎知識 – Qiita

@content

参考:

@content : @mixinにスタイルセットを渡す | 集の一期一会

@content directive is a wonderful thing | Krasimir Tsonev

Passing arguments from a mixin to a content block · Issue #871 · sass/sass – GitHub

ArmorDarks commented on 30 Jun 2016 – Passing arguments from a mixin to a content block · Issue #871 · sass/sass – GitHub

Passing arguments from a mixin to a content block – Stack Overflow

Grandparent Selectors

参考:

How to do SASS Grandparent Selectors – codeburst

calc と変数を同時に使う

変数を #{} で囲う

$var: 10rem;
.content {
    width: calc(#{$var} + 10px);
}

参考:

SASSの変数と、CSS3のcalc()を併用するには – Qiita

Interpolation

参考:

All You Ever Need to Know About Sass Interpolation | Envato Tuts+

変数名における interpolation

参考:

interpolation in a name of variable – Krasimir Tsonev

@if 文で and や or を使う

@if ($var1 == value1 and not ($var2 == value2)) or ($var3 == value3) {
    // ...
}

参考:

Using multiple conditions (AND) in SASS IF statement – Stack Overflow

@for

参考:

SCSS/SASS: How to dynamically generate a list of classes with commas separating them – Stack Overflow

@each

参考:

eachやforを使って繰り返し記述する手間を省く | NxWorld

配列を@each文でリストとして出力 – Qiita

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

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

演算子/関数

参考:

数値を操作したいときに便利な演算や関数 | NxWorld

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

Module: Sass::Script::Functions — Documentation by YARD [Official]

文字列の操作

参考:

文字列の操作 – SassScript – Sassオレオレリファレンス

@mixin/@include と @extend の使い分け

参考:

Sass の @mixin を使うと CSS ファイルに重複するコードが増えるなと思っていたけれど @extend を使うと解決した | rakuishi.com

@import でグロブを使う

参考:

Sassの複数のimportはglobを使って一つにまとめると幸せ – Qiita

中間のセレクタを修正する

参考:

Modifying the middle of a selector in Sass (adding/removing classes, etc.) – Stack Overflow

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

selector-slice

参考:

In Sass, How do you reference the parent selector and exclude any grandparent? – Stack Overflow

デバッグ

  • @debug
  • @warn
  • type-of
  • quote

参考:

テストやデバックで使える @debug と @warn | Web制作者のためのSassの教科書 – 公式サポートサイト

Sassのデータタイプについて | Web制作者のためのSassの教科書 – 公式サポートサイト

ライブラリ

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:

コメントを残す

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