Created
January 13, 2012 19:21
-
-
Save rickharris/1608229 to your computer and use it in GitHub Desktop.
Example of a Sass bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Failing example: how to make a duplicate selector | |
// Requirement 1. Style block with list of selectors on newlines | |
// Requirement 2. Extend non-first selector from the list of selectors | |
// Requirement 3. Extend from nested selector | |
// Results in two sets of duplicate selectors | |
.example-1-1, | |
.example-1-2, | |
.example-1-3 { | |
font-size: 24px; | |
color: #444; | |
} | |
.my-page-1 { | |
.my-module-1-1 { | |
@extend .example-1-2; // Produces dup selector | |
} | |
.my-module-1-2 { | |
@extend .example-1-3; // Produces dup selector | |
} | |
} | |
// => | |
// .example-1-1, | |
// .example-1-2, | |
// .my-page-1 .my-module-1-1, .my-page-1 | |
// .my-module-1-1, | |
// .example-1-3, | |
// .my-page-1 .my-module-1-2, .my-page-1 | |
// .my-module-1-2 { | |
// font-size: 24px; | |
// color: #444; } | |
// Requirement 1 not met: list of selectors on the same line | |
// No dup selectors | |
.example-2-1, .example-2-2, .example-2-3 { | |
font-size: 24px; | |
color: #444; | |
} | |
.my-page-2 { | |
.my-module-2-1 { | |
@extend .example-2-2; // Produces dup selector | |
} | |
.my-module-2-2 { | |
@extend .example-2-3; // Produces dup selector | |
} | |
} | |
// => | |
// .example-2-1, .example-2-2, .my-page-2 .my-module-2-1, .example-2-3, .my-page-2 .my-module-2-2 { | |
// font-size: 24px; | |
// color: #444; } | |
// Requirement 2 not met: extending from a non-nested selector | |
// No dup selectors | |
.example-3-1, | |
.example-3-2, | |
.example-3-3 { | |
font-size: 24px; | |
color: #444; | |
} | |
.my-module-3-1 { | |
@extend .example-3-2; // No dup selector | |
} | |
.my-module-3-2 { | |
@extend .example-3-3; // No dup selector | |
} | |
// => | |
// .example-3-1, | |
// .example-3-2, | |
// .my-module-3-1, | |
// .example-3-3, | |
// .my-module-3-2 { | |
// font-size: 24px; | |
// color: #444; } | |
// Requirement 3 not met: extending the first item from the list | |
// No dup selectors | |
.example-4-1, | |
.example-4-2, | |
.example-4-3 { | |
font-size: 24px; | |
color: #444; | |
} | |
.my-page-4 { | |
.my-module-4 { | |
@extend .example-4-1; // No dup selector | |
} | |
} | |
// => | |
// .example-4-1, .my-page-4 .my-module-4, | |
// .example-4-2, | |
// .example-4-3 { | |
// font-size: 24px; | |
// color: #444; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment