Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----
// More String Functions!
// ======================
// Replace
// -------
// Return a string with a substring replaced
@function str-replace(
$string,
$old,
$new: ''
) {
$_i: str-index($string, $old);
$_n: str-length($old);
$_a: str-slice($string, 1, $_i - 1);
$_z: str-slice($string, $_i + $_n);
@return $_a + $new + $_z;
}
// Interpolate
// -----------
// Return a string with interpolated values in place of "%s" format strings
@function interpolate(
$string,
$values...
) {
$_return: $string;
@each $val in $values {
@if str-index($_return, '%s') {
$_return: str-replace($_return, '%s', $val);
} @else {
@warn 'Too many values passed for interpolation with "#{$string}".';
}
}
@if str-index($_return, '%s') {
@warn 'Not all format strings were replaced in "#{$string}".';
}
@return $_return;
}
// Use Case
// --------
$font-path: "path/to/my-fake-%s%s-webfont.%s";
$versions: regular, bold, italic, bold italic;
$formats: woff, ttf, svg;
// Valid Font Values
$styles: italic, oblique;
$weights: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder, lighter;
// Input
.input {
path: $font-path;
versions: $versions;
formats: $formats;
}
// Output
.output {
@each $v in $versions {
$weight: '';
$style: '';
@if $v == regular {
$weight: regular;
} @else {
@each $item in $v {
@if index($styles, $item) {
$style: $item;
} @else if index($weights, $item) {
$weight: $item;
}
}
}
@each $format in $formats {
#{$v $format}: interpolate($font-path, $weight, $style, $format);
}
}
}
.input {
path: "path/to/my-fake-%s%s-webfont.%s";
versions: regular, bold, italic, bold italic;
formats: woff, ttf, svg;
}
.output {
regular woff: "path/to/my-fake-regular-webfont.woff";
regular ttf: "path/to/my-fake-regular-webfont.ttf";
regular svg: "path/to/my-fake-regular-webfont.svg";
bold woff: "path/to/my-fake-bold-webfont.woff";
bold ttf: "path/to/my-fake-bold-webfont.ttf";
bold svg: "path/to/my-fake-bold-webfont.svg";
italic woff: "path/to/my-fake-italic-webfont.woff";
italic ttf: "path/to/my-fake-italic-webfont.ttf";
italic svg: "path/to/my-fake-italic-webfont.svg";
bold italic woff: "path/to/my-fake-bolditalic-webfont.woff";
bold italic ttf: "path/to/my-fake-bolditalic-webfont.ttf";
bold italic svg: "path/to/my-fake-bolditalic-webfont.svg";
}
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.