Last active
August 29, 2015 14:10
-
-
Save jeffkamo/891f2002ef23bf8e4788 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
| // ---- | |
| // Sass (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // file: `/styles/templates/_plp.scss` | |
| // --- | |
| .t-plp { | |
| // Note! | |
| // | |
| // This example code assume that the `.t-plp` class is | |
| // on body. That means the html is `<body class="t-plp">` | |
| .product, | |
| .new-product, | |
| .featured-product { | |
| // These selectors are going to be compiled 3 times, | |
| // but that's expected and okay! | |
| color: red; | |
| article { | |
| // This selector is going to be compiled 3 times... | |
| // but doesn't that seem a little excessive? | |
| color: green; | |
| ol, | |
| ul { | |
| // These selectors are going to be compiled 3x2 | |
| // times... hmm, that's getting a bit sketchy, not | |
| // to mention the really long selector. | |
| color: blue; | |
| li, | |
| > div { | |
| // These selectors are going to be compiled | |
| // 3x2x2 times... oooh boy, this is way too much | |
| // and now the selector chain is monstrous! | |
| color: black; | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains 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
| .t-plp .product, | |
| .t-plp .new-product, | |
| .t-plp .featured-product { | |
| color: red; | |
| } | |
| .t-plp .product article, | |
| .t-plp .new-product article, | |
| .t-plp .featured-product article { | |
| color: green; | |
| } | |
| .t-plp .product article ol, | |
| .t-plp .product article ul, | |
| .t-plp .new-product article ol, | |
| .t-plp .new-product article ul, | |
| .t-plp .featured-product article ol, | |
| .t-plp .featured-product article ul { | |
| color: blue; | |
| } | |
| .t-plp .product article ol li, | |
| .t-plp .product article ol > div, | |
| .t-plp .product article ul li, | |
| .t-plp .product article ul > div, | |
| .t-plp .new-product article ol li, | |
| .t-plp .new-product article ol > div, | |
| .t-plp .new-product article ul li, | |
| .t-plp .new-product article ul > div, | |
| .t-plp .featured-product article ol li, | |
| .t-plp .featured-product article ol > div, | |
| .t-plp .featured-product article ul li, | |
| .t-plp .featured-product article ul > div { | |
| color: black; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment