Sass

Awesome Sass ¶

> 精选清单 Sass 和 SCSS frameworks, libraries, style guides, articles, 和 resources.

使用command + F或ctrl + F搜索关键字.
欢迎投稿，请参阅 contribution guide.

About¶

Sass 是 CSS 的扩展，为基本语言增添了力量和优雅. 它允许您使用变量、嵌套规则、混合、内联导入等，所有这些都具有完全 CSS 兼容的语法. Sass 有助于保持大型样式表井井有条，并使小型样式表快速启动和运行.

Sass 有两种语法. 新的主要语法（从 Sass 3 开始）被称为“SCSS”（“Sassy CSS”），是 CSS 语法的超集. 这意味着每个有效的 CSS 样式表也是有效的 SCSS. SCSS 文件使用扩展名 .scss .

第二种较旧的语法称为缩进语法（或简称为“Sass”）. 受 Haml 的简洁性启发，它适用于喜欢简洁而不是 CSS 相似性的人. 它不使用方括号和分号，而是使用行的缩进来指定块. 虽然不再是主要语法，但缩进语法将继续受到支持. 缩进语法中的文件使用扩展名“.sass”.

Getting Started¶

Official Sass and SCSS Guide - 官方 Sass 和 SCSS 指南.
Tutorialzine - 在 15 分钟教程中学习 SASS.
Codecademy - 通过 Codecademy 学习 Sass.
Lynda - 通过行业专家教授的在线视频教程，了解如何使用 Sass，从初学者基础知识到高级技术.
Official Sass and SCSS Reference - 官方 Sass 和 SCSS 文档参考.
SitePoint Sass and SCSS Reference - SitePoint Sass 和 SCSS 参考.

Sass vs SCSS¶

SitePoint - Sass 和 SCSS 有什么区别？
The Sass Way - 哪种语法更好？
Stack Overflow - SCSS 和 Sass 有什么区别？

Frameworks¶

avalanche - 为基于包的 CSS 工作流程构建基础的框架.
Bootstrap 4 - Bootstrap 版本 4，最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先的项目.
Bootstrap-sass - Bootstrap 2 和 3 的官方 Sass 端口.
Bulma - 基于 Flexbox 的现代 CSS 框架.
Cirrus - 一个以组件和实用程序为中心的 SCSS 框架，专为快速原型设计而设计.
Foundation for Sites - 世界上最先进的响应式前端框架. 为可在任何类型的设备上运行的站点快速创建原型和生产代码.
Hocus-Pocus - 通用且轻量级的样式表入门套件，专注于基本 html 元素和排版.
iotaCSS - 为扩展而构建的基于 Sass 的开源 OOCSS 框架.
Kickoff - Kickoff 是一个轻量级的前端框架，用于创建可扩展、高性能和响应迅速的网站.
Materialize - 基于 Material Design 的现代响应式前端框架.
mini.css - 最小的、响应式的、风格不可知的 CSS 框架.
Scooter - SCSS 框架旨在为 Dropbox 提供基本样式、CSS 组件和快速静态原型制作.
Sierra - 微型 SCSS 库可帮助您构建网站，无需所有任意选择器.

Libraries and Mixins¶

Grid¶

Avalanche - 轻量级、响应式、基于 Sass 的 BEM 语法网格系统.
csswizardry-grids - 简单、流畅、可嵌套、灵活、基于 Sass 的响应式网格系统.
Griddle - Extremely flexable CSS grid constructor.
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 网格系统.

Media Queries¶

Breakpoint - 断点使得在 Sass 中编写媒体查询变得超级简单.
include-media - 简单、优雅和可维护的媒体查询.
mq-scss - 一个极其强大但易于使用的 Sass 媒体查询混合.
Sass MediaQueries - 为 Sass（包括 iOS 设备、电视等）收集有用的媒体查询混合.
Sass MQ - Sass mixin 可帮助您以优雅的方式编写媒体查询.

Color¶

