Skip to content

Instantly share code, notes, and snippets.

@shaunbent
Created May 11, 2015 07:45
Show Gist options
  • Save shaunbent/c414d6ae42daba4b94c7 to your computer and use it in GitHub Desktop.
Save shaunbent/c414d6ae42daba4b94c7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
$gel-type-settings: (
'canon': (
'group-a': (
'font-size': 28px,
'line-height': 32px,
'-bold': (
'font-weight': bold,
'letter-spacing': -1px
)
),
'group-b': (
'font-size': 32px,
'line-height': 36px
),
'group-c': (
'font-size': 48px,
'line-height': 56px
),
'group-d': (
'font-size': 40px,
'line-height': 48px
)
),
'canon-bold': (
'group-a': (
'font-weight': bold,
'letter-spacing': -1px
)
)
)
'trafalgar': (
'group-a': (
'font-size': 20px,
'line-height': 24px,
'-bold': (
'font-weight': bold,
'letter-spacing': -1px
)
),
'group-b': (
'font-size': 24px,
'line-height': 28px
),
'group-c': (
'font-size': 36px,
'line-height': 40px
),
'group-d': (
'font-size': 32px,
'line-height': 32px
)
)
);
@function gel-get-values($type-class, $type-group: false) {
$type-settings: map-get($gel-type-settings,$type-class);
@if $type-group == false {
@return $type-settings;
}
@return map-get($type-settings, $type-group);
}
@mixin gel-typography($type-class, $type-group: false) {
$type-is-bold: false;
@if str-index($type-class, '-bold') != null {
$type-class: str-replace($type-class, '-bold', '');
$type-is-bold: true;
}
$type-values: gel-get-values($type-class, $type-group);
@if $type-group != false {
@include gel-output-type-values($type-values, $type-is-bold);
}
}
@mixin gel-output-type-values($type-values, $type-is-bold: false) {
@each $property, $value in $type-values {
@if ($type-is-bold and type-of($value) == map) {
@include gel-output-type-values($value);
}
@if (type-of($value) != map) {
#{$property}: $value;
}
}
}
.foo {
@include gel-typography('canon', 'group-a');
}
.foo--bold {
@include gel-typography('canon-bold', 'group-a');
}
Invalid CSS after " 'trafalgar'": expected selector or at-rule, was ": ("
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment