A HTML/CSS Class Naming Convention for Scalable/Modular CSS.
whizark
/ SassMeister-input.scss
Last active
January 30, 2019 11:56
Sass: Generating decoupled color schemes #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.1) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Generating decoupled color schemes | |
| // Helper functions | |
| @function tint($color, $percentage) { | |
| @return mix(white, $color, $percentage); |
whizark
/ SassMeister-input.scss
Last active
August 29, 2015 14:06
Sass: Typed value factory & validator using Map #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.1) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Sass: Typed value factory & validator using Map | |
| // Direction type that accepts only top, right, left, bottom | |
| // Direction type factory | |
| @function dir-new($dir) { |
whizark
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:06
Sass: Passing/Getting property value(s) into/inside mixins/functions #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">An example link</a> | |
| <a class="button--ghost">An example link</a> |
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> |
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.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
/ 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: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
/ 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
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. | |
| // |