Skip to content

Instantly share code, notes, and snippets.

Avatar

Jed Foster jedfoster

View GitHub Profile
@jedfoster
jedfoster / input.scss
Last active Sep 2, 2020
Generated by SassMeister.com.
View input.scss
$red: red;
foo {
color: $red;
}
@jedfoster
jedfoster / input.scss
Last active Aug 22, 2020
Generated by SassMeister.com.
View input.scss
// ----
// Xyz (v4.5.6)
// ----
$red: red;
foo {
color: $red;
}
@jedfoster
jedfoster / input.sass
Created Aug 18, 2020
Generated by SassMeister.com.
View input.sass
$red: red;
foo {
color: $red;
}
@jedfoster
jedfoster / input.sass
Last active Aug 18, 2020
Generated by SassMeister.com.
View input.sass
$red: red;
foo {
color: $red;
}
@jedfoster
jedfoster / input.sass
Created Aug 18, 2020
Generated by SassMeister.com.
View input.sass
$red: red;
foo {
color: $red;
}
@jedfoster
jedfoster / SassMeister-input.scss
Created Aug 12, 2020 — forked from lunelson/SassMeister-input.scss
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// 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
*/
View SassMeister-input-HTML.html
<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>
View SassMeister-input-HTML.html
<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>
@jedfoster
jedfoster / input.scss
Created Aug 12, 2020
Generated by SassMeister.com.
View input.scss
$red: red;
foo {
color: $red;
}
You can’t perform that action at this time.