Andy.scss 实战演练用 10 个 Mixins 从零构建响应式导航栏【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andyAndy.scss 是一个开源的 Sass Mixins 工具库把 30 多个高频 CSS 技巧封装成一行即可调用的 Mixins帮你告别重复代码和繁琐的浏览器前缀。今天这篇实战文章我们就用 Andy.scss 的 10 个 Mixins 从零构建一个响应式导航栏从盒模型、尺寸、居中到媒体查询与动画一次讲透新手也能跟着抄作业。一、Andy.scss 是什么先认识这个 Sass Mixins 工具库 很多前端新手写样式时总会遇到这些重复劳动手写-webkit-、-moz-前缀、换算 rem、写清除浮动、写垂直居中……Andy.scss 就是为解决这些痛点而生的轻量级 Sass 工具库核心源码只有一个文件 andy.scss无需安装任何框架import进来就能用。它的亮点非常鲜明特点说明 极轻量单文件、零依赖不绑架你的项目结构 30 实用 Mixins覆盖盒模型、居中、渐变、媒体查询、动画等高频场景 自动处理前缀内置prefix辅助 Mixin浏览器前缀自动补齐 文档齐全官方文档见 doc/index.html每个 Mixin 都有参数说明和示例提示Andy.scss 的全局字体基准值定义在 andy.scss 的$base-font-size: 16px !default;后面讲 rem 换算时会用到它。二、快速开始Andy.scss 安装与引入获取 Andy.scss 的方式很简单直接克隆仓库git clone https://gitcode.com/gh_mirrors/an/andy然后在你的 SCSS 入口文件顶部引入即可import andy;引入后整个工具库的 Mixins 就全部可用了后续的所有示例都基于这一行引入。三、实战目标响应式导航栏的结构与 10 个 Mixins 分工 我们要构建的导航栏包含桌面端水平菜单 移动端汉堡菜单结构如下nav classnav div classnav__inner a href# classnav__logoAndy/a ul classnav__menu lia href# classnav__link首页/a/li lia href# classnav__linkMixins/a/li lia href# classnav__link关于/a/li /ul button classnav__toggle☰/button /div /nav接下来要用的 10 个 Mixins 及分工如下表#Mixin在导航栏中的职责1box-sizing统一全局盒模型避免 padding 撑破布局2size一行设置 Logo 与按钮尺寸3center-block导航容器水平居中4font-sizepx 自动转 rem 的响应式字号5line-height导航文字垂直居中6position移动端下拉菜单定位7background-gradient导航栏渐变背景8mquery移动端断点媒体查询9transition悬停与展开过渡动画10opacity移动端菜单淡入淡出四、10 个 Mixins 逐个击破 ⚔️1. box-sizing全局盒模型统一告别布局错乱写导航栏最容易踩的坑就是width: 100%再加 padding 导致溢出。用box-sizingMixin 做全局统一定义见 andy.scss*, *::before, *::after { include box-sizing(border-box); }它会自动输出-moz-box-sizing兼容旧 Firefox其余浏览器一行搞定。2. size一行代码设置 Logo 尺寸Logo 一般宽高不同手写要两行属性用sizeMixin见 andy.scss只需一行不传第二个参数时默认宽高相等.nav__logo { include size(120px, 40px); } .nav__toggle { include size(44px); // 宽高都是 44px }3. center-block导航容器水平居中导航栏内容通常限定最大宽度并居中center-blockMixin见 andy.scss帮你生成margin: 0 auto的经典写法.nav__inner { include center-block; max-width: 1170px; }4. font-sizepx 自动转 rem 的响应式字号rem 单位能跟随根字号缩放非常适合响应式设计。font-sizeMixin见 andy.scss会自动按$base-font-size换算同时保留 px 作为旧浏览器回退.nav__link { include font-size(16px); }编译结果.nav__link { font-size: 16px; /* 旧浏览器回退 */ font-size: 1rem; /* 现代浏览器 */ }5. line-height导航文字垂直居中的快捷方式导航栏高度固定时让文字垂直居中最快的办法是让line-height等于导航栏高度。line-heightMixin见 andy.scss同样输出 px rem 双份.nav__link { include line-height(60); // 导航栏高度 60px }6. position下拉菜单定位不再手写四行移动端菜单需要相对导航栏底部弹出。positionMixin见 andy.scss把 position 属性压缩成一行按需传参即可.nav__menu--mobile { include position(absolute, $top: 100%, $left: 0); }相比手写position: absolute; top: 100%; left: 0;三行语义更清晰、不易漏写。7. background-gradient导航栏渐变背景一键生成想给导航栏一个精致的渐变背景background-gradientMixin见 andy.scss支持vertical、horizontal、radial三种方向自动输出带前缀的渐变代码.nav { include background-gradient(#135c6a, #0d4651, vertical); }编译后自动生成-webkit-linear-gradient与标准linear-gradient兼容性无忧。8. mquery最顺手的 Sass 媒体查询写法响应式导航栏的核心就是断点切换。mqueryMixin见 andy.scss把media only screen and (max-width: ...)压缩成一行还支持传入像素比参数做高清屏适配include mquery(768px) { .nav__menu { display: none; /* 桌面菜单隐藏 */ } .nav__toggle { display: block; /* 汉堡按钮出现 */ } }移动端优先的写法也很自然导航菜单默认隐藏用include mquery(768px)以上……不对这里按官方语义是「最大宽度断点」把移动端样式放进括号内即可简单直观。9. transition悬停与展开动画的前缀处理给菜单链接加个平滑的悬停过渡transitionMixin见 andy.scss默认动画all 1s ease-in-out也可自定义时长与缓动函数.nav__link { include transition(0.3s, ease-in); } .nav__link:hover { color: #ffc93c; }它会自动补上-webkit-transition前缀老 Safari 也流畅。10. opacity移动端菜单淡入淡出移动端下拉菜单展开时配合opacityMixin见 andy.scss实现淡入淡出连 IE 滤镜都帮你生成好了.nav__menu--mobile { include opacity(0); pointer-events: none; } .nav__menu--mobile.is-open { include opacity(1); pointer-events: auto; }至此10 个 Mixins 全部就位一个兼具渐变背景、hover 动画、移动端断点与淡入菜单的响应式导航栏就完成了 五、完整 SCSS 代码汇总 把上述片段拼起来核心样式如下import andy; *, *::before, *::after { include box-sizing(border-box); } .nav { include background-gradient(#135c6a, #0d4651, vertical); } .nav__inner { include center-block; max-width: 1170px; } .nav__logo { include size(120px, 40px); } .nav__link { include font-size(16px); include line-height(60); include transition(0.3s, ease-in); } .nav__menu--mobile { include position(absolute, $top: 100%, $left: 0); include opacity(0); } .nav__menu--mobile.is-open { include opacity(1); } .nav__toggle { include size(44px); display: none; } include mquery(768px) { .nav__menu { display: none; } .nav__toggle { display: block; } }六、避坑指南与进阶技巧 自定义基准字号如果你的项目根字号不是 16px记得在引入 Andy.scss 前覆盖$base-font-size否则 rem 换算会不准变量声明见 andy.scss。浮动清理由%clearfix接管老项目还在用 float 布局时可以直接extend %clearfix;占位符定义在 andy.scss比手写伪元素省事得多。动画进阶Andy.scss 还内置了scale、fade、slide-in-from等动画 Mixins见 andy.scss汉堡菜单展开时配合slide-in-from(y)效果更出彩。高清屏适配导航栏 Logo 若用背景图image-2xMixin见 andy.scss能自动在 Retina 屏加载 2 倍图。循环利用把导航栏配色提取成 SCSS 变量配合background-gradient就能快速产出多套主题方便公司多品牌站点复用。七、总结通过这次实战你会发现Andy.scss 的价值在于把「会写但不想反复写」的 CSS 细节全部沉淀成一行调用前缀、居中、rem 换算、媒体查询、动画一应俱全。用上这 10 个 Mixins 构建响应式导航栏代码量至少减少一半还顺带解决了浏览器兼容问题。想深入挖掘更多能力可以通读源码 andy.scss 和官方文档 doc/index.html配合 README.md 快速上手下一个想偷懒的场景记得先翻翻 Andy.scss 有没有现成答案。【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考