Andy.scss 布局利器5 个 Mixins 轻松搞定元素居中、定位与清除浮动【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy写前端样式时元素居中、absolute 定位、清除浮动几乎是每个页面都会遇到的老三样。每次都要手写margin: 0 auto、position: absolute配transform还要为老浏览器补前缀……这些重复劳动其实都可以交给Andy.scss。它是一个开源的SCSS Mixins集合库把高频布局代码封装成一行行简单好记的 Mixin让你从繁琐的手写 CSS 中解放出来。这篇SCSS Mixins 教程将带你认识其中 5 个最实用的布局 Mixins快速搞定元素居中、定位与清除浮动新手也能轻松上手一、Andy.scss 是什么为什么值得用Andy.scss 是一套即插即用的开源 Sass Mixins 工具集目标很纯粹帮你避免无休止的搜索也避免引入笨重的 CSS 框架。整个库只有一个核心文件 andy.scss源码里每个 Mixin 都附带了注释、参数说明和使用示例甚至用 SassDoc 生成了完整的 API 文档见 doc/index.html。它最大的优点是轻量与透明特点说明 极轻量一个 SCSS 文件搞定无框架、无依赖 文档友好每个 Mixin 都有注释与示例注释即文档 按需使用想用哪个就include哪个不用的不产生任何 CSS 可配置如基础字号$base-font-size等默认值都可按需修改下面进入正题看看这 5 个布局 Mixins 到底怎么用。二、center-block一行代码实现块级元素水平居中水平居中是最常见的需求——按钮、图片、卡片……以前你得写三行代码现在只需要一个 Mixin.modal { include center-block; }编译后等价于.modal { display: block; margin-left: auto; margin-right: auto; }原理就是经典的margin: 0 auto方案源码见 andy.scss。记住一个前提只对设置了宽度的块级元素生效行内元素需要先转成块级。三、center-both最优雅的水平垂直居中方案登录弹窗、加载动画、全屏遮罩……需要既水平又垂直居中的场景多到数不清。用center-both一个 Mixin 就搞定.loading-spinner { include center-both; }编译结果如下.loading-spinner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }这是目前最流行的居中方案top/left: 50%配合translate(-50%, -50%)不需要知道元素宽高而且 Andy.scss 已经自动帮你处理了-webkit-、-ms-前缀兼容。源码见 andy.scss。⚠️ 唯一注意点父元素需要设置position: relative否则它会相对整个页面定位。四、center-h 与 center-h--unk两种场景的垂直居中只垂直居中的场景同样常见Andy.scss 贴心地准备了两个 Mixin对应两种不同情况。场景 1高度已知—— 用center-h($height)传入元素高度内部自动计算负 margin源码见 andy.scss.toast { include center-h(42px); }场景 2高度未知—— 用center-h--unk借助translateY(-50%)实现无需知道高度源码见 andy.scss.badge { include center-h--unk; }记住口诀已知高度用center-h未知高度用center-h--unk垂直居中从此不再纠结。✨五、position极简的定位快捷写法平时写定位要 4 行起position: absolute; top: 10px; right: 20px; bottom: auto; left: auto;有了positionMixin源码见 andy.scss只需一行而且没传的方位参数自动忽略.tooltip { include position(absolute, $top: 10px, $left: 10px); }编译结果.tooltip { position: absolute; top: 10px; left: 10px; }支持relative、absolute、fixed三种定位类型配合$top/$right/$bottom/$left四个可选参数代码瞬间清爽不少。配合 andy.scss 里的sizeMixin宽高一次搞定写悬浮按钮角标这类元素会非常顺手。六、clearfix彻底告别浮动塌陷浮动布局虽然渐渐被 Flex 取代但处理旧项目、做图文混排时仍然绕不开它。而浮动最大的坑就是——父容器高度塌陷。Andy.scss 提供的是占位符%clearfix用extend引入即可源码见 andy.scss.card-list { extend %clearfix; }它内部通过:before/:after伪元素 clear: both清浮动还顺带兼容了老 IE 的*zoom: 1写法一次声明、全局复用比手写清浮动代码干净得多。七、快速上手指南把 Andy.scss 装进项目上手非常简单三种方式任选直接下载下载andy.scss文件放进你的 Sass 项目然后import andy即可使用Bower 安装bower install andyGit 克隆git clone https://gitcode.com/gh_mirrors/an/andy后把andy.scss拷入项目。引入后还可以按需修改默认配置比如调整基础字号源码见 andy.scss$base-font-size: 14px !default;八、总结从今天起告别手写布局样板代码回顾一下这 5 个布局 MixinsMixin作用核心场景center-block块级元素水平居中图片、按钮、卡片center-both水平垂直双向居中弹窗、加载动画center-h/center-h--unk已知/未知高度垂直居中Toast、角标position定位快捷写法悬浮元素、Tooltip%clearfix清除浮动图文混排、旧项目Andy.scss 里还有渐变背景、媒体查询、Retina 图片、字体声明等 20 多个实用 Mixins完整清单见 README.md堪称前端开发的瑞士军刀。元素居中、定位、清除浮动这些布局老大难从此一行代码轻松搞定快去你的项目里试试吧【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考