csswizardry · February 24, 2016 10:21 · Feb 24, 2016
diff --git a/SassMeister-input-HTML.html b/SassMeister-input-HTML.html
@@ -0,0 +1,31 @@
+<div class="s-prose">
+  <h1 class="u-color-red  c-heading">HTML Ipsum Presents</h1>
+</div>
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<p>
+  <a href=#0 class=c-btn>Button</a>
+</p>
+
+<ol>
+   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+   <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+   <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>#header h1 a { 
+	display: block; 
+	width: 300px; 
+	height: 80px; 
+}</code></pre>
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
@@ -0,0 +1,186 @@
+// ----
+// libsass (v3.2.5)
+// ----
+
+// _settings.global.scss
+
+$base-font-size: 16px;
+$base-line-height: 24px;
+$base-spacing-unit: $base-line-height;
+$base-spacing-unit-sm: round(0.5 * $base-line-height);
+$base-spacing-unit-lg: 2 * $base-line-height;
+
+$font-size-headings: 18px;
+
+
+
+
+
+// _tools.functions.scss
+@function rem($number) {
+  @return $number / $base-font-size * 1rem;
+}
+
+
+
+
+
+// _tools.mixins.scss
+
+@mixin font-size($font-size, $line-height: auto) {
+  font-size: $font-size;
+  font-size: ($font-size / $base-font-size) * 1rem;
+
+  @if $line-height == auto {
+    line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+  }
+
+  @else {
+
+    @if (type-of($line-height) == number or $line-height == inherit or $line-height == normal) {
+      line-height: $line-height;
+    }
+
+    @elseif ($line-height != none and $line-height != false) {
+      @warn "D’oh! ‘#{$line-height}’ is not a valid value for `line-height`."
+    }
+
+  }
+
+}
+
+@mixin rem($property, $value) {
+  #{$property}: $value;
+  #{$property}: rem($value);
+}
+
+
+
+
+
+// _generic.reset.scss
+
+/**
+ * Please use a nicer reset in production.
+ */
+* {
+  margin:  0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+// _generic.shared.scss
+
+h1, h2, h3, h4, h5, h6,
+ul, ol, dl,
+blockquote, p, address,
+hr,
+table,
+fieldset, figure,
+pre {
+  @include rem(margin-bottom, $base-spacing-unit);
+}
+
+
+
+
+
+// _elements.page.scss
+
+html {
+  font: menu;
+  font-size: ($base-font-size / 16px) * 1em;
+  line-height: $base-line-height / $base-font-size;
+  @include rem(padding, $base-spacing-unit-lg);
+}
+
+
+// _elements.headings.scss
+
+h1, h2, h3, h4, h5, h6 {
+  @include font-size($base-font-size);
+  font-weight: bold;
+}
+
+
+
+
+
+// _components.type.scss
+
+.c-heading-huge {
+  @include font-size(48px);
+
+  @media screen and (min-width: 32em) {
+    @include font-size(72px, 1.4);
+  }
+
+}
+
+
+.c-btn {
+  background: #BADA55;
+  color: white;
+  display: inline-block;
+  text-decoration: none;
+  padding: $base-spacing-unit-sm $base-spacing-unit;
+}
+
+
+
+// _trumps.spacing.scss
+
+$properties: (
+  margin: m,
+  padding: p
+);
+
+$directions: (
+  null: '',
+  -top: t,
+  -right: r,
+  -bottom: b,
+  -left: l
+);
+
+$sizes:(
+  null: 1,
+  -none: 0,
+  -xs: 0.25,
+  -sm: 0.5,
+  -lg: 2,
+  -xl: 4
+);
+
+@each $property, $alias in $properties {
+
+  @each $direction, $shorthand in $directions {
+
+    @each $size, $factor in $sizes {
+
+      .u-#{$alias}#{$shorthand}#{$size} {
+
+        #{$property}#{$direction}: $base-spacing-unit * $factor !important;
+
+      }
+
+    }
+
+  }
+
+}
+
+
+
+
+
+// _trumps.debug
+
+:not([class*="s-"]) h1:not([class*="c-heading"]) {
+  //outline: 10px solid red;
+  &:after {
+    content: " H1 headings require a `.c-heading-*` class.";
+    color: red;
+  }
+}
diff --git a/SassMeister-output.css b/SassMeister-output.css
@@ -0,0 +1,301 @@
+/**
+ * Please use a nicer reset in production.
+ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6,
+ul, ol, dl,
+blockquote, p, address,
+hr,
+table,
+fieldset, figure,
+pre {
+  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
+}
+
+html {
+  font: menu;
+  font-size: 1em;
+  line-height: 1.5;
+  padding: 48px;
+  padding: 3rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: bold;
+}
+
+.c-heading-huge {
+  font-size: 48px;
+  font-size: 3rem;
+  line-height: 1;
+}
+
+@media screen and (min-width: 32em) {
+  .c-heading-huge {
+    font-size: 72px;
+    font-size: 4.5rem;
+    line-height: 1.4;
+  }
+}
+
+.c-btn {
+  background: #BADA55;
+  color: white;
+  display: inline-block;
+  text-decoration: none;
+  padding: 12px 24px;
+}
+
+.u-m {
+  margin: 24px !important;
+}
+
+.u-m-none {
+  margin: 0px !important;
+}
+
+.u-m-xs {
+  margin: 6px !important;
+}
+
+.u-m-sm {
+  margin: 12px !important;
+}
+
+.u-m-lg {
+  margin: 48px !important;
+}
+
+.u-m-xl {
+  margin: 96px !important;
+}
+
+.u-mt {
+  margin-top: 24px !important;
+}
+
+.u-mt-none {
+  margin-top: 0px !important;
+}
+
+.u-mt-xs {
+  margin-top: 6px !important;
+}
+
+.u-mt-sm {
+  margin-top: 12px !important;
+}
+
+.u-mt-lg {
+  margin-top: 48px !important;
+}
+
+.u-mt-xl {
+  margin-top: 96px !important;
+}
+
+.u-mr {
+  margin-right: 24px !important;
+}
+
+.u-mr-none {
+  margin-right: 0px !important;
+}
+
+.u-mr-xs {
+  margin-right: 6px !important;
+}
+
+.u-mr-sm {
+  margin-right: 12px !important;
+}
+
+.u-mr-lg {
+  margin-right: 48px !important;
+}
+
+.u-mr-xl {
+  margin-right: 96px !important;
+}
+
+.u-mb {
+  margin-bottom: 24px !important;
+}
+
+.u-mb-none {
+  margin-bottom: 0px !important;
+}
+
+.u-mb-xs {
+  margin-bottom: 6px !important;
+}
+
+.u-mb-sm {
+  margin-bottom: 12px !important;
+}
+
+.u-mb-lg {
+  margin-bottom: 48px !important;
+}
+
+.u-mb-xl {
+  margin-bottom: 96px !important;
+}
+
+.u-ml {
+  margin-left: 24px !important;
+}
+
+.u-ml-none {
+  margin-left: 0px !important;
+}
+
+.u-ml-xs {
+  margin-left: 6px !important;
+}
+
+.u-ml-sm {
+  margin-left: 12px !important;
+}
+
+.u-ml-lg {
+  margin-left: 48px !important;
+}
+
+.u-ml-xl {
+  margin-left: 96px !important;
+}
+
+.u-p {
+  padding: 24px !important;
+}
+
+.u-p-none {
+  padding: 0px !important;
+}
+
+.u-p-xs {
+  padding: 6px !important;
+}
+
+.u-p-sm {
+  padding: 12px !important;
+}
+
+.u-p-lg {
+  padding: 48px !important;
+}
+
+.u-p-xl {
+  padding: 96px !important;
+}
+
+.u-pt {
+  padding-top: 24px !important;
+}
+
+.u-pt-none {
+  padding-top: 0px !important;
+}
+
+.u-pt-xs {
+  padding-top: 6px !important;
+}
+
+.u-pt-sm {
+  padding-top: 12px !important;
+}
+
+.u-pt-lg {
+  padding-top: 48px !important;
+}
+
+.u-pt-xl {
+  padding-top: 96px !important;
+}
+
+.u-pr {
+  padding-right: 24px !important;
+}
+
+.u-pr-none {
+  padding-right: 0px !important;
+}
+
+.u-pr-xs {
+  padding-right: 6px !important;
+}
+
+.u-pr-sm {
+  padding-right: 12px !important;
+}
+
+.u-pr-lg {
+  padding-right: 48px !important;
+}
+
+.u-pr-xl {
+  padding-right: 96px !important;
+}
+
+.u-pb {
+  padding-bottom: 24px !important;
+}
+
+.u-pb-none {
+  padding-bottom: 0px !important;
+}
+
+.u-pb-xs {
+  padding-bottom: 6px !important;
+}
+
+.u-pb-sm {
+  padding-bottom: 12px !important;
+}
+
+.u-pb-lg {
+  padding-bottom: 48px !important;
+}
+
+.u-pb-xl {
+  padding-bottom: 96px !important;
+}
+
+.u-pl {
+  padding-left: 24px !important;
+}
+
+.u-pl-none {
+  padding-left: 0px !important;
+}
+
+.u-pl-xs {
+  padding-left: 6px !important;
+}
+
+.u-pl-sm {
+  padding-left: 12px !important;
+}
+
+.u-pl-lg {
+  padding-left: 48px !important;
+}
+
+.u-pl-xl {
+  padding-left: 96px !important;
+}
+
+:not([class*="s-"]) h1:not([class*="c-heading"]):after {
+  content: " H1 headings require a `.c-heading-*` class.";
+  color: red;
+}
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
@@ -0,0 +1,31 @@
+<div class="s-prose">
+  <h1 class="u-color-red  c-heading">HTML Ipsum Presents</h1>
+</div>
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<p>
+  <a href=#0 class=c-btn>Button</a>
+</p>
+
+<ol>
+   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+   <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+   <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>#header h1 a { 
+	display: block; 
+	width: 300px; 
+	height: 80px; 
+}</code></pre>