Skip to content

Instantly share code, notes, and snippets.

@Zegnat Zegnat/README.md
Created Sep 15, 2014

Embed
What would you like to do?
Somewhat complete SASS mixin for font-feature-settings.

LibSass compatible.

Pass any valid comma separated list of feature tag–value pairs, always in the form of "tag" value where value is 0 or 1. These will be mixed in with the defaults (as in $font-feature-defaults).

@mixin font-feature-settings($feature-tag-value...) {
$font-feature-defaults: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
$out: $font-feature-defaults;
@if length($feature-tag-value) > 0 {
@each $pair in $feature-tag-value {
$tag: nth($pair, 1);
$nth: index($font-feature-defaults, $tag 0) or index($font-feature-defaults, $tag 1);
@if type-of($nth) == number {
$step: ();
@if $nth > 1 {
@for $i from 1 through $nth - 1 {
$step: append($step, nth($out, $i), comma);
}
}
$step: append($step, $pair, comma);
@if $nth < length($out) {
@for $i from $nth + 1 through length($out) {
$step: append($step, nth($out, $i), comma);
}
}
$out: $step;
}
@else {
$out: append($out, $pair);
}
}
}
-webkit-font-feature-settings: $out;
-moz-font-feature-settings: $out;
font-feature-settings: $out;
}
html, body {
@include font-feature-settings("dlig" 0);
}
h1, h2, h3 {
@include font-feature-settings("dlig" 1);
}
abbr {
text-transform: uppercase;
@include font-feature-settings("smcp" 1, "c2sc" 1);
}
time {
@include font-feature-settings();
}
pre, kbd, samp, code {
@include font-feature-settings("kern" 0, "liga" 0, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1);
}
html, body {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; }
h1, h2, h3 {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; }
abbr {
text-transform: uppercase;
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; }
time {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; }
pre, kbd, samp, code {
-webkit-font-feature-settings: "kern" 0, "liga" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "zero" 1;
-moz-font-feature-settings: "kern" 0, "liga" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "zero" 1;
font-feature-settings: "kern" 0, "liga" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "zero" 1; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.