Stylelint：预期声明将在规则/订单之前提出

发布于 2025-02-04 19:47:19 字数 443 浏览 3 评论 0原文

代码如下：

    .home-feat2 {
        background-color: stencilColor("color-greyLight");
        img {width: 10rem;}
        margin-bottom: spacing("single");
        @include breakpoint("medium") {
            margin-bottom: 3rem;
        }
    }

预期声明在规则/订单/订单指向Margin -Bottom：spacing（“ SINCE”）;的线上指向行。提出了这个错误的含义，但是我找不到有关Stylelint的描述性文档。也许是因为我只是不了解术语，但是我很难找到有关此主题的任何内容。任何帮助都将受到赞赏。

原文

The code is as follows:

    .home-feat2 {
        background-color: stencilColor("color-greyLight");
        img {width: 10rem;}
        margin-bottom: spacing("single");
        @include breakpoint("medium") {
            margin-bottom: 3rem;
        }
    }

Expected declaration to come before rule - order/order points to the line with margin-bottom: spacing("single"); however I tried looking up what this error meant but I can't find a lot of descriptive documentation on stylelint. Maybe it's because I just don't understand the terminology, but I'm having trouble finding anything on this subject. Any help is appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星星的軌跡 2025-02-11 19:47:19

您的衬里希望您在规则之前写声明 。

在CSS中，A 声明是CSS属性及其值的键值对，例如Margin-Bottom：Spacing（“ SINCE”）。
请参阅声明块的视觉表示。

A 规则是由一个或多个选择器定义的块，包含声明，例如：img {width：10rem; }。
请参阅规则集的视觉表示。

这对您意味着什么，这意味着您可能应该在声明之后编写规则img {}：

    .home-feat2 {
        background-color: stencilColor("color-greyLight");
        margin-bottom: spacing("single");

        @include breakpoint("medium") {
            margin-bottom: 3rem;
        }

        img {width: 10rem;}
    }

此特定规则的目的是允许易于阅读 code br>
应用时，您可以乍一看，背景色和margin bottom被应用于.home-feat2和宽度应用于img。

编辑：多亏了Jeddy3 ，添加了一些其他信息

Your linters expects you to write declarations before rules.

In CSS, a declaration is the key-value pair of a CSS property and its value, like margin-bottom: spacing("single").
See a visual representation of a declaration block.

A rule is the block defined by one or multiple selectors, containing declarations, like: img { width: 10rem; }.
See a visual representation of a rule set.

What it means for you, it means that you should probably write the rule img {} after the declarations:

    .home-feat2 {
        background-color: stencilColor("color-greyLight");
        margin-bottom: spacing("single");

        @include breakpoint("medium") {
            margin-bottom: 3rem;
        }

        img {width: 10rem;}
    }

This specific rule purpose is to allow an easy to read code.
When applied, you can see at the first glance that background-color and margin-bottom are applied to .home-feat2 and width is applied to img.

edit: added some additional informations thanks to jeddy3

回复收藏 0 原文

~没有更多了~