Sass/SCSS Introduction

参考:

Sass – Syntactically Awesome Style Sheets [Official]

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 Basics [Official]

SASS REFERENCE — Documentation by YARD [Official]

使い方

参考:

Sass メモ – Qiita

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

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

Sass の機能を紹介 | SMART

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

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

まとめ

参考:

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 の教科書

ソースマップ

参考:

Sass 用のソースマップを作成してコーディング作業を更にもっと爆速化だ!Gulp Sass向け | Garney.Web

今更知る scss のソースマップの存在意義 | 乱雑モックアップ

gulp-sass + gulp-autoprefixer + gulp-sourcemaps で SourceMap を出力したい | イナヅマ TV ログ

node-sass と Webpack で SASS の sourcemap の行数が正しく表示されない。| teratail

Using source maps with Sass 3.3 | The Sass Way

Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt – Ben Frain

BEM の書き方

参考:

BEM の modifire と Sass の正しい書き方 │ Web-Guided

ライブラリ

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:

コメントを残す

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