#3D Text in Sass
Inspired by @mdo
#3D Text in Sass
Inspired by @mdo
$red: red; | |
foo { | |
color: $red; | |
} |
// ---- | |
// Xyz (v4.5.6) | |
// ---- | |
$red: red; | |
foo { | |
color: $red; | |
} |
$red: red; | |
foo { | |
color: $red; | |
} |
$red: red; | |
foo { | |
color: $red; | |
} |
$red: red; | |
foo { | |
color: $red; | |
} |
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
/* | |
A slightly more automated approach to BEM modifier classes: | |
using '&' parent selector interpolation, modifiers extend their bases, | |
so that HTML markup requires only the modifier class not the base *and* modifier | |
*/ |
<div class='container'> | |
<h1>SASS - Variables</h1> | |
<h2><span>Basic</span> - Getting Started</h2> | |
<p id='mypara'>Lorem ipsum dolor sit amet, consectetur | |
adipiscing elit, sed do eiusmod tempor <br> | |
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis | |
nostrud exercitation ullamco laboris nisi</p> |
<h1>Theming UI Components</h1> | |
<p>Each component needs to be aware that it may be used within a colour scheme so it needs to own the process | |
of creating the various classes required to support different uses. Sometimes semantic classes are the way forward, | |
but perhaps we should just allow the use of names to describe the particular style (think Solarized & Darcula, not Primary, Secondary, Success, etc.)</p> | |
<p>Here we create a themes map, which contains the colour definitions for a variety of named themes. | |
This makes it easier to re-use a colour scheme across components and removes the cases where | |
two component modifier classes (with different names) confusingly implement the same colour scheme. | |
e.g. no <code>.btn--primary</code> and <code>.panel--brand</code> which actually use the same colours</p> | |
<p>Read more about this approach in this blog post - <a href="http://www.ian-thomas.net/a-sassy-approach-to-theming-components/" class="link-t-sassmeister-dark">A Sassy Approach To Theming Components</a></p> |
$red: red; | |
foo { | |
color: $red; | |
} |