SCSS 级父级答案

【问题标题】：SCSS level parentSCSS 级父级
【发布时间】：2019-11-19 15:18:33
【问题描述】：

我现在有代码：

<div class="parent">
    <div class="second select">
        <div class="third">
            <button>OK</button>
        </div>
    </div>
</div>

和他的 SCSS 代码：

.parent{
    .second{
        .third{
            button{
                background: red;
            }
        }
    }
}

是否可以在 SCSS 中为按钮添加选择类而不为其创建单独的类型：

.parent{
    .second{
        .third{
            button{
                background: red;
            }
        }

        &.select{
            .third{
                button{
                    background: green;
                }
            }
        }
    }
}

例如，使用 mixins 来查找这个项目（也许有现成的解决方案）

.parent{
    .second{
        .third{
            button{
                background: red;

                @include find('.select',2){ // 2 or '.second' => 2 it's position (second) or search class ".second"
                    background: green;
                }
            }
        }
    }
}

【问题讨论】：

标签： sass less

【解决方案1】：

解决了我的问题。并且同时学习了SCSS :)

混音：

@mixin find($find, $new) {
    $newselector: ();

    @each $selector in & {
        $length: length($selector);

        @for $i from 1 through $length {
            $ff: nth($selector,$i);

            @if($ff == $find){
                $ff: $ff#{$new};
            }

            $newselector: append($newselector, $ff);
        }
    }

    @at-root #{$newselector} {
        @content;
    }
}

SCSS：

.parent{
    .second{
        .third{
            button{
                background: red;

                @include find('.second','.select'){
                    background: green;
                }
            }
        }
    }
}

【讨论】：

这只是我的意见，但您的解决方案很难阅读。最好保持代码简单：KISS > DRY。此外，在这种情况下，您遇到了嵌套选择器问题：thesassway.com/beginner/the-inception-rule。所以，如果你删除了一些选择器，这对你来说可能是一个很好的解决方案：stackoverflow.com/questions/52983769/…。干杯；）

【解决方案2】：

$colors: red, green, yellow, blue;

@for $i from 1 through length($colors) {
	button:nth-child(#{length($colors)}n+#{$i}) {
		background: nth($colors, $i);
	}
}

.wrapper {
  button {
    padding: 15px 65px;
    border: 0;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
  </div>
</body>
</html>

【讨论】：

我不需要使用伪元素，我需要知道父元素是否有某个类，然后给它想要的样式。我仅将按钮设置为示例。可以使用div块
您想在按钮上显示红色，但只有在有任何类 .select 时才显示绿色？再次检查代码。我已经更新或让我知道你到底想要什么
我已经有了这两个分支的代码，从“第二个”的类开始。我想知道如何使用 mixins 缩短代码，搜索树。上面的例子
您能否检查一下是否有帮助
请再次检查:)