Sass

Awesome Sass

Awesome Sass Awesome

>精选列表很棒 SassSCSS frameworks, libraries, style guides, articles, 和 resources.

-使用命令 + 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框架,用于在网络上开发响应式,移动优先项目.
  • 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框架以提供基本样式,CSS组件以及Dropbox的快速静态原型.
  • Sierra -Micro SCSS库可帮助您构建网站,而无需所有任意选择器.

Libraries and Mixins

Grid

Media Queries

  • Breakpoint -断点使在Sass中编写媒体查询变得非常简单.
  • include-media -简单,优雅且可维护的媒体查询.
  • mq-scss -极其强大但易于使用的Sass媒体查询mixin.
  • Sass MediaQueries -为Sass(包括iOS设备,电视等)收集有用的媒体查询mixin.
  • 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将网络上的文本设置为基线网格.
  • 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 -灵活的Sass mixin,用于创建BEM样式的按钮.
  • Buttons -使用Sass和Compass构建的CSS按钮库.
  • csstyle -一个SCSS库,可帮助您构建模块化CSS,该CSS为您生成选择器并自动处理特定性.
  • Family.scss -一组26个智能Sass mixins,将帮助您以简单而优雅的方式管理:nth-​​child'ified元素的样式.
  • Juice -Sass mixins和功能的集合.
  • Modular Scale -内置于Sass中的模块化比例计算器.
  • normalize-scss -Sass / Compass版本的Normalize.css,它是HTML元素和属性规则集的集合,用于在所有浏览器中标准化样式.
  • Pretty checkbox - SCSS/CSS library to beautify checkbox and radio buttons.
  • retina.js -JavaScript,SCSS,Sass,Less和Stylus助手,用于渲染高分辨率图像变体.
  • Sass Accoutrement -Accoutrement模块是Sass工具箱,它们可以协同工作以形成项目的中央配置. 这些工具可以单独使用,也可以集成使用以增加功率.
  • Sass Deprecate -Sass mixin,有助于管理代码弃用.
  • Sass flexbox mixin -为那些希望使用当前浏览器的本机支持而使用flexbox的人提供的混合集.
  • Sassdash -lodash的Sass实现(API documentation).
  • Scut -收集了Sass实用程序,以简化和改进常见样式代码模式的实现.

Style Guides

Articles

Tools

  • dart-sass -Sart的Dart实现.
  • diamond -为Sass,Less和CSS构建的依赖性管理.
  • libsass-python -为Python绑定libsass.
  • libsass -Sass编译器的C / C ++实现.
  • node-sass-magic-importer -用于选择器特定的导入,节点导入,模块导入,全局支持和文件导入的自定义节点导入器.
  • 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 -围绕libsass进行P / Invoke .NET包装,将SCSS转换为支持NET2.0 / NET3.5 / NET4.x +和CoreCLR平台的CSS.
  • stylelint -强大的现代CSS linter,可帮助您实施一致的约定并避免样式表中的错误. 支持类似CSS的语法,包括SCSS.

Books

Videos

Community

License

CC0