Andy.scss 源码解析一prefix Mixin 如何自动生成浏览器厂商前缀【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andyAndy.scss 是一款开源的 SASS Mixins 工具库它把渐变、居中、动画、清除浮动等高频样式逻辑封装成可直接调用的 Mixin。今天我们解析它最核心的地基之一——prefix Mixin它负责为 CSS 属性自动生成浏览器厂商前缀让一行代码同时输出-webkit-、-moz-等兼容写法彻底告别手写前缀的枯燥与遗漏。为什么需要浏览器厂商前缀先看懂历史包袱在 CSS 新特性如transform、transition、box-sizing尚未标准化时各大浏览器会先推出带私有前缀的实现版本-webkit-Chrome、Safari、新版 Opera-moz-Firefox-ms-Internet Explorer / Edge-o-老版 Opera于是同样一条样式你需要写好几遍.box { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); }手写不仅繁琐还容易漏掉某个浏览器、写错前缀顺序。而prefix Mixin正是为了解决这个问题而生的——这是 Andy.scss 中最基础、被调用最频繁的私有 Mixin 之一。prefix Mixin 源码藏在 andy.scss 开头的 7 行精妙设计打开项目根目录的 andy.scss在文件靠前的位置第 23~29 行就能找到它mixin prefix($property, $value, $prefixes: ()) { each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; } #{$property}: $value; }整段代码只有 7 行却解决了自动添加浏览器厂商前缀的核心问题。注意源码注释中标着access private作者是知名前端开发者 HugoGiraudel——它主要作为内部工具被其他 Mixin 调用而不是面向普通用户的前台接口。三个参数一次讲透参数类型默认值含义$propertyString无不带前缀的 CSS 属性名如transform、transition$value任意值无属性的原始值如translateX(10px)、0.3s ease-in$prefixesList()空列表需要生成的前缀列表如webkit ms默认值()是个非常聪明的设计不传前缀时Mixin 就退化成普通属性声明只输出标准写法不会画蛇添足。执行流程拆解each 循环 插值语法整个 Mixin 的核心是两行代码each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; }执行逻辑分三步each $prefix in $prefixesSASS 的循环指令依次取出列表中的每个前缀字符串#{$prefix}与#{$property}插值用#{}把变量拼接进属性名动态拼出-webkit-transform、-ms-transform这样的带前缀属性循环结束后再输出一行标准属性#{$property}: $value;。由于 Andy.scss 的编写时代以 Sass缩进语法为主这个 Mixin 同样兼容 Dart Sass 与 LibSass直接include即可。实战演示一行代码输出 3 条兼容声明以官方文档中 transform Mixin 的用法为例它是这样调用 prefix 的mixin transform($transformation) { include prefix(transform, $transformation, webkit ms); }你在自己的样式里写.card { include transform(translateX(10px)); }编译后的 CSS 就是文章开头那 3 条声明——-webkit-、-ms-和标准写法一次到位自动生成浏览器厂商前缀一行都不用手写。标准属性为什么要放在最后CSS 层叠的秘密细心的读者会发现循环输出的前缀属性在前标准属性永远在最后一行。这不是随意排列而是利用了 CSS 层叠Cascade规则相同优先级下后声明的规则覆盖先声明的规则。当浏览器同时认识-webkit-transform和transform时后出现的标准写法会胜出而当浏览器只认识前缀写法时它自动忽略后面的标准声明。这一前一后的顺序保证了新旧浏览器都能拿到正确结果。Andy.scss 内部谁在悄悄调用它prefix Mixin 是名副其实的幕后功臣全库有 11 处调用覆盖了几乎一半的公开 Mixin公开 Mixin调用位置生成的前缀background-sizeandy.scss#L113webkitmozborder-radius-separateandy.scss#L143-L146webkitmozbox-sizingandy.scss#L163mozcenter-bothandy.scss#L206webkitmscenter-h--unkandy.scss#L248webkitmsha硬件加速andy.scss#L344webkitmstransformandy.scss#L557webkitmstransitionandy.scss#L574webkitscale动画andy.scss#L616webkitfade动画andy.scss#L655webkitslide-in-fromandy.scss#L708webkit可以看到prefix Mixin 把哪些属性需要哪些前缀的决策分散到各业务 Mixin 中自身保持极简——这正是 Andy.scss 轻量、无框架依赖理念的缩影。总结你也可以这样复用 prefix 思路回顾一下prefix Mixin 的精华可以浓缩为三点参数化属性、值、前缀全部由调用方传入灵活可复用插值拼接#{}让属性名可以动态组合回退顺序前缀在前、标准在后优雅兼容所有浏览器。即使你不使用 Andy.scss也可以把这 7 行代码复制进自己的项目或参考它的设计写出自己的前缀方案。下一篇源码解析我们将继续拆解与它配套的keyframesMixinandy.scss#L35-L43看看动画帧是如何同样被自动加上-webkit-前缀的敬请期待✨【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Andy.scss 源码解析（一）：prefix Mixin 如何自动生成浏览器厂商前缀
Andy.scss 源码解析一prefix Mixin 如何自动生成浏览器厂商前缀【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andyAndy.scss 是一款开源的 SASS Mixins 工具库它把渐变、居中、动画、清除浮动等高频样式逻辑封装成可直接调用的 Mixin。今天我们解析它最核心的地基之一——prefix Mixin它负责为 CSS 属性自动生成浏览器厂商前缀让一行代码同时输出-webkit-、-moz-等兼容写法彻底告别手写前缀的枯燥与遗漏。为什么需要浏览器厂商前缀先看懂历史包袱在 CSS 新特性如transform、transition、box-sizing尚未标准化时各大浏览器会先推出带私有前缀的实现版本-webkit-Chrome、Safari、新版 Opera-moz-Firefox-ms-Internet Explorer / Edge-o-老版 Opera于是同样一条样式你需要写好几遍.box { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); }手写不仅繁琐还容易漏掉某个浏览器、写错前缀顺序。而prefix Mixin正是为了解决这个问题而生的——这是 Andy.scss 中最基础、被调用最频繁的私有 Mixin 之一。prefix Mixin 源码藏在 andy.scss 开头的 7 行精妙设计打开项目根目录的 andy.scss在文件靠前的位置第 23~29 行就能找到它mixin prefix($property, $value, $prefixes: ()) { each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; } #{$property}: $value; }整段代码只有 7 行却解决了自动添加浏览器厂商前缀的核心问题。注意源码注释中标着access private作者是知名前端开发者 HugoGiraudel——它主要作为内部工具被其他 Mixin 调用而不是面向普通用户的前台接口。三个参数一次讲透参数类型默认值含义$propertyString无不带前缀的 CSS 属性名如transform、transition$value任意值无属性的原始值如translateX(10px)、0.3s ease-in$prefixesList()空列表需要生成的前缀列表如webkit ms默认值()是个非常聪明的设计不传前缀时Mixin 就退化成普通属性声明只输出标准写法不会画蛇添足。执行流程拆解each 循环 插值语法整个 Mixin 的核心是两行代码each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; }执行逻辑分三步each $prefix in $prefixesSASS 的循环指令依次取出列表中的每个前缀字符串#{$prefix}与#{$property}插值用#{}把变量拼接进属性名动态拼出-webkit-transform、-ms-transform这样的带前缀属性循环结束后再输出一行标准属性#{$property}: $value;。由于 Andy.scss 的编写时代以 Sass缩进语法为主这个 Mixin 同样兼容 Dart Sass 与 LibSass直接include即可。实战演示一行代码输出 3 条兼容声明以官方文档中 transform Mixin 的用法为例它是这样调用 prefix 的mixin transform($transformation) { include prefix(transform, $transformation, webkit ms); }你在自己的样式里写.card { include transform(translateX(10px)); }编译后的 CSS 就是文章开头那 3 条声明——-webkit-、-ms-和标准写法一次到位自动生成浏览器厂商前缀一行都不用手写。标准属性为什么要放在最后CSS 层叠的秘密细心的读者会发现循环输出的前缀属性在前标准属性永远在最后一行。这不是随意排列而是利用了 CSS 层叠Cascade规则相同优先级下后声明的规则覆盖先声明的规则。当浏览器同时认识-webkit-transform和transform时后出现的标准写法会胜出而当浏览器只认识前缀写法时它自动忽略后面的标准声明。这一前一后的顺序保证了新旧浏览器都能拿到正确结果。Andy.scss 内部谁在悄悄调用它prefix Mixin 是名副其实的幕后功臣全库有 11 处调用覆盖了几乎一半的公开 Mixin公开 Mixin调用位置生成的前缀background-sizeandy.scss#L113webkitmozborder-radius-separateandy.scss#L143-L146webkitmozbox-sizingandy.scss#L163mozcenter-bothandy.scss#L206webkitmscenter-h--unkandy.scss#L248webkitmsha硬件加速andy.scss#L344webkitmstransformandy.scss#L557webkitmstransitionandy.scss#L574webkitscale动画andy.scss#L616webkitfade动画andy.scss#L655webkitslide-in-fromandy.scss#L708webkit可以看到prefix Mixin 把哪些属性需要哪些前缀的决策分散到各业务 Mixin 中自身保持极简——这正是 Andy.scss 轻量、无框架依赖理念的缩影。总结你也可以这样复用 prefix 思路回顾一下prefix Mixin 的精华可以浓缩为三点参数化属性、值、前缀全部由调用方传入灵活可复用插值拼接#{}让属性名可以动态组合回退顺序前缀在前、标准在后优雅兼容所有浏览器。即使你不使用 Andy.scss也可以把这 7 行代码复制进自己的项目或参考它的设计写出自己的前缀方案。下一篇源码解析我们将继续拆解与它配套的keyframesMixinandy.scss#L35-L43看看动画帧是如何同样被自动加上-webkit-前缀的敬请期待✨【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考