Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Inheritance chain: Shape => Square => Circle
- /* index.html =============== */
- <div class="square"></div>
- <div class="circle"></div>
- /* style.scss =============== */
- @import "square";
- @import "circle";
- /* _shape.scss ============== */
- .shape {
- border: 10px solid silver;
- }
- /* _square.scss ============== */
- @import "shape";
- .square {
- @extend .shape;
- width: 100px;
- height: 100px;
- }
- /* _circle.scss ============== */
- @import "square";
- .circle {
- @extend .square;
- @include border-radius(9999px);
- }
- /* ||||||| OUTPUT |||||||||||| */
- .shape, .square, .circle {
- border: 10px solid silver;
- }
- .square, .circle {
- width: 100px;
- height: 100px;
- }
- .shape, .square, .circle { <==== Repeated
- border: 10px solid silver; <==== Repeated
- } <==== Repeated
- .square, .circle { <==== Repeated
- width: 100px; <==== Repeated
- height: 100px; <==== Repeated
- } <==== Repeated
- .circle {
- -webkit-border-radius: 9999px;
- -moz-border-radius: 9999px;
- border-radius: 9999px;
- }
- /* ================================
- When I remove @import "square"; in style.scss, the repetition disappears but I want to be able to explicitly import "square" too, to see that I can use this class, and not just "circle", for clarity.
- What am I doing wrong here? Is it a known bug?
- =================================== */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement