[SCSS] SCSS 공부 정리(2)

중첩된 속성 ✍🏻

네임스페이스인 선택자들을 중첩시켜 더 편리하게 사용 할 수 있다.

주의❗❗
선택자 처럼 사용을 하되, 뒷부분에 :(콜론기호)를 붙여주고, {}(중괄호)가 끝나는 지점에 ;(세미콜론)을 붙여줘야 한다.

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  };

그리고 위의 코드를 compiled 된 css file로 확인하면 아래의 코드이다.

.box{
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 30px;
}

연산자 ✍🏻

SCSS의 연산자는 다른 언어의 연산과 동일하지만,
/(나누기)연산자를 쓰면 적용되지 않는다.
그 이유는 font는 단축 속성을 아래의 코드처럼 사용할 수 있다.

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

font 단축 속성은 size, line-height, font-family까지 속성을 부여 해 줘야지 사용이 가능해서 잘 사용하지 않는다.

나누기 연산자 사용 방법 ❗❗

// 1. 중괄호를 사용한다.
margin: (30px / 2);

// 2. 변수사용.
$size: 30px;
margin: $size / 2;

// 3. 다른 연산자와 같이 사용한다.
margin: 10px + 12px / 2;

다른 단위의 연산 ❗❗

아래와 같은 단위가 다른 값은 연산을 할 수 없다...
그러면 어떻게 해야 할까 🤷🏻‍♂️

div {
  width: 100% - 200px;
}

calc() 함수를 사용하면 된다!!

div {
  width: calc(100% - 200px);
}