在前端开发中，很多开发者都会使用类似 Bootstrap 的 CSS 框架来快速搭建网站的样式。不过今天我们要介绍的是另一个非常流行的框架——Foundation。它提供了更加灵活、可定制化的样式和组件，让我们可以更方便地实现我们想要的效果。
安装 Foundation
首先，我们需要通过 npm 安装 Foundation：
--- ------- ----------------
安装完成后，我们可以通过 import 或 require 的方式将其引入到项目中。
------ ------------------- -- -- ----------------------------
基本用法
样式
在 HTML 文件中加入以下代码，就可以使用 Foundation 的基本样式：
--------- -----
------
------
----- ----------------
----------------- ---------------
----- ---------------- --------------------------------------------------------------------
-------
------
---- ------------- ---------------
---- ----------- ------- -------- ---------
---- -------------
---- ----------------------------------
---- ---------------------
-------- ----------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
------
------
---- ----------- ------- -------- ---------
---- -------------
---- ----------------------------------
---- ---------------------
-------- ----------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
------
------
------
------- ---------------------------------------------------------------------------
--------
-------------------------
---------
-------
-------组件
除了基本样式外，Foundation 还提供了一些常用组件，例如按钮、表单、导航菜单等。下面我们来看一个例子，使用 Foundation 的导航菜单组件：
--------- -----
------
------
----- ----------------
----------------- ---------------
----- ---------------- --------------------------------------------------------------------
-------
------
---- --------------- ----------- ------------------
--- -------------------
--- -------------
------ ----------- -------------
-----
--- -------------------- -----------
-- ------------------------------
-----
-----
-------- ------------------------
--- --------------
--- ----------------- ----------------------
------ -----------------------
------ -------------------------
-----
----------
------
------- ---------------------------------------------------------------------------
--------
-------------------------
---------
-------
-------自定义样式
虽然 Foundation 提供了很多组件和样式，但是有时候我们需要根据自己的需求进行定制化。Foundation 使用 Sass 编写样式，所以我们可以直接修改源码来实现我们想要的效果。
变量
在 Foundation 中，大部分样式都是通过 Sass 变量来控制的。例如，想要修改颜色主题，可以修改 $primary-color 变量：
--------------- -------- ------- ------------------------------------------------
Mixin
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32242