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

Question

[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 , кстати, все отображается, например в скобках медиазапроса. Как правильно прописать перменные не знаю.

Comments

[Сергей delphinpro]

Для выделения кода есть спец теги. Не нужно использовать для этого болд.
Примите правку вопроса, чтобы код был читабельным.

[Flying]

С учётом того, что синтаксис Sass основан на отступах - вам стоит доработать форматирование примеров кода, используя соответствующую кнопку на toolbar'е редактора.

[lorentso]

Flying, дело точно не в отступах, я проверял.

[lorentso]

если же я добавляю не фигурные скобки, а фигурные решеткой --#{} , то компилятор почему-торугается на другую строчку в коде, более нижнюю, не на else if, а на уже на else

вот пример

26|  else if type==2
   27|          {property}: startSize
   28|          @media(min-width:  $maxWidthContainer px)
   29|                  {property}: calc(#{minSize} + addSize * ((100vw - 320px) / ($maxWidth- 320)))
   30|  else
--------^
   31|          {property}: calc(minSize  + addSize * ((100vw - 320px) / ($maxWidth- 320)))

[Aetae]

Мож и не надо это делать вообще?) Стилус давно мёртв.

Answer 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)

Comments

[LastT]

Привет, можешь сказать как ето все в scss правильно записать? просто пробую @include adaptive-value("padding", 60, 40) и нифига не адптирует

Answer 2

[Сергей delphinpro]

Вообще для интерполяции в стайлусе используются фигурные скобки
https://stylus-lang.com/docs/interpolation.html

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

Comments

[lorentso]

C:/Users/Skwo/Documents/WEB/funiture/src/stylus/base.styl:26:2
   22|  if type==1
   23|          {property}: startSize
   24|          @media(max-width: $maxWidthContainer px)
   25|                  {property}: calc({minSize} + addSize * ((100vw - 320px) / ($maxWidthContainer - 320)))
   26|  else if type==2
--------^
   27|          {property}: startSize
   28|          @media(min-width:  $maxWidthContainer px)
   29|                  {property}: calc(minSize + addSize * ((100vw - 320px) / ($maxWidth- 320)))

expected ":", got "}"

Это я обернул переменную фигурной скобкой (на 25 строке -- {minSize}

[Сергей delphinpro]

lorentso, я сто лет уже стайлус не брал.
Пишут, что он не умеет интерполировать переменные
https://stackoverflow.com/questions/30280128/stylu...