Skip to content

Instantly share code, notes, and snippets.

@luison
Forked from elijahmanor/SassMeister-input.scss
Created January 8, 2018 16:36
Show Gist options
  • Save luison/8b33219d84c433cfb1e1f0de1819c4f7 to your computer and use it in GitHub Desktop.
Save luison/8b33219d84c433cfb1e1f0de1819c4f7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Scut (v0.10.4)
// ----
@import "scut";
@mixin typeset( $type: body-copy ) {
$types: (
primary-heading: ( font-size: 48px, font-weight: 800 ),
secondary-heading: ( font-size: 16px, font-weight: 700, line-height: 22px ),
body-copy: ( font-size: 16px, line-height: 24px ),
);
$type: map-get($types, $type);
font-size: scut-em(map-get($type, font-size));
@if map-has-key($type, font-weight) {
font-weight: map-get($type, font-weight);
}
@if map-has-key($type, line-height) {
line-height: scut-em(map-get($type, line-height), map-get($type, font-size));
}
}
h1 {
@include typeset(primary-heading);
}
h2 {
@include typeset(secondary-heading);
}
p {
@include typeset(body-copy);
}
// _hero.scss
.Hero {
.Hero-heading {
@include typeset(secondary-heading);
}
}
/*
* Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns.
* v0.10.4
* Docs at http://davidtheclark.github.io/scut
*/
h1 {
font-size: 3em;
font-weight: 800;
}
h2 {
font-size: 1em;
font-weight: 700;
line-height: 1.375em;
}
p {
font-size: 1em;
line-height: 1.5em;
}
.Hero .Hero-heading {
font-size: 1em;
font-weight: 700;
line-height: 1.375em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment