How make scss child-parent rules?

Example:

.root-selector .two-selector .other-selector .any-selector .gold .button{
    color:gold;
}

.root-selector .two-selector .other-selector .any-selector .black .button{
    color:#000;
}

.root-selector .two-selector .other-selector .any-selector .yellow .button{
    color:yellow;
}

.root-selector .two-selector .other-selector .any-selector .grey .button{
    color: rgb(100,100,100);
}

Need make simple and compact scss rule for the case.

Upvotes: 0

Views: 63

Answers (1)

Ramy Mohamed
Ramy Mohamed

Reputation: 258

It's Will be:

.root-selector {
    .two-selector {
        .other-selector {
            .any-selector {
                .gold {
                    .button {
                        color:gold;
                    }
                }
                .black {
                    .button {
                        color:#000;
                    }
                }
                .yellow {
                    .button {
                        color:yellow;
                    }
                }
            }
        }
    }
}

Or:

.root-selector {
    .gold {
        .button {
            color:gold;
        }
    }
    .black {
        .button {
            color:#000;
        }
    }
    .yellow {
        .button {
            color:yellow;
        }
    }
}

Or:

.root-selector {
    .gold > * {
        color:gold;
    }
    .black > * {
        color:#000;
    }
    .yellow > * {
        color:yellow;
    }
}

Upvotes: 1

Related Questions