Переход с Ruby Sass на LibSass

Если вы следили за последними крупными анонсами сообщества Sass, возможно, вы видели огромное объявление LibSass 3.0 на SassConf 2014.

В течение некоторого времени драгоценный камень Sass Ruby получает более продвинутые функции, в то время как LibSass обновлялся не так быстро. Это означает, что многие люди, использующие LibSass для компиляции своего Sass (обычно через node-sass в рабочем процессе Grunt / Gulp), не смогли использовать передовые инструменты Sass, подобные тем, о которых вы читаете здесь, в SitePoint.

Большой анонс состоит в том, что Ruby Sass теперь будет ожидать согласования функций с LibSass , а затем будет поддерживать их на той же скорости, насколько это возможно. LibSass 3.0 уже выпущен, и вы можете интегрировать его в свои бегунки задач с самой последней версией node-sass .

Однако что делает LibSass таким важным? Самое большое преимущество над Ruby Sass в том, что он быстрее — намного быстрее . Если более быстрое время компиляции звучит для вас хорошо, вот хорошее введение в установку LibSass .

В этой статье я буду очень практичен: я поделюсь всеми «хитростями», которые я обнаружил, когда пытался скомпилировать свою библиотеку миксина с LibSass. Хотя LibSass 3.0 близка к Ruby Sass 3.4.6, есть несколько вещей, которые не работают одинаково. Вы можете не сталкиваться со всем этим в своем Sass, но если вы столкнетесь с этими небольшими ошибками, я надеюсь, что этот список поможет вам устранить их.

Примечание: в этой статье «Ruby Sass» всегда относится к 3.4.6, а «LibSass» всегда относится к 3.0.1, если не указано иное.

Не проверяйте @if not ...

В Ruby Sass @if not not index($list, $value) {} Я использовал это условие в своих проектах Ruby Sass, так как Хьюго предложил, чтобы оно заставило условие оценить истинное логическое значение.

Однако в LibSass not В LibSass вы можете обойти эту проблему, используя одно из следующих:

 @if index($list, $value) { ... }
@if index($list, $value) != null { ... }
@if index($list, $value) > 0 { ... }

Проверьте это в этой сути Засмейстера .

Следите за своим математическим синтаксисом.

Ruby Sass позволит вам получить следующее:

 $map: (value: 1200px);
.container {
    max-width: map-get($map,value)-1;
}
// Ruby output: 1199px
// LibSass output: 1200px -1

Однако LibSass ожидает, что вы поставите пробел до и после символа минус:

 $map: (value: 1200px);
.container {
    max-width: map-get($map,value) - 1;
}
//output
.container {
  max-width: 1199px; }

Проверьте это в этой сути Засмейстера .

@error

В Ruby Sass @error Это также позволяет вам интерполировать переменные в полезное сообщение об ошибке.

Однако в LibSass строка @error Поскольку он просто печатается для вывода, он не будет интерполировать переменные, если они находятся внутри кавычек. Я полагаю, что вы все еще можете использовать директиву @error Если это так, вы можете обойти проблему интерполяции переменных с конкатенацией строк:

 $error-text: 'error text';
.at-error {
  color: blue;
  @error 'Error: #{$error-text}.'
  @error 'Error: ' + $error-text + '.';
}
//output:
.at-error {
  color: blue;
  @error 'Error: #{$error-text}.';
  @error 'Error: error text.'; }

 .at-root-test {
  content: 'parent';
  .nest {
    content: 'child';
    @at-root .selector {
      content: "not nested";
    }
  }
}
//output
.at-root-test {
  content: 'parent'; }
  .at-root-test .nest {
    content: 'child';
    @at-root .selector {
      content: "not nested"; }
 }