Родительский уровень SCSS - PullRequest
Новая
       10

Родительский уровень SCSS

1 голос
/ 10 июля 2019

У меня есть код: 

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

И, например, использовать миксин, чтобы найти этот предмет (возможно, есть готовое решение из коробки) 

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

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

Ответы [ 3 ]

0 голосов
/ 10 июля 2019

Вы можете использовать списки 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/

0 голосов
/ 10 июля 2019

Решил мою проблему.И учился одновременно SCSS:)

Mixin: 

@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;
                }
            }
        }
    }
}
0 голосов
/ 10 июля 2019 

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