[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 45회차 미션

연산

Sass는 기본적인 연산 기능을 지원한다.

레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다.

산술연산자

• 더하기

• 빼기

• 곱하기 : 반드시 하나이상의 값이 숫자여야함

예를들어 10px * 10px 의 결과는 에러가 나오게된다. 단위가 붙어있는 숫자끼리 곱하는 것은 불가능하다. 따라서 단위가 붙어있는 숫자값에는 하나이상의 숫자 값을 *(애스터리스크)를 사용해서 곱할 수 있다.

/ 나누기 : 오른쪽 값이 반드시 숫자

마찬가지로 10px/2px 은 에러가 발생하고 만약 10px/2px의결과인 5px을 얻어 내고 싶다면 10px/2 를 통해 얻어야 한다.

% 나머지

비교 연산자

== : 동등

!= : 부등

< : 대소 / 보다 작은

: 대소 / 보다 큰

<= 대소 및 동등 / 보다 작거나 같은

= 대소 및 동등 / 보다 크거나 같은

a==b // a와 b가 같다
a!=b // a와 b는 같지 않다
a<b // a가 b보다 작다
a>b // a가 b보다 크다
a<=b // a가 b보다 작거나 같다
a>=b // a가 b보다 크거나 같다

결과적으로 비교한 값이 참이면 true, 거짓이면 false 가 나오는 것.

논리 연산자(Boolean)

and : 그리고

or : 또는

not : 부정

a>b and c>d // a가 b보다 크고 c가 d보다 커야한다. 
a>b or c>d // a가 b보다 크거나 c가 d보다 커야한다.
not true // false

상대적 단위 연산

일반적으로 절댓값을 나타내는 px단위로 연산을 하지만, 상대적 단위 (%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야한다.

width : 50% - 20px; // 단위 모순 에러
width : calc(50% - 20px); // 연산가능

calc는 Sass가 아니라 순수한 CSS 함수이고 이런 연산이 가능하다.

나누기 연산의 주의사항

CSS는 속상 값의 숫자를 분리하는 방법으로 / 를 허용하는데 때문에 /가 나누기 연산으로 사용되지 않을 수 있다.

예를 들어 font 속성에 font-size 다음에 line-height 값을 구분할 때 / 를 사용하는 경우가 있다.

SCSS:

div {
        width: 20px + 20px;
        height: 40px - 10px;
        font-size: 10px * 2;
        margin: 30px / 2;
}

Compiled to:

div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 30px / 2; /* ?? */
}

sass meister에서 실행시킨 SCSS 컴파일 결과이다.

SCSS코드 부분을 보면 width, height, font-size 는 +,-,* 연산이 잘 된 것을 볼 수 있다.

하지만 margin 은 연산이 되지 않고 / 를 구분기호로 출력이 되는 것을 볼 수 있다.

나누기 연산은 다음 과 같은 조건을 충족해야한다.

• 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
• 값이 ( ) 로 묶여있는 경우
• 값이 다른 산술 표현식의 일부로 사용되는 경우

SCSS:

div{
    $x : 100px;
    margin: $x / 2;
    height: (100px /2);
    font-size: 10px + 12px / 3;
}

Compiled to:

div {
  margin: 50px;
  height: 50px;
  font-size: 14px;
}

우리가 위에서 살펴본 예제에 따르면 margin 에서의 / 는 나누기 연산된 결과로 컴파일 되지 않았지만

변수에 담아서 사용한 이번 예제를 보면 잘 연산되는 것을 볼 수 있다.

그리고 height 의 100px / 2 의 경우에도 위의 예제에서는 나눠지지 않고 해당 결과를 그대로 컴파일 되엇지만 값이 ( ) 로 묶여잇는 경우에 해당 되므로 50px 이라는 결과가 나오게 된다.

마지막으로 font-size 의 10px + 12px / 3; 을 보면

더하기 연산과 같이 사용된 / 의 경우 나누기 연산 기능이 제대로 동작하여 연산된 결과 값이 나온다

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스