随着移动设备的普及，越来越多的用户选择使用手机或平板电脑访问网站。在这种情况下，响应式设计已成为一种必要的设计趋势。响应式导航栏是网站中的一个重要组成部分，设计一个既美观、又实用的导航栏是每一个前端开发者必须掌握的技能之一。
本文将介绍如何使用 SASS 来实现一个响应式导航栏，内容详细且有深度和学习以及指导意义，并提供示例代码让读者可以快速上手。
1. 准备工作
在开始开发之前，我们需要先准备好一些工作：
安装 SASS，如果还没有安装的话：可以参考 SASS 官方文档 进行安装。
设计好导航栏的结构和样式，包括菜单项、滑动下划线等。本文不会讲解具体的设计过程，留给读者自行去尝试。
2. 编写 SASS 代码
下面我们就来看看如何使用 SASS 来实现响应式导航栏。
2.1 定义变量
在编写导航栏样式之前，我们需要先定义一些变量，方便后续使用。在本文中，我们需要定义颜色、字体、边框等样式，示例如下：
-- -------------------- ---- ------- -- ---- --------------- -------- ------------- ----- ------------ -------- ---------------- -------------------- ----- -- ---- ------------------------ ---------- ------ ---------- ------ ----------- ---------------- ----- -- ---- ------------------------ --- ----- ---------------
2.2 导航栏样式
在定义好变量之后，我们就可以开始写导航栏的样式了。这里我们需要分别定义不同屏幕大小下导航栏的样式。
首先是大屏幕（desktop）下的导航栏样式：
-- -------------------- ---- -------
-- ------- ---
------- -
----------------- ---------------
------ -------------
------------ ------------------------
---------- ----------------
------- -----
-------- - ------
--------- -
------ ----------------
-------------- ------------------------
-------- -------------
------- -----
------------ -----
------------- -----
-------- - ----
---------------- -----
----------- ------------ -----
-
------- -
------------- -------------
-
-在上面的代码中，我们定义了导航栏的背景色、字体颜色、高度等样式，以及每个菜单项的字体颜色、底部边框样式等。
接下来是中等屏幕（tablet）下的导航栏样式：
-- -------------------- ---- -------
-- ------ ---
------ ----------- ------ -
------- -
-------- - -----
--------- -
------------- -----
-
-
-在中等屏幕下，我们将导航栏的 padding 和每个菜单项之间的 margin 都减小了一些。同理，我们也可以继续为小屏幕下的导航栏定义样式：
-- -------------------- ---- -------
-- ------ ---
------ ----------- ------ -
------- -
-------- - -----
--------- -
-------- ------
------ -----
------- --
-------- ---- ----
-------------- -----
----------- ---------------- -----
-
------- -
----------------- ------------
-
-
-在小屏幕下，我们将导航栏的样式进行了较大调整，包括将每个菜单项的 display 属性改为 block，使它们能够完整地展现在屏幕上。我们还取消了下划线，而是为每个菜单项定义了背景色来表示激活状态。
2.3 滑动下划线效果
最后我们来实现下划线效果。当用户点击某个菜单项时，我们希望它下面有一个滑动的下划线来表示当前所在的页面。
实现这个效果的关键在于使用伪类 :after 来定义下划线：
-- -------------------- ---- ------- --------------- - -------- --- --------- --------- ------- -- ----- -- ------ -- ------- ---- ----------------- ------------- ----------- ----- ----- - ------------- - ------ ----- -
当用户点击一个菜单项时，我们将它的宽度设为 100%，从而达到了滑动下划线的效果。
3. 代码示例
最后，我们来看一下完整的代码示例：
-- -------------------- ---- -------
-- ----
--------------- --------
------------- -----
------------ --------
---------------- -------------------- -----
-- ----
------------------------ ---------- ------ ---------- ------ -----------
---------------- -----
-- ----
------------------------ --- ----- ---------------
-- ------- ---
------- -
----------------- ---------------
------ -------------
------------ ------------------------
---------- ----------------
------- -----
-------- - ------
--------- -
------ ----------------
-------------- ------------------------
-------- -------------
------- -----
------------ -----
------------- -----
-------- - ----
---------------- -----
----------- ------------ -----
------- -
------------- -------------
-
-
------- -
------------- -------------
------- -
------ -----
-
-
-
-- ------ ---
------ ----------- ------ -
------- -
-------- - -----
--------- -
------------- -----
------- -
------------- -------------
-
-
-
-
-- ------ ---
------ ----------- ------ -
------- -
-------- - -----
--------- -
-------- ------
------ -----
------- --
-------- ---- ----
-------------- -----
----------- ---------------- -----
------- -
----------------- ------------
-
-
------- -
----------------- ------------
------- -
------ -----
-
-
-
-
-- -----
--------------- -
-------- ---
--------- ---------
------- --
----- --
------ --
------- ----
----------------- -------------
----------- ----- -----
-
------------- -
------ -----
-4. 总结
在本文中，我们介绍了如何使用 SASS 来开发响应式导航栏，包括定义变量、设置导航栏样式以及实现滑动下划线效果等。希望本文能够对读者有所帮助，同时也鼓励大家多多尝试和实践，不断提高自己的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465c638968c7c53b066f22b