A HTML/CSS Class Naming Convention for Scalable/Modular CSS.
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:11
Sass: Automatically placeholder-ize duplicated CSS declarations. #sass
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
| <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:10
Sass: The Way to Define Robust CSS Module/Component #sass
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
| <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:10
Sass: Using back-slash as the namespace separator in HTML/CSS #sass
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
| <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.scss
Last active
November 21, 2024 08:06
Sass: Creating Custom Scope & Scope-based Default Value #sass
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
| // ---- | |
| // Sass (v3.4.5) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Creating custom scope & scope-based default value in Sass | |
| // | |
| // A use case using mixin. | |
| // This is pseudo code so you need implement some code. | |
| // |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:07
Sass: Placeholder Factory(Mixin) based on the argumetns #sass
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
| <a class="button">A button</a> | |
| <button class="button">Button button</button> | |
| <a class="button-large">A button</a> | |
| <button class="button-large">Button button</button> |
whizark
/ SassMeister-input.scss
Last active
August 29, 2015 14:07
Sass: Creating new scope & instance variable/method #sass
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Creating new scope & instance variable/method in Sass | |
| // | |
| // Other ideas: https://github.com/whizark/xass#ideas | |
| // This is pseudo code |
whizark
/ class-naming-convention.md
Last active
December 2, 2024 03:03
HTML/CSS Class Naming Convention #html #css #sass
whizark
/ SassMeister-input.scss
Last active
August 29, 2015 14:06
Sass: Resolving component dependencies (an improved version) #sass
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Resolving component dependencies | |
| // An improved version of https://gist.github.com/whizark/51ccdfbf57dbcb73953f | |
| // Other ideas: https://github.com/whizark/xass#ideas |
whizark
/ SassMeister-input.scss
Last active
August 29, 2015 14:06
Sass: Resolving component dependencies #sass
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
| // Sass: Resolving component dependencies | |
| // Other ideas: https://github.com/whizark/xass#ideas | |
| // The storage for dependency management | |
| $container: ( | |
| -components: (), | |
| -frozen: () | |
| ); |
whizark
/ SassMeister-input-HTML.html
Created
September 6, 2014 09:43
Sass: Dependency Injection into Mixins #sass
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
| <div class="container--micro"> | |
| <!-- The style attributes only for the purpose of the demo --> | |
| <div style="float: left; height: 100px; background: #0f0;"> | |
| content | |
| </div> | |
| <div style="float: left; height: 100px; background: #00f;"> | |
| content | |
| </div> | |
| </div> |