Как скомпилировать из Stylus в SASS?

Question

[Mike]

Стоит задача перенести нужный миксин из Stylus в SASS.
Опыт работы в обоих препроцессорах положительный.
Миксин необходим, чтобы немного уменьшить время работы над подключением @font-face в проект. Мега удобный.

Собственно виновник торжества (Stylus)

Comments

[Сергей delphinpro]

Таким миксином вы не сэкономите время. Точнее, сэкономленное время вы потратите на переименование файлов шрифтов.
Тоже страдал такой фигнёй в молодости.
В итоге пришёл к этому:

@mixin includeFont($family, $weight, $style, $filename, $path) {
  @font-face {
    font-family: $family;
    src: url('#{$path}#{$filename}.woff2') format('woff2'),
    url('#{$path}#{$filename}.woff') format('woff');
    font-weight: $weight;
    font-style: $style;
  }
}

$pathToRoboto: '../fonts/Roboto/subset-';

@include includeFont('Roboto', 100, italic, 'Roboto-ThinItalic', $pathtoRoboto);
@include includeFont('Roboto', 100, normal, 'Roboto-Thin', $pathtoRoboto);
@include includeFont('Roboto', 300, italic, 'Roboto-LightItalic', $pathtoRoboto);
@include includeFont('Roboto', 300, normal, 'Roboto-Light', $pathtoRoboto);
@include includeFont('Roboto', 400, italic, 'Roboto-Italic', $pathtoRoboto);
@include includeFont('Roboto', 400, normal, 'Roboto-Regular', $pathtoRoboto);

Просто и ясно.

[Mike]

Сергей, спасибо вам. У меня в итоге такое получилось.

// FONT-FACE MIXIN
// String Replace
@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
// Font Face
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg)
    $src: null
    $extmods: (eot: "?", svg: "#" + str-replace($name, " ", "_"))
    $formats: (otf: "opentype",ttf: "truetype")
    @each $ext in $exts
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma)
    @font-face
        font-family: quote($name)
        font-style: $style
        font-weight: $weight
        src: $src