SCSS 산술 연산

SCSS에서는 산술연산을 사용할수 있다.

 

하지만 /를 사용하는 나누기는 사용이 불가능하다

 

span{
    font-size:10px;
    line-height:10px;
    font-family:serif;
    font:10px / 10px serif;
}

위처럼 css에서는 font라는 단축속성을 사용하는데 이때 분리해주기 위해 /를 사용하기 때문에 

위 사진처럼 작성했을때 그냥 글처럼 나오게 된다.

 

그럼 나누기 ( / )를 해야 할때는 어떻게 해야 할까?

 

그럴땐

1. 괄호를 쳐주는 방법 

 margin: (30px / 2);

2. 변수를 사용하는 방법

$size:30px
margin: $size / 2;

 

3. 다른 산술연산을 함께 사용하기

font-size: 10px + 20px / 2;

세가지 방법이 있다

 

 

주의할점!

산술하는 단위는 동일해야 한다. 

ex) width:100%-200px : 불가하다

 

하지만 calc( ) 함수에 넣어서 사용하는것은 가능함