[TIL] SCSS 문법 정리 🍎

일단 배우긴 배웠는데 SASS는 뭐고 SCSS는 뭐지? 하다가 해보는 정리! SASS는 CSS의 확장 문법이고(JavaScript로 치면 JSX 같은 개념), SCSS는 SASS의 유용한 기능들을 CSS문법과 최대한 비슷하게 쓸 수 있는 신문법... 이라고 이해하면 될 것 같당. 자유자재로 쓸 수 있을 때까지 열심히 공부해 놓자~~~

🍎 Nesting

• 셀렉터 네스팅

html의 parent-child 관계에 따라 스타일 속성들도 네스팅할 수 있다. 불필요한 클래스를 만들거나 선택자를 한 줄에 길게 써야 해야 하는 수고를 덜어줌!

가상선택자를 쓰기 위해서는 해당 선택자의 네스트 안에서 &을 쓰고 원하는 가상선택자를 붙여 주면 된다.

.form {
  color: gray;
  font-size: 14px;

  input {			//form의 자식 요소인 input
    margin: auto;
  }
    
  &:focus-within {		//form:focus-within
    border: 2px solid black;
  }
    
  :hover {			//form의 자식 요소들:hover
    background-color: lightblue;
  }
}

🍰 &의 유용성 🍰

&은 네스팅하고 있는 셀렉터를 치환하는데, '문자'를 치환하기 때문에 클래스명을 쪼개서 쓸 수도 있다. 예를 들어서 btn, btnBlue, btnRed라는 클래스명을 가지는 변수들이 있다면 공통 속성은 btn으로 네스팅한 중괄호 안에 바로 나열하고, 개별 속성은 해당 네스팅 내에 &Blue, &Red로 또 네스팅해서 추가할 수 있다는 뜻!

.btn {
    width: 200px;
    height: 60px;
    border-radius: 30px;
    
    &Blue {			// .btnBlue
      background-color: blue;
    }
    
    &Red {			// .btnRed
      background-color: red;
    }
}

• 속성 네스팅

  셀렉터뿐만 아니라 스타일 속성도 네스팅이 가능하다! margin, border, font등 하나로 묶을 수 있는 여러 스타일값들을 다음과 같이 네스팅하면 된다.

nav {
  margin: {
    top: 20px;
    left: 50px;
  }

  border: {
    color: darkslategray;
    radious: 50%;
    style: dashed;
  }
  
  font: {
    size: 12px;
    color: purple;
    faimily: 'Courier New', Courier, monospace; 
  }
}

🍊 $변수명: 속성값

자주 쓰이거나 의미 있는 속성값들을 원하는 이름으로 변수에 담아서 쓸 수 있다. 여기도 자바스크립트 변수처럼 global과 local의 개념이 적용되기 때문에 중괄호 밖에서 선언한 변수는 아무데서나 쓸 수 있고, 중괄호 안에서 선언한 변수는 해당 중괄호 내에서만 사용 가능!

//변수 선언
$mainColor : #ffffff			
$profileImg: "./images/profile.png"


//변수 사용
div {
  color: $mainColor;
  background-image: url($profileImg)
}

🍋 @import "파일경로"

다른 scs 파일의 스타일을 가져다 쓰고 싶을 때, 모듈처럼 임포트해서 쓸 수 있음! 보통 _reset.scss 등 범용적으로 쓰이는 스타일시트가 있는 경우 유용하다.

@import "reset.scss";

🍐 @extend 셀렉터

관련성 있는 태그들에 동일한 속성을 부여할 때 사용하면 반복을 피할 수 있다! 상위 태그의 속성들을 이식해 놓는 느낌...?

.box {
  width: 300px;
  height: 150px;
  margin: auto;
  padding: 20px;
}

.main {
  @extend .box;
  color: darkgray;
}

🍇 @mixin 이름($인자명: 디폴트값) & @include 이름(값)

처음에 extend와 mixin이 그게 그거 같아서 헷갈렸는데 mixin은 css로 컴파일했을 때 셀렉터들을 병합하지 않기 때문에 연관성이 떨어지는 태그들에 사용해도 덜 어색하고, 또 인자를 받아서 동적으로 사용할 수 있다. 중복되는 스타일들 가운데 몇 개의 값들만 바꿔서 적용시키고 싶을 때 유용!

//선언 시
@mixin colorBox($color, $fontsize: 12px) {
  width: 200px;
  background-color: $color;
  font-size: $fontsize;
}

//사용 시
.purpleBox {
  @inclued colorBoc(purple);
}

.greenBox {
  @inclued colorBoc(green, 24px);
}

그 외에도 반복문도 있고 머가 많았지만... 일단은 여기까지 열심히 적용해 보기~~~!