Skip to content

Instantly share code, notes, and snippets.

View whizark's full-sized avatar
🏞️
Working from home

Whizark whizark

🏞️
Working from home
View GitHub Profile
@whizark
whizark / SassMeister-input.scss
Last active January 30, 2019 11:56
Sass: Generating decoupled color schemes #sass
// ----
// 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
whizark / SassMeister-input.scss
Last active August 29, 2015 14:06
Sass: Typed value factory & validator using Map #sass
// ----
// 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
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:06
Sass: Passing/Getting property value(s) into/inside mixins/functions #sass
<a class="button">An example link</a>
<a class="button--ghost">An example link</a>
@whizark
whizark / SassMeister-input-HTML.html
Created September 6, 2014 09:43
Sass: Dependency Injection into Mixins #sass
<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
whizark / SassMeister-input.scss
Last active August 29, 2015 14:06
Sass: Resolving component dependencies #sass
// Sass: Resolving component dependencies
// Other ideas: https://github.com/whizark/xass#ideas
// The storage for dependency management
$container: (
-components: (),
-frozen: ()
);
@whizark
whizark / SassMeister-input.scss
Last active August 29, 2015 14:06
Sass: Resolving component dependencies (an improved version) #sass
// ----
// 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
whizark / class-naming-convention.md
Last active March 13, 2024 06:22
HTML/CSS Class Naming Convention #html #css #sass
@whizark
whizark / SassMeister-input.scss
Last active August 29, 2015 14:07
Sass: Creating new scope & instance variable/method #sass
// ----
// 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
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:07
Sass: Placeholder Factory(Mixin) based on the argumetns #sass
<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
whizark / SassMeister-input.scss
Last active June 17, 2021 19:48
Sass: Creating Custom Scope & Scope-based Default Value #sass
// ----
// 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.
//