Расчеты с переменными в stylus

Я просматривал документы Stylus и смотрел примеры, но, похоже, я не могу заставить простые вычисления работать при использовании переменной. Например:

Работает

margin-right: (1200 / 2)px;

Не работает

$siteWidth = 1200;
margin-right: ($siteWidth / 2)px;

Я видел много примеров использования переменных внутри calc и использования% перед именем переменной или {..} вокруг переменной, но я пробовал оба, и ни один из них не работал. Я упустил здесь что-то очевидное?

Обновлять

Я не упомянул, что храню свои переменные в отдельном файле стилуса. Если я создаю переменную в том же файле, что и использую ее в расчетах, она работает нормально, однако, если я попытаюсь вызвать переменную, когда она импортируется из другого файла, это не сработает. Файл переменных - это ПЕРВАЯ вещь, которая включена в мой основной файл styles.styl, и я могу без проблем использовать переменные на всем сайте - только не при использовании его по какой-то причине при вычислении деления.

Codepen

вы используете разные переменные $siteWidth и $site-width. Прекрасно работает с правильным: stylus-lang.com/…

user4994625 11.04.2018 14:24

@blonfu Это была еще одна опечатка с моей стороны при вводе вопроса, который я исправил, но, пожалуйста, посмотрите пример кода, чтобы лучше воссоздать проблему.

wickywills 11.04.2018 14:29

@blonfu Также см. обновление, в котором упоминается, что переменная создается в отдельном файле. Я не могу точно воспроизвести это в Интернете, но я пытался в своем коде воссоздать ошибку как можно лучше. Пример, с которым вы связались, работает только в том случае, если переменная создана в том же файле, что и используется (или, по крайней мере, это то, что показали мои тесты)

wickywills 11.04.2018 14:32

В коде используется интерполяция SASS: #{$variable}. Интерполяция в Stylus - это {variable}, но в этом случае вам не нужно, измените последнюю строку на эту: margin-right: ($sitewidth / 2)px;

user4994625 11.04.2018 14:32

@blonfu См. мой второй комментарий. Я не могу заставить ваш синтаксис работать, когда переменная и использование находятся в разных файлах.

wickywills 11.04.2018 14:35

у меня тоже отлично работает в отдельных файлах: codepen.io/blonfu/project/editor/DnBEjx#

user4994625 11.04.2018 14:56

@blonfu Очень странно! Как только я пробую именно то, что вы сделали в моем проекте, я получаю cannot perform $sitewidth / 2. Я также не знал, что вы можете сделать это в Codepen (иметь структуру HTML), поэтому я попытаюсь воссоздать в нем упрощенную версию своего проекта позже и посмотрю, получу ли я тот же результат. Я дал ответ, который на данный момент действительно решает мою проблему, но он не идеален.

wickywills 11.04.2018 15:02

@blonfu См. codepen.io/wickywills/project/editor/XEjdpJ. Добавил третий файл стиля в ваш пример, чтобы ближе воссоздать мою настройку, и я получаю ту же ошибку, что и в моем локальном проекте.

wickywills 11.04.2018 15:07

извините, но я не могу воспроизвести вашу ошибку, у меня работает и ваш последний проект

user4994625 11.04.2018 16:37
0
9
704
2

Ответы 2

Обновлено:

Попробуйте это вместо скобок:

#{$site-width / 2}px;

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Извините, у меня была ошибка в моем вопросе (скопировать / вставить неправильную вещь из моего проекта!), И я должен был предоставить пример с использованием оператора деления. Минус работает нормально, но делить / нет. Не знаешь почему? Вопрос обновлен. Обратите внимание, что я пробовал все варианты наличия px в переменной, а также после скобок.

wickywills 11.04.2018 13:13

Можете ли вы сказать мне, как вы определили свою переменную? С пикселем или без? Добавьте, пожалуйста, к вопросу.

Sergio Tx 11.04.2018 13:23

Обновил вопрос, добавив немного дополнительной информации, которая может пролить свет.

wickywills 11.04.2018 13:29

Извините, но этот синтаксис просто вызывает ошибку expected "indent", got ";". Я собираюсь попробовать создать пример кода, так как я здесь действительно запутался.

wickywills 11.04.2018 13:43

Обновленный вопрос с кодом, который более или менее воссоздает то, что я пытаюсь сделать (но с переменной в другом файле)

wickywills 11.04.2018 13:50

Извините, не могу помочь. Я не знаю, почему он вызывает эту ошибку: S он работает здесь: sassmeister.com

Sergio Tx 11.04.2018 13:59

Нет проблем, спасибо за усилия. Мне действительно удалось решить эту проблему, хотя я бы предпочел, чтобы тот способ, которым я изначально пытался, например ваш метод, действительно работал, поскольку это гораздо более удобный синтаксис. Ну что ж!

wickywills 11.04.2018 14:18

Это было немного сложно, но я решил свою проблему, используя следующее:

margin-right: 'calc(-%s / 2)' % $sitewidth;

На самом деле я немного изменил свой код, чтобы включить новую переменную, чтобы получить половину ширины сайта, так как я могу использовать ее снова:

$halfsitewidth = $sitewidth / 2;
margin-right: '-%s' % $halfsitewidth;

Другие вопросы по теме