Awesome Sass

Sassを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

概要

Sassは、基本言語であるCSSに力と優雅さを加える拡張です。完全にCSS互換の構文で、変数、ネスト規則、Mixin、インラインimportなどを使えます。Sassは大きなスタイルシートを整理し、小さなスタイルシートをすばやく立ち上げる助けになります。

Sassには2つの構文があります。Sass 3以降の新しい主要構文は「SCSS」（Sassy CSS）として知られ、CSS構文のスーパーセットです。つまり有効なCSSスタイルシートはすべて有効なSCSSでもあります。SCSSファイルは.scss拡張子を使います。

2番目の古い構文はインデント構文（または単にSass）として知られます。Hamlの簡潔さに着想を得ており、CSSとの類似より簡潔さを好む人向けです。括弧とセミコロンの代わりに、行のインデントでブロックを指定します。主要構文ではなくなりましたが、インデント構文は今後もサポートされます。インデント構文のファイルは.sass拡張子を使います。

始める

公式Sass・SCSSガイド - 公式Sass・SCSSガイド。
Tutorialzine - 15分でSASSを学ぶチュートリアル。
Codecademy - CodecademyでSassを学ぶ。
Lynda - 業界専門家によるオンライン動画チュートリアルで、初心者の基礎から高度な技法までSassの使い方を学ぶ。
公式Sass・SCSSリファレンス - 公式Sass・SCSSドキュメントリファレンス。
SitePoint Sass・SCSSリファレンス - SitePointのSass・SCSSリファレンス。

SassとSCSS

SitePoint - SassとSCSSの違い。
The Sass Way - どちらの構文が優れているか。
Stack Overflow - SCSSとSassの違い。

フレームワーク

avalanche - パッケージベースCSSワークフローの基盤を構築するフレームワーク。
Bootstrap 4 - Web上でレスポンシブ・モバイルファーストなプロジェクトを開発する、最も人気のHTML・CSS・JSフレームワーク、Bootstrapのバージョン4。
Bootstrap-sass - Bootstrap 2・3の公式Sassポート。
Bulma - Flexboxに基づくモダンCSSフレームワーク。
Cirrus - 高速プロトタイピング向けに設計されたコンポーネント・ユーティリティ中心のSCSSフレームワーク。
Foundation for Sites - 世界で最も先進的なレスポンシブフロントエンドフレームワーク。あらゆる種類のデバイスで動作するサイト向けに、プロトタイプ・本番コードを迅速に作成。
Hocus-Pocus - 基本HTML要素とタイポグラフィに焦点を当てたユニバーサルかつ軽量なスタイルシートスターターキット。
iotaCSS - スケールに向け構築されたオープンソースSassベースOOCSSフレームワーク。
Kickoff - スケーラブルで高性能、レスポンシブなサイトを作成する軽量フロントエンドフレームワーク。
Materialize - Material Designに基づくモダンなレスポンシブフロントエンドフレームワーク。
mini.css - ミニマル、レスポンシブ、スタイル非依存のCSSフレームワーク。
Scooter - Dropbox向けの基本スタイル、CSSコンポーネント、高速な静的プロトタイピングを提供するSCSSフレームワーク。
Sierra - 任意のセレクターなしでWebサイト構築を支援する小さなSCSSライブラリ。

ライブラリとMixin

グリッド

Avalanche - 軽量、レスポンシブ、Sassベース、BEM構文のグリッドシステム。
csswizardry-grids - シンプル、流動的、ネスト可能、柔軟、Sassベース、レスポンシブなグリッドシステム。
Griddle - 非常に柔軟なCSSグリッドコンストラクター。
Gridlex - Flexboxグリッドシステム。
Jeet - Sass・Stylus向けのシンプルな分数グリッドシステム。
Neat - Sassで構築された軽量セマンティックグリッドフレームワーク。
Sass Flexible Grid System - Sassの柔軟なグリッドシステム。
SCSS Flexible Grid System - SCSSの柔軟なグリッドシステム。
Susy - Sass向けレスポンシブレイアウトツールキット。
Toast - animate.css作者による柔軟で軽量なグリッドフレームワーク。
Waffle Grid - 使いやすいFlexboxグリッドシステム。

メディアクエリ

Breakpoint - Sassでのメディアクエリ記述を非常に簡単にします。
include-media - シンプル、洗練され、保守しやすいメディアクエリ。
mq-scss - 非常に強力かつ使いやすいSassメディアクエリMixin。
Sass MediaQueries - Sass向けの有用なメディアクエリMixin集（iOSデバイス、TV等を含む）。
Sass MQ - エレガントな方法でメディアクエリを構成できるSass Mixin。

色

brand-colors - Sass、Less、Stylus、CSSで利用可能な人気ブランドカラー1,100超のコレクション。
Open color - UI設計向けオープンカラー配色。CSS、SCSS、LESS、Stylus、Adobeライブラリ、Photoshop/Illustratorスウォッチ、Sketchパレットで利用可能。
sass-planifolia - 素のSassで高度な色操作・コントラスト計算を行う。
scss-blend-modes - Sassで標準色ブレンド関数を使用。

