什么是响应式设计？
在现代的 Web 设计中，尤其是移动设备越来越普及的今天，响应式设计成为了一种非常流行的设计方式。
响应式设计对于不同设备分别进行划分，并为每个设备尺寸设置不同的样式，以保证用户能够在所有设备上都能够获得最佳的体验。这样的设计可以同时适用于电脑、平板电脑、手机等不同尺寸的设备上。
在 SASS 中如何进行响应式设计？
在 SASS 中可以利用 mixin 和 media query 来实现响应式设计。mixin 可以使你的代码更有可读性和可重用性，而 media query 可以针对不同的设备尺寸添加不同的样式。
下面是一个示例代码，展示了如何使用 SASS 实现对两个不同设备尺寸的响应式设计：
-- -------------------- ---- -------
--------- ------
-------- ------
------ ------- -
------ ----------- ------------ -
---------
-
-
------ ------ -
------ ----------- ------------ -
---------
-
-
-- --------
---- -
---------- -----
------ -----
-------- ------- -
---------- -----
------ -----
-
-
-- --------
---- -
---------- -----
------ -----
-------- ------ -
---------- -----
------ -----
-
-在上面的代码中，我们通过定义 $desktop 和 $mobile 两个变量，并分别用 @mixin 声明了 desktop 和 mobile 两个 mixin。这样，我们就可以在样式中使用 @include desktop 和 @include mobile 来区分不同尺寸的样式。
如何在 SASS 中进行嵌套和继承？
SASS 支持嵌套和继承，可以使你的代码更加清晰和易于维护。
下面是一个示例代码，展示了如何在 SASS 中利用嵌套和继承来实现响应式设计：
-- -------------------- ---- -------
------ -
----------- -----
-------- -----
-- -
---------- -----
-------------- -----
-
- -
------ -----
------------ ----
-------- ------- -
---------- -----
------------ ----
-
-
----------- -
----------- -----
-- -
------ -----
-
- -
------ -----
-------- ------- -
---------- -----
------------ ----
-
-
-
-在上面的代码中，我们通过在 .panel 下嵌套 h2 和 p，可以使样式更加清晰。并且，我们还可以使用 & 来表示父元素，同时使用 .highlight 类名来继承 .panel 样式，并更改其中的字体和颜色等样式。
总结
在现代 Web 设计中，响应式设计已经成为了一种必不可少的设计方式。在 SASS 中，我们可以利用 mixin 和 media query 来实现响应式设计，同时还可以使用嵌套和继承来使代码更加清晰和易于维护。
写好响应式设计并不容易，需要多实践多掌握。但只要认真阅读 SASS 的文档，多动手练习，相信你也能够很快上手做好响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0b04548841e9894cfa5bb