Ressources en ligne:
- Sass Techniques from the Trenches (version PDF), SUIT, BEM CSS conventions and the power of ampersand. There are loads of articles out there about how to do CSS architectural things like BEM, and articles about the features of Sass, but I think this article does the best job I’ve seen yet of linking between the two and showing how the features of Sass help you right good clean CSS code.
Source: Sass Snippets: The Almighty Ampersand
Almost Profound — Sass Snippets_ The Almighty Ampersand (PDF)
SCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.unicorn { background-color: blue; &:hover { outline: 2px solid yellow; } &.pink { background-color: pink; &wat { color: red; } &:hover { outine: 2px solid green; } } } |
CSS output:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.unicorn { background-color: blue; } .unicorn:hover { outline: 2px solid yellow; } .unicorn.pink { background-color: pink; } .unicorn.pinkwat { color: red; } .unicorn.pink:hover { outine: 2px solid green; } |
The trailing Ampersand
SCSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.unicorn { .set-one & { display: none; } } .button--large { .sidebar & { font-size: 80%; } } |
CSS output
|
1 2 3 4 5 6 7 |
.set-one .unicorn { display: none; } .sidebar .button--large { font-size: 80%; } |
SCSS
|
1 2 3 4 5 6 7 8 9 |
@mixin highlight() { color: coral; .sub-nav &, .active &, .sidebar & { background-color: gold; } } li a { @include highlight; } |
CSS output
|
1 2 3 4 5 6 |
li a { color: coral; } .sub-nav li a, .active li a, .sidebar li a { background-color: gold; } |
A Much Simpler @at-Root
SCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Previous Markup (Sass 3.3rc1) .speech-bubble{ color: purple; @at-root #{&}__header{ color: orange; } @at-root #{&}__text{ color: black; @at-root #{&}--link{ color: green; } } } // New Markup (Sass 3.3rc3) .speech-bubble{ color: purple; &__header{ color: orange; } &__text{ color: black; &--link{ color: green; } } } |
CSS output
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.speech-bubble{ color: purple; } .speech-bubble__header{ color: orange; } .speech-bubble__text{ color: black; } .speech-bubble__text--link{ color: green; } |
The double Ampersand
SCSS
|
1 2 3 4 5 6 |
.column--half { color: dimgrey; & + & { margin-left: 30px; } } |
CSS output
|
1 2 3 4 5 6 |
.column--half { color: dimgrey; } .column--half + .column--half { margin-left: 30px; } |