如何用 LESS 快速构建响应式网站布局
LESS 是一种动态样式表语言，它可以让你使用更简单的语法来编写 CSS 样式代码。在前端开发中，LESS 被广泛使用来加速开发流程，特别是在构建响应式网站布局时。在本文中，我们将学习如何使用 LESS 快速构建一个响应式网站布局。我们将从一个简单的网格系统开始，并向您展示如何使用 LESS 变量、嵌套规则、Mixin 和函数等功能，以进一步优化代码。
第一步：设置网格系统
我们的响应式网站布局将基于网格系统构建。我们将使用 LESS 变量定义网格宽度，列数和gutter宽度。如下所示：
-- -------------------- ---- -------
-- ------
------------ ------
-------------- ---
------------- -----
-- ------------------
----------------- ------------ - ------------- - -------------- - -----
-- -----
---- -
------------ ------------- - ----
------------- ------------- - ----
------- -
-------- ---
-------- ------
------ -----
-
-
---- -
--------- ---------
----------- ----
------------- ------------- - ---
-------------- ------------- - ---
-
-- --------
------ ----------- ------ -
---- -
------------ --
------------- --
-
---- -
------ -----
------ -----
------------- --
-------------- --
-
-在上面的代码中，我们定义了三个 LESS 变量来确定网格系统的宽度，列数和gutter宽度。我们计算了容器宽度以确保网格和gutter总和等于容器宽度。我们还定义了两个基本类 .row 和 .col，.row 用于包含网格行，.col 用于包含网格列。我们最后定义了一个响应式版本的栅格类，以便在窗口宽度小于768px时，每个列将占用整个窗口宽度。
第二步：使用 mixins 和 functions
现在我们已经设置了网格系统，我们可以引入 mixins 和 functions 来简化代码。我们将使用以下 mixin 和 functions：
make-column(x)– 根据x列生成一个相应的 CSS 样式。media-query(x)– 返回一个用于创建媒体查询的 mixins。此 mixins 将使用窗口宽度作为参数，并在此宽度以下（或者以上）应用 CSS 样式。
以下是使用 mixins 和 functions 优化后的代码：
-- -------------------- ---- -------
-- -- ------
---------------- -
------ ------------- - ---------------
-
-- -- --------
------------------- ---- ----------------- -
------ ----------- ------ -
-----------
-
-
------------------- ---- ----------------- -
------ ------- -
-----------
-
-
---- -
------------ ------------- - ----
------------- ------------- - ----
------- -
-------- ---
-------- ------
------ -----
-
-
---- -
--------- ---------
----------- ----
------------- ------------- - ---
-------------- ------------- - ---
----------------
-
------ ----------- ------ -
---- -
------------ --
------------- --
-
---- -
------ -----
------ -----
------------- --
-------------- --
-
-
-- -- ----- ----- ------------- ----- ------------ -
----------------- -
------ -
----------------
-
-在上面的代码中，我们定义了 make-column(x) Mixin 和 media-query(x) Function。我们还重新定义了 .col 类，使用 make-column(1) mixin 来表示每个列默认使用一列宽度。最后，我们使用 media-query(768) mixin 来定义每个 .col-4 类，在视口宽度为 768px 以上时，它将使用四个列宽度。
第三步：使用 Nesting Rules
现在我们已经定义了 mixin 和 functions 来优化代码，我们可以使用 Nesting Rules 来更好地组织代码。我们将使用以下 nesting rules：
@media only screen– 组织媒体查询规则。.row– 组织网格行规则。.col– 组织网格列规则。.col-{n}– 组织特定列规则。
以下是使用 Nesting Rules 优化后的代码：
-- -------------------- ---- -------
------------ ------
-------------- ---
------------- -----
----------------- ------------ - ------------- - -------------- - -----
---- -
------------ ------------- - ----
------------- ------------- - ----
------- -
-------- ---
-------- ------
------ -----
-
---- -
--------- ---------
----------- ----
------------- ------------- - ---
-------------- ------------- - ---
----------------
------- -
----------------
-
-
------ ---- ------ --- ----------- ------ -
------------ --
------------- --
---- -
------ -----
------ -----
------------- --
-------------- --
-
-
-在上面的代码中，我们将所有类规则嵌套在 .row 选择器中，以更好地组织代码。我们还将媒体查询规则嵌套在 .row 中，以便在视口宽度小于768px时，将规则应用于.row元素。
结论
在本文中，我们学习了如何使用 LESS 快速构建响应式网站布局。我们开始设置网格系统，然后使用 mixins 和 functions 优化代码，最后使用 Nesting Rules 更好地组织代码。这些技术的结合可以使我们编写更简单、更清晰、更易于维护的 CSS 代码。让我们在实践中使用这些技术来改善我们的网站布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673854c2317fbffedf0fae55