Skip to content

Instantly share code, notes, and snippets.

@rickharris
Created January 13, 2012 19:21
Show Gist options
  • Save rickharris/1608229 to your computer and use it in GitHub Desktop.
Save rickharris/1608229 to your computer and use it in GitHub Desktop.
Example of a Sass bug
// 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