CSS 在选择器内定义LESS媒体查询

在本文中，我们将介绍如何在CSS选择器内定义LESS媒体查询。媒体查询是CSS中的一个重要概念，它允许我们根据用户设备的特征（如屏幕宽度、高度、方向等）来应用不同的样式。

阅读更多：CSS 教程

了解媒体查询

在开始之前，让我们先了解一下媒体查询的概念。媒体查询是CSS3新增的功能，它允许我们针对不同的媒体类型和设备特征应用不同的样式。媒体查询的语法非常简单，我们可以像下面这样在CSS中定义一个媒体查询：

@media media-type and (media-feature rule) {
    /* CSS样式 */
}

其中，media-type表示媒体类型，如print（打印）、screen（屏幕）、speech（语音）等。而media-feature rule则表示媒体特征规则，如width（宽度）、height（高度）、orientation（方向）等。

在选择器内定义媒体查询

在使用媒体查询时，通常我们会将其定义在CSS的顶层，然后针对不同的选择器应用不同的样式。但有时候，我们可能希望在特定的选择器内定义媒体查询，这样可以使样式与选择器更直接相关。

在LESS中，我们可以使用混合器（Mixin）的方式在选择器内定义媒体查询。混合器是一种可重用的代码片段，我们可以在不同的选择器内调用它，以实现样式的复用。下面是一个使用混合器定义媒体查询的示例：

.my-selector {
    color: red;

    .mobile-and-tablet() {
        @media only screen and (max-width: 767px) {
            color: green;
        }
    }

    .laptop-and-desktop() {
        @media only screen and (min-width: 768px) {
            color: blue;
        }
    }
}

在上面的例子中，我们定义了.my-selector选择器，并在其中定义了两个媒体查询混合器.mobile-and-tablet和.laptop-and-desktop。每个混合器内都定义了不同的媒体查询规则，以及相应的样式。

接下来，我们在.my-selector选择器内分别调用这两个混合器：

.my-selector {
    color: red;

    .mobile-and-tablet();
    .laptop-and-desktop();
}

通过这种方式，我们可以更直接地在选择器内定义媒体查询，并且使样式和选择器更紧密地关联在一起。

示例说明

让我们通过一个实际的示例来进一步说明在选择器内定义LESS媒体查询的用法。

假设我们有一个网站，在不同的屏幕尺寸下希望改变导航栏的样式。在移动设备上，我们希望导航栏以垂直方式显示，并且在点击菜单按钮时收起或展开。而在大屏设备上，我们希望导航栏以水平方式显示。

首先，我们可以定义两个媒体查询混合器，分别用于移动设备和大屏设备：

.vertical-nav() {
    @media only screen and (max-width: 767px) {
        flex-direction: column;
        height: auto;

        .menu-button {
            display: block;
        }

        .menu-items {
            display: none;
        }

        .menu-items.open {
            display: block;
        }
    }
}

.horizontal-nav() {
    @media only screen and (min-width: 768px) {
        flex-direction: row;
        height: 60px;

        .menu-button {
            display: none;
        }

        .menu-items {
            display: flex;
        }
    }
}

然后，我们可以将这两个混合器应用到导航栏的选择器中：

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: #fff;

    .vertical-nav();
    .horizontal-nav();
}

通过这种方式，我们可以根据不同的屏幕尺寸应用不同的导航栏样式，且与导航栏的选择器紧密关联。