Skip to content

Instantly share code, notes, and snippets.

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

Whizark whizark

🏞️
Working from home
14 followers · 7 following
View GitHub Profile
@whizark
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:10
Sass: Using back-slash as the namespace separator in HTML/CSS #sass
<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
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:10
Sass: The Way to Define Robust CSS Module/Component #sass
<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
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:11
Sass: Automatically placeholder-ize duplicated CSS declarations. #sass
<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
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:11
Sass: Element-type-based conditional styles inside Mixin #sass
<a class="button">A</a>
<button class="button">button</button>
<a class="button-2">A</a>
<button class="button-2">button</button>
@whizark
whizark / SassMeister-input-HTML.html
Last active October 24, 2021 02:42
Sass: placeholder-exists() in Sass #sass
<div class="warning">
<p>A Warning Message.</p>
</div>
@whizark
whizark / SassMeister-input.scss
Last active August 29, 2015 14:11
Sass: Typed value with the descriptor. #sass
// ----
// 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
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:12
OOSASS: Writting OOP-like CSS Component (Factory, Accessor, Dependency Injection etc.) #sass
<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
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
// ----
// 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
whizark / SassMeister-input.scss
Created January 25, 2015 19:52
Sass: Pseudo `undefined` value to distinguish `null`. #sass
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
// Sass: Pseudo `undefined` value to distinguish `null`.
//
// http://twitter.com/whizark
//
// Other ideas
@whizark
whizark / SassMeister-input-HTML.html
Last active August 29, 2015 14:14
CSS/Sass: Robust/Scalable Layered CSS Architecture #sass #css
<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>