Sass

Awesome Sass

Awesome Sass Awesome

>精选的精选列表 Sass and SCSS 框架,库,样式指南,文章和资源.

  • 使用命令 + Fctrl + 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

Sass vs SCSS

Frameworks

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

Libraries and Mixins

Grid

Media Queries

  • Breakpoint - Breakpoint使得在Sass中编写媒体查询变得非常简单.
  • include-media - 简单,优雅和可维护的媒体查询.
  • mq-scss - 一个极其强大但易于使用的Sass媒体查询mixin.
  • Sass MediaQueries - 为Sass收集有用的媒体查询mixins(包括iOS设备,电视等).
  • Sass MQ - Sass mixin,可帮助您以优雅的方式撰写媒体查询.

Color

  • brand-colors - Sass,Less,Stylus和CSS提供1100多种流行品牌颜色.
  • 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库.
  • Buttons - 使用Sass和Compass构建的CSS按钮库.
  • csstyle - 一个SCSS库,可帮助您构建模块化CSS,为您生成选择器并自动处理特异性.
  • Family.scss - 一套26个智能Sass mixins,它将帮助您以简单而优雅的方式管理nth-child'ified元素的风格.
  • Juice - 收集Sass mixins和函数.
  • Modular Scale - 模块化比例计算器内置于您的Sass中.
  • normalize-scss - Normalize.css的Sass / Compass版本,HTML元素和属性规则集的集合,用于规范所有浏览器的样式.
  • Pretty checkbox - SCSS / CSS库,用于美化复选框和单选按钮.
  • retina.js - 用于渲染高分辨率图像变体的JavaScript,SCSS,Sass,Less和Stylus助手.
  • Sass Accoutrement - Accoutrement模块是Sass工具包,它们协同工作以形成项目的中央配置. 这些工具可以单独使用,也可以集成以获得额外的功率.
  • Sass Deprecate - Sass mixin,有助于管理代码弃用.
  • Sass flexbox mixin - 为那些想要使用当前浏览器的原生支持来使用flexbox的人们设置mixins.
  • Sassdash - Lodash的Sass实现(API documentation).
  • Scut - 收集Sass实用程序,以简化和改进常见样式代码模式的实现.

Style Guides

Articles

Tools

  • dart-sass - Dart实施Sass.
  • diamond - 为Sass,Less和CSS构建的依赖管理.
  • libsass-python - 用于Python的libsass绑定.
  • libsass - Sass编译器的C / C ++实现.
  • node-sass-magic-importer - 自定义node-sass导入程序,用于选择器特定的导入,节点导入,模块导入,globbing支持和仅导入文件一次.
  • node-sass - Node.js绑定到libsass.
  • OctoLinker - 使用适用于GitHub的OctoLinker浏览器扩展,有效地浏览 .scss和 .sass文件.
  • sass-extract - 从scss文件中提取变量. 使用scss通过将计算样式提取到js对象中来描述在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 - 使用libsass的P / Invoke .NET包装器将SCSS转换为支持NET2.0 / NET3.5 / NET4.x +和CoreCLR平台的CSS.
  • stylelint - 强大的现代CSS linter,可帮助您实施一致的约定并避免样式表中的错误. 支持类似CSS的语法,包括SCSS.

Books

Videos

Community

License

CC0