SCSS / SASS로 백분율 계산

121

계산을 통해 scss에서 너비를 백분율로 설정하고 싶지만 오류가 발생합니다 ..

"...- width : (4/12) %"뒤에 잘못된 CSS : 예상 표현식 (예 : 1px, 굵게), was ";"

나는 다음과 같은 것을하고 싶다.

$my_width: (4/12)%;

div{
width: $my_width;
}

거기에 % 기호를 어떻게 추가합니까?

px와 em과 같은 질문

css sass

— 닉 지난 토
소스

바이올린 할 것이 없습니다. 계산에 숫자 단위를 더하고 싶습니다. (400/20) px와 동일합니다. scss에 숫자와 px / em / %를 어떻게 지정합니까? 이렇게하면 "전역 변수"를 가질 수 있습니다. 한 번 변경할 수 있습니다.

— Nick Ginanto

$ my_width : ((4/12) %);와 같은 대괄호를 추가하십시오.

— Sri

죄송합니다. 확인한 후 한 번 더 시도해 볼 기회가 없었습니다. {$ my_width : (4/12) %;}

— Sri

답변:

211

백분율 기능 을 사용해 보셨습니까 ?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— 토마스
소스

px와 em에 비슷한 기능이 있습니까?

— Nick Ginanto 2012

확실하지는 않지만 문서의 소스 섹션에서 기본 논리를 볼 수 있습니다. Sass :: Script :: Number.new (value.value * 100, [ '%']), 그렇지 않은 경우 나는 생각할 것입니다. 이 작업을 직접 수행하거나 직접 래퍼 함수를 만들 수 있습니다.

— Tomas

PX에 대한 @NickGinanto 당신은 추가 할 수 있습니다 +px예를 들어 라인의 끝width: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat 아니요, 어떤 상황에서도 그렇게 해서는 안됩니다 . 단위 추가는 곱셈 (예 :)을 통해 이루어져야하며 $foo + $bar * 1px, 이와 같이 단위를 연결하면 문자열 만 제공됩니다.

— cimmanon

@cimmanon이 최근에 변경 되었습니까? 내 댓글을 올렸을 때가 아니었다 고 확신합니다.

— DisgruntledGoat 2015 년

또 다른 방법:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass는 값을 %로 출력합니다.

— rlejnieks
소스

이 작업을 수행하려면 100/6 * 1 %를 사용해야했습니다. 그렇지 않으면 1666.67 %로 끝났습니다.

— sp00n

* 100 %가 실제로 수행하는 작업은 어디에서 찾을 수 있습니까?

— Ini

이 방식으로 작동하도록 만들 수있었습니다.

div{
   width: (4/12)* 1%;
   }

이렇게하면 특별한 기능을 사용할 필요가 없습니다.

— 엔리케 쿠 체티
소스