几个实用的Sass mixins

  • 发表于
  • 前端

Mixins 是 Sass (其实很多预处理语言都有) 中用来方便地复用代码的方法,你可以简单点理解成函数,返回的是一组 CSS 属性或代码。

上面的代码处理后,将得到下面 CSS 代码。

如果你对 Sass 不熟悉,可以先去学习一番 ,让我们进入主题,介绍几个实用的 mixins。

Absolute Position

如果你的页面中经常用到 absolute 定位,你可以试试下面这个:

使用

产出

带有优雅降级地使用 rem 单位

熟悉 rem 单位的前端er是否遇到过不支持的浏览器? 你如何解决的呢?下面这个 mixin 我们加上 px 单位作 fallback:

使用

产出

Clearfix

网上有很多 clearfix 的 hacks,下面这种比较常见,兼容到 IE6以上

使用

When-inside

个人比较中意的 mixin,常用在修改元素在不同状态下的属性。比如我们的H5页面会给当前页面加个 active类名,我们想让当前页面中的 foo对象执行动画。

使用

产出

方便的媒体查询

媒体查询再做响应式网站时候,非常方便。如果下面的代码满足不了你的需求的话,那么推荐你看之前的文章 《使用Sass之更高级的媒体查询》

用法

产出

长阴影

这个mixin可能不常用,但是效果真的很酷~

使用

精灵图

之前写过一篇关于 Gulp 生成精灵图的文章,里面的 mixin 也很实用

总结

以上内容均为整理及实践总结而来,可能不是最优解,如果你又更好的想法,欢迎与我交流~ 用好 mixin 或许可以让你省去大量重复性工作,空出大把时间,为升职加薪迎娶白富美走上人生巅峰做梦去吧。

更多细化的 mixin 看相关内容中的链接。

相关内容

via