#css #visual-studio-2013 #sass #web-essentials
#css #visual-studio-2013 #sass #web-essentials
Вопрос:
Я использую Visual Studio 2013 Express для веб-обновления 2 с обновлением Web Essentials 2 для записи файла SASS (SCSS Synthax). Скомпилированный файл CSS содержит имена переменных вместо значений. Следующий код
$height: 200px;
#contentDiv {
height: calc(100% - $height);
}
создает этот CSS
#contentDiv {
height: calc(100% - $height); }
Итак, что я делаю не так? Я создал простой веб-проект, установил Web Essentials, добавил файл SASS и начал писать код (новый для SASS).
Ответ №1:
Вы не можете вычесть пиксели из процента, используя calculate функцию Sass, потому что они несовместимые типы.
Если вы хотите использовать функцию вычисления CSS, вы можете сделать это:
$something: 100px;
#contentDiv {
height: calc(100% - #{$something});
}
Который компилируется в:
#contentDiv {
height: calc(100% - 100px);
}
Комментарии:
1. но это из w3.org :
width: calc(100%/3 - 2*1em - 2*1px);итак, я подумал, что «все» возможно? И это из developers.mozilla.org документы:width: calc(100% - 80px);2. Спасибо, теперь это работает. Но я не уверен, почему я должен был добавить
#{}. Это не было видно из руководства по Sass.3. По сути, это заставляет Sass обрабатывать содержимое как SassScript, а не как CSS, потому что это то, чего он ожидал (в пределах a
calc()) . Дополнительную информацию см. в разделе Интерполяция в справочном документе sass-lang.com/documentation /…
Ответ №2:
Я использую http://sassmeister.com чтобы проверить вашу компиляцию.
По-видимому, ошибка связана с функцией calc
$something: 100px;
#contentDiv {
heigth: calc(100% - $something); //doesn't work
heigth: calculate(100% - $something); //work with errors
height: $something;//work
}