Question

caution__item class first-child无效。请帮帮我。为什么 sass first-child 无效？

.caution {
    &__item {
        border-radius: 3px;

        @include max-screen($screen-sm-max) {
            border-radius: 0;
            padding-top: 15px;
            padding-bottom: 15px;

            &:first-child {
                padding-top: 50px;
            }

            &:last-child {
                background: red;
                padding-bottom: 50px;
            }
        }
      }

Answer 1

您需要定义mixin（在范围内部或外部，根据您的喜好），然后在范围内调用它（带参数）

Sassmeister demo

.caution {
    &__item {
        @mixin max-screen($screen-sm-max) {
            border-radius: 0;
            padding-top: 15px;
            padding-bottom: 15px;

            &:first-child {
                padding-top: 50px;
            }

            &:last-child {
                background: red;
                padding-bottom: 50px;
            }
        }

        border-radius: 3px;
        @include max-screen(...);
    }
}

请注意，你并没有在mixin中使用参数$screen-sm-max，但是因为你需要传递一个参数（或者会引发错误＆＃34; Mixin max-屏幕缺少参数$ screen-sm-max ＆＃34;）

SASS：第一个孩子不工作的选择器

1 个答案: