До сих пор у нас был этап после сборки, который использовал гем Sass в командной строке для создания нашего global.css.
Я переключаюсь на Cassette, который использует Cassette.Sass, который использует SassAndCoffee, который, по-видимому, использует Sass 3.2.0 :-)
Однако, когда Cassette выполняет компиляцию, я получаю странные нули в сгенерированном css. Судя по тому, как выглядит страница, это неверный css и косяк с дизайном.
Например:
.pure-container {
padding: 31px null;
padding: 1.714rem null;
padding-right: 0.9375%; }
Я думал, что это может быть связано с разницей версий Sass (поскольку мы использовали гем sass для 3.2.8), но если я использую гем Sass версии 3.2.0 из командной строки, я получаю тот же (действительный) результат как и раньше я начал использовать Cassette, без нулей:
.pure-container {
padding: 31px;
padding: 1.71429 rem;
padding-right: 0.9375%; }
Подводя итог, Cassette.Sass с использованием Sass 3.2.0 не компилирует мой CSS так же, как Sass 3.2.0 Gem из командной строки. Что я должен проверить?
Я не фронтенд-разработчик и не очень хорошо знаком с scss, но если это актуально, вот как выглядит наш global.scss:
// ----- SCSS Helpers -----
@import "imports/_mixins.scss";
@import "imports/_variables.scss";
// ----- Pure Grid -----
@import "imports/_extend-pure.scss";
// ----- Theme -----
@import "imports/_typography.scss";
@import "imports/_helpers.scss";
@import "imports/_buttons.scss";
@import "imports/_forms.scss";
@import "imports/_modules.scss";
// ----- Media Queries -----
@import "imports/_media-phone.scss";
@import "imports/_media-tablet-query.scss";
@import "imports/_media-desktop-query.scss";
И все эти импортированные файлы существуют, и исключений при компиляции SASS нет.
Единственное упоминание о 'null', которое я могу найти, находится в _mixins.scss:
@mixin size($property: null, $units: 4, $importance: null, $mixin: null) {
// This mixin will calculate the rem values defined by design (6px's in mobile and scaled up for desktop)
// Because IE8 and below don't support rem, we insert the px equivalent for the desktop sizes just before.
$pixel-size: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop))) + px $importance;
$rem-size: ((1/$font-size-mobile)*(6*$units)) + rem $importance;
@if $mixin == min-height {
@include min-height($pixel-size);
@include min-height($rem-size);
}
@else if $mixin == max-height {
@include max-height($pixel-size);
@include max-height($rem-size);
}
@else {
#{$property}: $pixel-size; // This number is rounded to the nearest whole number to avoid issues with IE7
#{$property}: $rem-size;
}
// EXAMPLE OF HOW TO USE
// @include size(line-height, 4, !important); <-- important is optional
// EXAMPLE OF HOW TO USE 2
// @include size($mixin: min-height, $units: 4);
}
В остальном кассета просто потрясающая, и я бы с удовольствием ею воспользовался, но это довольно большой барьер! Приветствуются любые мысли, в том числе, где еще я мог бы опубликовать это в надежде на ответ, который может помочь! Я в курсе, что есть и другие варианты компиляции Sass, и если я не получу здесь особой радости, я сброшу Cassette в пользу MS.Web.Optimization в сочетании с NSass, но я очень хочу, чтобы Cassette работала, если я могу!
Спасибо, Марк.