Andy.scss 部署全解析：Bower、Ruby Gem 与手动引入三种方式对比

Andy.scss 部署全解析：Bower、Ruby Gem 与手动引入三种方式对比

【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy

Andy.scss 是一款开源的 Sass Mixins 工具库，汇集了背景渐变、居中布局、清除浮动、响应式媒体查询等 20 多个实用 mixin，让你告别反复搜索代码片段的烦恼。对于新手来说，最关心的问题就是"怎么把 Andy.scss 装进项目"。本文将为你全面解析 Andy.scss 的三种主流部署方式——Bower 安装、Ruby Gem 安装与手动引入，并对比它们的优缺点，帮你选出最适合自己的方案。

为什么选择 Andy.scss 而非重型框架

很多同学为了一个 clearfix 就引入整套 Bootstrap，其实大可不必。Andy.scss 的初衷正是"收集有用的 mixin，避免无休止的搜索或重型框架依赖"。整个库就是一个轻量的 andy.scss 文件，包含center-block、center-both、clearfix、mquery等高频工具，随取随用，几乎零学习成本。

方式一：Bower 安装 Andy.scss（推荐给前端项目）

如果你的项目使用 Bower 管理前端依赖，这是最快的安装路径。

一键安装命令

在项目根目录执行：

$ bower install andy

安装后如何引用

安装完成后，在 SCSS 入口文件中引入即可：

@import "bower_components/andy/andy";

随后即可全局使用 Andy 提供的全部 mixin，例如水平垂直居中：

.box { @include center-both; }

优点：命令简单、可版本锁定、便于团队统一升级。缺点：Bower 生态已逐渐萎缩，新项目需谨慎评估。

方式二：Ruby Gem 安装（适合 Rails 项目）

如果你在使用 Ruby on Rails，通过 Gem 引入 Andy.scss 是最省心的方式。

最快配置方法

在Gemfile中添加：

gem 'rails-assets-andy'

然后执行：

$ bundle install

Rails 中使用技巧

安装后同样只需一行引入即可生效，之后所有 Andy mixin 都可在你的样式表中直接调用，无需额外配置路径。

优点：与 Rails Asset Pipeline 无缝集成，自动处理资源编译。缺点：仅适合 Ruby 技术栈，非 Rails 项目无法使用。

方式三：手动引入（最通用的兜底方案）

不想依赖任何包管理器？直接下载文件即可。

快速上手步骤

1. 克隆仓库获取源码：

   git clone https://gitcode.com/gh_mirrors/an/andy

2. 将andy.scss复制到你的 Sass 项目目录（如scss/vendor/或styles/）。
3. 在入口文件中引入：

   @import "vendor/andy";

按需调整默认配置

Andy.scss 支持通过!default覆盖默认值，例如调整基准字号：

$base-font-size: 14px !default;

该变量会直接影响font-size与line-height两个 mixin 的 rem 换算结果，详见源码中的 andy.scss 顶部配置区。

优点：零依赖、零学习成本，任何环境通用。缺点：升级需手动替换文件，无法自动追踪版本。

三种部署方式对比一览

对比维度	Bower 安装	Ruby Gem 安装	手动引入
适用场景	通用前端项目	Rails / Ruby 项目	任意项目
安装速度	快	较快	最快
版本管理	支持锁定	支持锁定	手动维护
依赖门槛	需 Node + Bower	需 Ruby + Bundler	无
学习成本	低	低	最低

快速验证安装是否成功

无论用哪种方式，装好后写一段最简单的测试代码即可确认：

.test { @include size(100px); }

若编译结果出现width: 100px; height: 100px;，说明 Andy.scss 已成功集成到项目中。

总结：新手应该选哪种？

• 追求省心：选手动引入，复制一个文件就完事；
• Rails 项目：无脑选 Ruby Gem；
• 已有 Bower 体系：沿用 Bower 安装保持统一。

三种方式殊途同归，最终得到的都是同一个强大的 Sass Mixins 工具库。希望这篇 Andy.scss 部署全解析能帮你顺利上手，从此告别重复造轮子的日子 🚀

【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy