A Pen by Mason Wendell on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Breakpoint</h1> | |
<ul> | |
<li>media query shortcuts</li> | |
<li>media query variables</li> | |
<li>convert px to ems</li> | |
<li>resolution conversion and prefixing</li> | |
<li>no-query fallbacks (IE8!)</li> | |
<li>media query context inspection (frameworks)</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
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.
- Avoid extending a nested selector
- Avoid adding styles to an extended .class name
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article> | |
<h1 class="title">This is a Title</h1> | |
<p>this is a paragraph</p> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
$root-typesize : 16px; | |
// Mixin - Font-size rem | |
// ========================================================================== */ | |
// |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.1.0) | |
// ---- | |
// Calculate ems | |
// ========================================================================== */ | |
// | |
// @params | |
// $value | |
// $context |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 class="foo">I am foo</h1> | |
<h1 class="bar">I am bar</h1> |
OlderNewer