[SCSS] - 09. 연산자

연산자

👊 예제

<div class="frame">
        <h1>Coding Works</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quis cum quo vero totam, culpa, modi ipsa
            voluptate nobis, iusto et ea quam nostrum ducimus at molestiae! Omnis, ipsum officiis.
        </p>
    </div>

/* Operations */
$fs: 15px;
$box-margin: 50px;

• 해당 변수를 선언한다.

.frame {
    h1 {
        font-size: $fs * 3;
    }
}

• font-size를 선언한 변수에 3배를 하여 출력하고 싶다면 산술연산자 *를 사용하여 출력한다.
• +, - ,*는 그냥 저 위처럼 사용하면되지만 /(나누기)는 다르다

.frame {
    border: 1px solid #000;
    // 뒤에는 px없애야 css에 px이 들어감.
    // 나눌때에는 괄호 쳐야함.
    padding: (50px / 10);
    margin: $box-margin / 2;
}

• (50px / 10px) 이렇게 써버리면 css로 컴파일 될때 padding : 5 이런식으로 컴파일 된다 그래서 뒤에 10px은 10으로 써줘야한다.
• 그리고 괄호를 치지않으면 css로 컴파일 될 때 padding : 50px/10px 이렇게 컴파일 되어 화면에 padding값이 제대로 출력되지않는다.

➕ 추가