@lorentso

Какой синтаксис переменных правильный?

Пытаюсь переписать миксин с SASS на STYLUS .

вот оригинал на SASS

@mixin adaptive-value($property, $startSize, $minSize, $type){
	$addSize: $startSize - $minSize;
	@if $type== 1 {
			#{$property}: $startSize + px;
			@media(max-width: #{$maxWidthContainer + px}) {
					#{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidthContainer - 320}));
}
}
	@else if $type== 2{
		#{$property}: $startSize + px;
		@media(min-width: #{$maxWidthContainer + px}) {
			#{$property}: calc(#{$minSize + px } + #{$addSize} * ((100vw - 320px) / #{$maxWidth- 320}));
			}
			
		}
	@else {
		#{$property}: calc(#{minSize + px } + #{$addSize} * ((100vw - 320px) / #{$maxWidth- 320} ));
		}
}


///////////////////////////

У меня получается следующее

adaptive-value(property, startSize, minSize, type )
	addSize = startSize - minSize	
	if type==1
		{property}: startSize 
		@media(max-width: $maxWidthContainer px)
			{property}: calc(var(minSize) + addSize * ((100vw - 320px) / ($maxWidthContainer - 320)))
	else if type==2
		{property}: startSize
		@media(min-width:  $maxWidthContainer px)
			{property}: calc(minSize + addSize * ((100vw - 320px) / ($maxWidth- 320)))
	else
		{property}: calc(minSize  + addSize * ((100vw - 320px) / ($maxWidth- 320)))


Проблема в том, что все переменные ниже медиазапроса, то есть те, что идут в скобках как аргументы CALC никак не прочитываются.
Я пробовал их оборачивать и таким образом -- {} , и таким -- #{} , и таким ${}, и в кавычках , и в обратных кавычках -- `${} `, но компилятор ругатется, и вообщем, до переменных никак не достучаться. До функции CALC , кстати, все отображается, например в скобках медиазапроса. Как правильно прописать перменные не знаю.
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
@lorentso Автор вопроса
Стоило переформулировать вопрос -- и ответ нашелся. Проблема не в интерполяции вообще, а использовании переменной внутри функции calc.

Тут необходимо применить такой синтаксис
-- саму функцию calc взять в кавычки как строку, а вместо переменных подставлять знак %s, с последующей расшифровкой в скобках.

миксин работает. уже проверил

выглядит так

adaptive-value(property, startSize, minSize, type)
	addSize= startSize - minSize;
	if type== 1
		{property}: startSize px;	
		@media(max-width: $maxWidthContainer  px)
			{property}: "calc(%spx +  %s * ((100vw - 320px) / (%s - 320)))" % (minSize addSize $maxWidthContainer)

	else if type== 2
		{property}: startSize px;
		@media(min-width: $maxWidthContainer  px)
			{property}: "calc(%spx +  %s * ((100vw - 320px) / (%s - 320)))" % (minSize addSize $maxWidth)

	else
		{property}: "calc(%spx +  %s * ((100vw - 320px) / (%s - 320)))" % (minSize addSize $maxWidth)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Вообще для интерполяции в стайлусе используются фигурные скобки
https://stylus-lang.com/docs/interpolation.html

Как именно ругается ваш компилятор?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы