Question

我现在有代码：

<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;
                }
            }
        }
    }
}

Answer 1

$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>

Answer 2

您可以使用scss列表

// .parent.select => blue
// .second.select => green
// .third.select  => yellow
$classes: ('parent', 'second', 'third');
$colors: ('blue', 'green', 'yellow');

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

@for $i from 1 through length($classes) {
    .#{nth($classes, $i)}.select {
        button{
            background: #{nth($colors, $i)} !important;
        }
    }
}

JsFiddle此处：https://jsfiddle.net/wheatup/sjvf190h/13/

Answer 3

解决了我的问题。并同时研究了SCSS：）

Mixin：

holder.yourImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // your code hare
            }
        });

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级父级

3 个答案: