whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:10
Sass: Using back-slash as the namespace separator in HTML/CSS #sass
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
| <ul class="vertical-list"> | |
| <li class="vertical-list\item">Item</li> | |
| <li class="vertical-list\featured-item">Item</li> | |
| <li class="vertical-list\item">Item</li> | |
| </ul> | |
| <ul class="horizontal-list"> | |
| <li class="horizontal-list\item">Item</li> | |
| <li class="horizontal-list\featured-item">Item</li> | |
| <li class="horizontal-list\item">Item</li> |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:10
Sass: The Way to Define Robust CSS Module/Component #sass
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
| <ul class="horizontal-list"> | |
| <li class="horizontal-list\item">Item</li> | |
| <li class="horizontal-list\item">Item</li> | |
| <li class="horizontal-list\item">Item</li> | |
| </ul> |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:11
Sass: Automatically placeholder-ize duplicated CSS declarations. #sass
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
| <p class="test-1-1">.test-1-1</p> | |
| <p class="test-1-2">.test-1-2</p> | |
| <p class="test-2-1">.test-2-1</p> | |
| <p class="test-2-2">.test-2-2</p> | |
| <p class="test-3-1">.test-3-1</p> | |
| <p class="test-3-2">.test-3-2</p> | |
| <p class="test-4-1">.test-4-1</p> | |
| <p class="test-4-2">.test-4-2</p> |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:11
Sass: Element-type-based conditional styles inside Mixin #sass
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
| <a class="button">A</a> | |
| <button class="button">button</button> | |
| <a class="button-2">A</a> | |
| <button class="button-2">button</button> |
whizark
/ SassMeister-input-HTML.html
Last active
October 24, 2021 02:42
Sass: placeholder-exists() in Sass #sass
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
| <div class="warning"> | |
| <p>A Warning Message.</p> | |
| </div> |
whizark
/ SassMeister-input.scss
Last active
August 29, 2015 14:11
Sass: Typed value with the descriptor. #sass
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.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Typed value with the descriptor. | |
| // | |
| // Typed value factory & validator using Map | |
| // https://gist.github.com/whizark/b42f5d52c3caa2ad5f43 | |
| // |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:12
OOSASS: Writting OOP-like CSS Component (Factory, Accessor, Dependency Injection etc.) #sass
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
| <h2>list</h2> | |
| <ul class="list"> | |
| <li class="list\item">Item</li> | |
| <li class="list\item">Item</li> | |
| </ul> | |
| <h2>note-list</h2> | |
| <ul class="note-list"> | |
| <li class="note-list\item">Item</li> | |
| <li class="note-list\item">Item</li> |
whizark
/ SassMeister-input.scss
Last active
August 29, 2015 14:14
Sass: The easiest way of creating new scope at root-level witout any selectors. #sass
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.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: The easiest way of creating new scope at root-level witout any selectors. | |
| // | |
| // http://twitter.com/whizark | |
| // | |
| // Other ideas |
whizark
/ SassMeister-input.scss
Created
January 25, 2015 19:52
Sass: Pseudo `undefined` value to distinguish `null`. #sass
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.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Pseudo `undefined` value to distinguish `null`. | |
| // | |
| // http://twitter.com/whizark | |
| // | |
| // Other ideas |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:14
CSS/Sass: Robust/Scalable Layered CSS Architecture #sass #css
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
| <div class="app"> | |
| <!-- | |
| An element should know only its own child elements, | |
| child elements should not know the parent element. | |
| (at least, in HTML) | |
| Therefore, well-structured element has ONLY 1-2 class(es). | |
| --> | |
| <div class="app--note note"> | |
| <ul class="note--list list"> | |
| <li class="list--li li">Item</li> |