css - SASS :first-child not working selector

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 但由于您需要一个参数，因此需要传递它(否则会引发错误 " Mixin max-screen 缺少参数 $screen-sm-max")