Sass / SCSS

参考:

Sass – Syntactically Awesome Style Sheets [Official]

使い方

参考:

Sass メモ – Qiita

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

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

Sass の機能を紹介 | SMART

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

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

制御構文 | 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 の教科書

ソースマップ

参考:

今更知る 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

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

BEM の書き方

参考:

BEM の modifier と 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

Bourbon

参考:

Bourbon – A Lightweight Sass Tool Set [Official]

thoughtbot/bourbon: A Lightweight Sass Tool Set – GitHub

Refills – Patterns [Official]

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

SASS REFERENCE — Documentation by YARD [Official]

まとめ

参考:

Sass チートシート – Qiita

Sass Reference | Kaelig

@-rules and Directives | SitePoint

LibSass / libsass

デバッグ用に libsass.so をビルドする。

$ make V=1 debug-shared

参考:

LibSass | Sass [Official]

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

記事をシェアする:
タグ:

コメントを残す

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

Protected by reCAPTCHA