brand-colors - Sass、Less、Stylus 和 CSS 中提供的 1100 多种流行品牌颜色.
Open color - Open color是UI设计的配色方案. 适用于 CSS、SCSS、LESS、Stylus、Adobe 库、Photoshop/Illustrator 色板和 Sketch 调色板.
sass-planifolia - 香草 Sass 中的高级颜色处理和对比度计算.
scss-blend-modes - 在 Sass 中使用标准颜色混合函数.

Typography¶

Sassline - 使用 Sass & rems 使用响应式模块化比例将 Web 上的文本设置为基线网格.
Sassy-Gridlover - 超级好用的 Sass mixins 来建立一个具有模块化比例和垂直韵律的排版系统. 基于 Gridlover 应用程序.
Shevy - 排版变得容易. 垂直节奏库.
Typi - Sass mixin 使响应式排版变得容易.

Animation¶

Animate.scss - 丹伊登港 Animate.css 对于SASS.
Hover - CSS3 驱动的悬停动画效果集合，可应用于链接、按钮、徽标、SVG、特色图像等. 在 CSS、Sass 和 LESS 中可用.
Kf - Sass mixin 库，用于从地图创建基于关键帧的动画.
Sass Burger - 用于创建动画汉堡包图标的 Sass mixin.
SpinThatShit - 用于单个元素加载器和微调器的 SCSS 混合集.

Miscellaneous¶

Angled Edges - Sass mixin 用于通过动态编码 SVG 在部分上创建有角度的边缘.
Bourbon - Sass 的简单轻量级 mixin 库.
Buttono - 用于创建 BEM 样式按钮的灵活 Sass 混合.
Buttons - 使用 Sass 和 Compass 构建的 CSS 按钮库.
csstyle - 一个 SCSS 库，可帮助您构建模块化 CSS，为您生成选择器并自动处理特异性.
Family.scss - 一组 26 个智能 Sass mixin，将帮助您以简单而优雅的方式管理 :nth-child'ified 元素的样式.
Gerillass - 帮助您创建现代网站的 Sass mixin 库.
Juice - Sass 混入和函数的集合.
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 的人准备的混合集.
Sassdash - lodash 的 Sass 实现 (API documentation).
Scut - 收集 Sass 实用程序，以简化和改进常见样式代码模式的实现.

Style Guides¶

Hugo Giraudel's 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 创作风格指南.

Articles¶

Tools¶

dart-sass - Sass 的 Dart 实现.
diamond - 为 Sass、Less 和 CSS 构建的依赖管理.
libsass-python - 为 Python 绑定 libsass.
libsass - Sass 编译器的 C/C++ 实现.
node-sass-magic-importer - 用于选择器特定导入、节点导入、模块导入、globbing 支持和仅导入文件一次的自定义 node-sass 导入器.
node-sass - Node.js 绑定到 libsass.
OctoLinker - 使用 GitHub 的 OctoLinker 浏览器扩展高效地浏览 .scss 和 .sass 文件.
sass-extract - 从 scss 文件中提取变量. 通过将计算出的样式提取到 js 对象中，使用 scss 来描述在 javascript 中使用的样式. 支持导入和高级语言功能.
sass-loader - 用于 webpack 的 Sass 加载器.
sass-rails - Sass 的 Ruby on Rails 样式表引擎.
SassDoc - 文档系统（如 JSDoc for JavaScript）可在眨眼间构建漂亮而强大的文档.
Scout-App - 无需任何命令行知识即可将 Sass 和 SCSS 文件处理成 CSS.
scss-lint - 用于编写干净一致的 SCSS 的可配置工具. (deprecated)
SharpScss - P/调用 libsass 周围的 .NET 包装器以将 SCSS 转换为支持 NET2.0/NET3.5/NET4.x+ 和 CoreCLR 平台的 CSS.
stylelint - 一个强大的现代 CSS linter，可帮助您执行一致的约定并避免样式表中的错误. 支持类似 CSS 的语法，包括 SCSS.