タイポグラフィ

Sassline - Sass・remsによるレスポンシブなモジュラースケールを使い、Web上のテキストをベースライングリッドへ配置。
Sassy-Gridlover - モジュラースケール・垂直リズムを備えたタイポグラフィシステムを確立する、とても使いやすいSass Mixins。Gridloverアプリに基づきます。
Shevy - タイポグラフィを簡単にする垂直リズムライブラリ。
Typi - レスポンシブタイポグラフィを簡単にするSass Mixin。

アニメーション

Animate.scss - Dan EdenのAnimate.cssをSASSへ移植。
Hover - リンク、ボタン、ロゴ、SVG、アイキャッチ画像等に適用できるCSS3駆動ホバーアニメーション効果集。CSS、Sass、LESSで利用可能。
Kf - マップからキーフレームベースのアニメーションを作るSass Mixinライブラリ。
Sass Burger - アニメーションするハンバーガーアイコンを作るSass Mixin。
SpinThatShit - 単一要素のローダー・スピナー向けSCSS Mixin集。

その他

Angled Edges - SVGを動的に符号化してセクションへ角度付きエッジを作るSass Mixin。
Bourbon - Sass向けシンプルで軽量なMixinライブラリ。
Buttono - BEMスタイルのボタンを作る柔軟なSass Mixin。
Buttons - Sass・Compassを使って構築されたCSSボタンライブラリ。
csstyle - セレクターを生成し、詳細度を自動処理するモジュラーCSS構築用SCSSライブラリ。
Family.scss - :nth-child化された要素のスタイル管理を簡単かつ上品にする26個のスマートSass Mixin集。
Gerillass - モダンWebサイトの作成を支援するSass Mixinライブラリ。
Juice - Sass Mixin・関数のコレクション。
Modular Scale - Sassへ組み込まれたモジュラースケール計算機。
normalize-scss - Normalize.cssのSass/Compass版。全ブラウザー間でスタイルを正規化するHTML要素・属性のルールセット集。
Pretty checkbox - チェックボックス・ラジオボタンを美しくするSCSS/CSSライブラリ。
retina.js - 高解像度画像バリアントをレンダリングするJavaScript、SCSS、Sass、Less、Stylusヘルパー。
Sass Accoutrement - プロジェクトの中核設定を形成するため連携して動くSassツールキット。個別にも利用でき、統合するとさらに強力になります。
Sass Deprecate - コード非推奨化の管理を助けるSass Mixin。
Sass flexbox mixin - 現行ブラウザーのネイティブサポートを使いFlexboxを扱いたい人向けMixin集。
Sassdash - lodashのSass実装（APIドキュメント）。
Scut - 一般的なスタイルコードパターンの実装を容易・改善するSassユーティリティ集。

スタイルガイド

Hugo GiraudelのSass Guidelines - 正気で保守・拡張可能なSassを書くガイドライン。
BigCommerce Sass Coding Guidelines - BigCommerceで使用されるガイドライン。
Airbnb Sass and CSS Style Guide - AirbnbによるSass・CSSスタイルガイド。
Dropbox (S)CSS Style Guide - Dropboxの(S)CSS記述スタイルガイド。

記事

ツール

dart-sass - SassのDart実装。
diamond - Sass、Less、CSS向けに構築された依存関係管理。
libsass-python - Python向けlibsassバインディング。
libsass - SassコンパイラーのC/C++実装。
node-sass-magic-importer - セレクター固有import、node import、モジュールimport、glob対応、ファイル一回のみimport向けのカスタムnode-sass importer。
node-sass - libsassのNode.jsバインディング。
OctoLinker - GitHub向けOctoLinkerブラウザー拡張で*.scss・*.sassファイルを効率よく移動。
sass-extract - scssファイルから変数を抽出。計算済みスタイルをJSオブジェクトへ抽出し、JavaScriptで使うスタイルをscssで記述します。import・高度な言語機能に対応。
sass-loader - webpack向けSass loader。
sass-rails - Sass向けRuby on Railsスタイルシートエンジン。
SassDoc - 瞬時にきれいで強力なドキュメントを作る、JavaScript向けJSDocのようなドキュメントシステム。
Scout-App - コマンドライン知識なしにSass・SCSSファイルをCSSへ処理。
scss-lint - クリーンで一貫したSCSSを書くための設定可能ツール。(非推奨)。
SharpScss - SCSSをCSSへ変換するlibsass周りのP/Invoke .NETラッパー。NET2.0/NET3.5/NET4.x+・CoreCLRをサポート。
stylelint - 一貫した規約の強制とスタイルシートのエラー回避を助ける強力でモダンなCSS linter。SCSSを含むCSS風構文をサポート。