SCSS: SCSS Ep.3

20 Dec 2022 • TIL

중첩된 속성

  • 반복적으로 사용하는 특정한 이름들을 중첩된 속성이라는 개념을 통해서 간편하게 작성할 수 있다.
  • 원하는 중첩되는 속성을 작성하고 뒤에 “:”콜론 기호를 작성한 뒤 중괄호를 여,닫아 해당 괄호 안에 원하는 뒷 속성을 작성해주면 된다. 그리고 중괄호가 끝나는 부분에 세미콜론 “;” 을 작성해 줘야 한다.
  • 주의 할점! 중첩 속성 뒤 콜론”:”, 중괄호 끝나는 부분에 세미 콜론”;”

  • 중첩되는 부분 (font, margin 부분 등)을 우리는 네임스페이스라고 부른다.
    네임스페이스는 이름을 통해 구분 가능한 범위를 만들어내는 것으로, 유효범위를 지정하는 방법을 말한다.

  • 중첩된 속성을 작성한 코드

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

  • 변환된 css 코드

    .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;
}

변수

.container {
  position: fixed;
  top: 100px;
  .item {
    width: 100px;
    height: 100px;
    transform: translateX(100px);
  }
}

.container {
  position: fixed;
  top: 100px;
}
.container .item {
  width: 100px;
  height: 100px;
  transform: translateX(100px);
}
  • 100px이 동일하게 사용되고 있다.
  • 이때, 100px이 모두 동일하게 적용되어야 할 때, 한 쪽에서 100px을 200px로 변경한다면, 다른 부분의 100px들도 하나하나 변경해줘야 한다.

  • 이런 번거로움을 줄이기 위해서 변수를 사용한다.
    동일한 수치를 사용해야 하는 부분에 변수를 넣어줌으로, 변수를 지정한 부분의 수치만 변경하면 모든 부분의 수치가 한 번에 변경이 된다.

    $size: 100px;
  
.container {
  position: fixed;
  top: $size;
  .item {
    width: $size;
    height: $size;
    transform: translateX($size);
  }
}

  • SCSS에서의 변수

    자주 사용하는 수치라던가 프로젝트의 메인 색상 등을 변수로 만들어서 반복적으로 사용할 때 유용하게 쓸수 있다.

  • 변수 사용 주의사항

    변수는 선언된 범위내에서 유효범위를 가진다.

    변수를 container 윗 부분에서 선언하게 되면(해당 파일 최상단) 변수가 선언된 파일 어디에서나 사용 가능한 전역변수가 된다.

    변수를 container 내부에 postion 위에 작성하게 되면, 해당 변수는 선언된 중괄호 안에서만 사용이 가능한 변수가 된다.

  • 중복된 변수

    container 내부에는 size는 100px, item 내부의 size는 200px로 변수를 선언했다.

    .container {
  $size: 100px;
  position: fixed;
  top: $size;
  .item {
    $size: 200px;
    width: $size;
    height: $size;
    transform: translateX($size);
  }
}

    • css 변환 결과

      .container {
  position: fixed;
  top: 100px;
}
.container .item {
  width: 200px;
  height: 200px;
  transform: translateX(100px);
}

      container에는 100px, item에는 200px이 들어간 것을 볼 수 있다.

      scss의 변수도 재할당이 가능하다는 것을 알수 있다.

    • 재할당 주의 사항

      자바스크립트처럼 해당 변수가 재할당 되면, 재할당된 변수 아래의 코드는 재할당 된 값으로 들어간다.

      item에서 size를 200px로 재할당 했는데, item 하단에 size를 사용하면 container의 100px이 아닌, 200px로 수치가 입력된다. 해당 left는 container에 포함되는 것임에도 불구하고!

      즉, 중괄호 사이의 범위로 적용되는 것이 아니고 단순히 순서(?)로 적용되는 것이기 때문에 주의가 필요하다.

      .container {
  $size: 100px;
  position: fixed;
  top: $size;
  .item {
    $size: 200px;
    width: $size;
    height: $size;
    transform: translateX($size);
  }
  left: $size;
}

      .container {
  position: fixed;
  top: 100px;
  left: 200px
}
.container .item {
  width: 200px;
  height: 200px;
  transform: translateX(100px);
}

산술 연산

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

div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 30px/2; /* 연산이 되지 않은 것*/
  padding: 6px;
}

  • 나누기 기호”/”사용 불가한 이유

    font 단축 속성으로 인해 해당 기호를 나누기로 사용이 불가능하다. font 단축 속성은 위쪽의 내용을 단축해서 사용할 수 있게 한다.
    슬래쉬 ”/”를 통해서 앞은 size, 뒤는 line-height를 구분해서 나타낸다.
    추가로 font 단축속성은 뒤에 font-famaily까지 작성을 해줘야 한다. 그닥 유용하지는 않다.

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

    해당 font 단축속성은 css의 기능으로, scss에서도 슬래쉬 기호는 font 단축 속성에서 나누는 용도로 사용하기 때문에! 연산 나누기로 사용이 불가능 하게 된다.

  • 나누기 기호 사용 방법

    • 소괄호로 열고 닫아주기

      div {
  margin: (30px / 2);
}

      div {
  margin: 15px;
}

    • 변수에 값 넣어주기

      변수에 값을 넣어서 연산을 할 때 해당 변수를 넣어서 하게 되면, scss로 연산을 하겠다는 의미를 분명하게 가지기 때문에 나누기 기호를 그냥 사용해도 연산이 된다.

      div {
  $size: 30px;
  margin: $size / 2;
}

    • 다른 연산자 같이 사용하기

      div {
  margin: (10px + 20px) / 2;
}

  • 같은 단위끼리만 연산 가능

    아래와 같이 서로 다른 단위끼리는 연산이 불가능하다.

    div {
  width: 100% - 200px;	
}

  • calc() 함수를 통해 다른 단위 연산하기

    단위가 다른 값을 연산할때 calc 함수를 사용하면 연산이 가능하다.

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

    물론, css로 변환했을 때에도 어떤 정리된 값으로 출력이 되는 것은 아니다.
    해당 내용 자체가 화면에 출력이 가능하게 되는 것이다.

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

    해당 코드가 화면에 구현이 된다면, 꽉찬 너비에 200px이 빠진 형태가 된다.

 TIL  SCSS

Comments

Related Posts