| /// 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); |
| javascript:(window.location=window.location.toString().replace(/^http:\/\/localhost:6006\//,'http://localhost:6006/iframe.html')) |
| <h1 class="foo">I am foo</h1> | |
| <h1 class="bar">I am bar</h1> |
| // ---- | |
| // libsass (v3.1.0) | |
| // ---- | |
| // Calculate ems | |
| // ========================================================================== */ | |
| // | |
| // @params | |
| // $value | |
| // $context |
| // ---- | |
| // Sass (v3.4.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| $root-typesize : 16px; | |
| // Mixin - Font-size rem | |
| // ========================================================================== */ | |
| // |
| <article> | |
| <h1 class="title">Experiment with colors when designing in the browser</h1> | |
| <h2 class="subtitle">Of course this isn't limited to colors.</h2> | |
| <p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p> | |
| <p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p> | |
| <p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p> | |
| </article> |
| <article> | |
| <h1 class="title">Experiment with colors when designing in the browser</h1> | |
| <h2 class="subtitle">Of course this isn't limited to colors.</h2> | |
| <p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p> | |
| <p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p> | |
| <p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p> | |
| </article> |
| <article> | |
| <h1 class="title">This is a Title</h1> | |
| <p>this is a paragraph</p> | |
| </article> |
When you extend a .class Sass looks for every occurrence of that class and creates a comma-separated selector to combine them. This is great until you lose sight of the every occurance part. That means that whenever you nest a selector you're extending then that nest will also be added to every other selector that is part of the extend.
It blows up really quickly.
| <div id="skip-link"> | |
| <a href="#nav" class="menu-trigger">menu</a> | |
| </div> | |
| <header id="header" role="banner" class="site-header"> | |
| <a href="" > | |
| <h1 class="site-name">Offside Nav Demo</h1> | |
| </a> | |
| </header> |