mixin sass_面向Sass设计师的9种Mixin库

如果在开发工作流程中使用Sass ，那么您就会知道mixins的重要性。 当您看到一些在CSS中反复繁琐地编写的东西时，mixin可以在其中帮助您防止重复工作。 mixin包含CSS声明，您可以在整个站点中重复使用这些声明。

开发人员制作了许多mixin，以在开发中使用Sass时为您提供帮助。 大多数涵盖了CSS中经常重复的内容。 从跨多种浏览器适应到创建按钮，动画和过渡效果 ，在您为Sass开发应获得的以下11个mixin库中找到此内容以及更多内容。

1.波旁威士忌

Bourbon是一个Sass库，其中包含mixin，函数和插件，可让您简化跨浏览器使用的样式表的创建。 对我来说，这是最出色的Sass mixin。 它几乎包含了样式网站所需的所有内容，同时又使样式表保持轻巧。

查看完整的文档以使用每个可用的mixin和功能。

2. Sass CSS3 Mixins

Sass CSS3 Mixins提供可在不同浏览器上使用的mixin。 您会在这里找到许多最佳实践的混合包，例如背景，边框，框，列，字体，转换，过渡和动画。 足以满足您的样式需求。 要使用，请导入css3-mixins.scss并在CSS类中调用mixin。

3. CssOwl

CssOwl提供有用的mixin来设置元素的位置（相对或绝对）并使用伪选择器（ :after和:before ）添加内容。 当您要创建精灵元素时，它也有帮助：mixin可以灵活地设置图片在精灵中的位置。 除了Sass，CssOwl mixin库也可用于LESS和Stylus。

4.断点萨斯

断点可帮助您通过Sass轻松进行媒体查询。 使用Breakpoint，您可以创建变量并为其提供一个值，该值定义媒体查询的min-width或max-width 。 由于您创建的变量具有有意义的名称，因此您可以轻松地调用它以在Sass中使用。

5.削减

Scut包含一组可重用的Sass mixin，占位符，函数和变量，可帮助您轻松实现常见的样式代码模式。 它提供了最佳实践代码来创建网页内容（如页面布局和样式排版）。 您可以通过更频繁地重用代码来减少编写代码时的重复。 因此，可以帮助您使流程更有条理。

6.藏红花

使用Saffron ，您可以轻松添加CSS3动画和过渡。 提供了十多种动画和过渡效果，包括淡入/淡出，滑入/淡出，上升/淡出以及诸如抖动，摇晃，弹跳等杂项效果。 要使用Saffron，只需在Sass声明中包括mixin，然后在CSS类中调用效果名称。 您可以使用Bower或Gem 安装 Saffron来获得它 ，也可以从Github手动下载它。

7.类型设置

TypeSettings是Sass的一种工具箱。 它将使用em（而不是rems或像素），垂直节奏和基于响应比率的标题以模块化比例设置字体大小。 您也可以在Bower中安装此版本 ，下载发行版或克隆存储库。 有关更多详细信息，请查看其页面 。

8.萨斯线

Sass Line是一个Sass mixin，可帮助您进行更好的排版。 它在字体上使用rems单位，以便您可以从基线网格按比例使用它。 Sass Line使用基于基线网格的精确垂直节奏 ，并允许您为每个断点设置模块化比例，以在网站的各个方面获得良好的比例。

请转到此处以获取有关如何使用它的更多详细信息。

9. Andy.scss

Andy.scss是有用的Sass mixins的集合，旨在帮助您轻松开发网站外观并保持外观明亮。 从背景到动画，都有数十种Sass mixins可用。 此处介绍了几乎所有常用CSS属性。 在Github上获取它。

Sass上的更多帖子：

• Sass入门
• 挖入无礼
• 如何用崇高的文字编译Sass
• 将Bootstrap 3与Sass一起使用
• 如何使用Sass和Compass构建在线VCard
• 比较CSS预处理器：Sass与。 减
• 语法很棒的样式表：在Sass中使用Compass
• 如何将CSS转换为Sass和SCSS

翻译自: https://www.hongkiat.com/blog/mixin-library-for-sass/