codingdesigner

/// Get type definition from configuration map
/// and write to a style block
/// @param {string} $definition-family - definition family from configuration map
/// @param {string} $definition-name - definition name from configuration map
@mixin fetch-definition-typography($definition-family, $definition-name) {
  $type-definitions-map: map-get($typography, definitions);
  $type-definitions-family: map-get($type-definitions-map, $definition-family);
  $type-definition: map-get($type-definitions-family, $definition-name);
  $letter-spacing-value: map-get($type-definition, letter-spacing);
  @include fetch-type-sizes($type-definition);

codingdesigner

javascript:(window.location=window.location.toString().replace(/^http:\/\/localhost:6006\//,'http://localhost:6006/iframe.html'))

codingdesigner

// ---
// Sass (v3.2.9)
// ---


@mixin button() {
  $button-color: #ECECEC;
  $button-text-color: #2d2d2d;
  border-radius: 0.2em;
  color: $button-text-color;

codingdesigner

$iterations: 100;

@function lmao($orig-color, $iterations, $sx, $sy, $sz) {
  $output: '';
  $end: $iterations;
 
  $x0: $sx / 10;
  $y0: $sy;
  $z0: $sz;
  $h: 0.01;

codingdesigner

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "breakpoint";

/* SURPRISE! This is broken in Breakpoint 2.0.7 */
@include breakpoint(max-width 350px, 500px 600px) {
      left: -0.75em;

codingdesigner

<div class="foo">
    <h2>Hello World</h2>
</div>

codingdesigner

<article class="module">
    <h1>Welcome</h1>
    <p>This is a simple example using a combination of both REM and EM to help dictate margin, padding, etc in EM values, based on a font-size set in REM for the parent containers.</p>
    <p>Use Rems when a font size change is needed on an element, but then use EMs for padding, margins and any children elements.</p>
    <p>Just set the font size in Rems, and then for any other measurements use EMs by doing (desired px value/element font-size in pixels + em).</p>
</article>

<article class="module">
    <h1>Example</h1>
    <p>I'm sure that it would be possible to use Sass in a better (and cooler) way to start controlling the sizing even moreso and really harness Sass's power. I'll be looking into it, as I play further with this technique.</p>

codingdesigner

// ---
// Sass (v3.2.9)
// ---


%h1 {
  font-size: 2rem;
  line-height: 1.75;
}
%h2 {

codingdesigner

// ---
// Sass (v3.2.9)
// ---


h1 {
  font-size: 2rem;
  line-height: 1.75;
}
h2 {

codingdesigner

// ---
// Sass (v3.2.9)
// ---


h1 {
  font-size: 2rem;
  line-height: 1.75;
}
h2 {