CSS를 보다 덜 복잡하게, 반복을 피하고 유지보수도 용이하게 해주는 CSS 전처리기들이 등장했다!

⛰ CSS preprocessor / CSS 전처리기

🌳Sass? SCSS?

Sass (Syntactically Awesome Style Sheets) 문법적으로 짱 멋진 스타일 시트
SCSS (Sassy CSS) 존멋 CSS

Sass 의 불편함

• sass 규칙 중첩을 나타내기 위해 중괄호 {}가 아니라 들여쓰기로 대신함.
• 속성을 구분하기 위해 세미콜론 ; 대신 줄 바꿈을 사용함.
  보완하여 SCSS 가 나왔다.

🌸왜 SCSS를 쓸까?

1. 공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 기재됨.
2. 더 많은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법으로 활용됨.
3. CSS 호환성: Sass는 CSS와 호환되지 않는 부분이 있는 반면, SCSS는 전부 호환 가능.
4. 여러 줄 쓰기 지원: Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에 여러 줄 쓰기를 지원하지 않음.

/*css*/
.container h1 {
  color: royalblue;
  background-color: orange;
  font-size: 60px;
}

/*scss*/
.container {
  h1 {
    color: royalblue;
    background-color: orange;
    font-size: 60px;
  }
}

이미지 출처

SCSS 자체로 브라우저에 적용하는 것이 아니라, CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문에, 컴파일을 해서 일반 CSS의 문법으로 바꾸어 적용해야 한다.

🌸컴파일은 어떻게 할까?

🌱Parcel

1. 우선 Parcel를 전역으로 설치

$ npm install -g parcel-bundler

2.프로젝트에 Sass 컴파일러(node-sass)를 설치

$ npm install --save-dev node-sass

3. HTML에 로 Sass 파일만 연결

<link rel="stylesheet" href="scss/main.scss">

https://www.sassmeister.com/ 사이트에서 간단한 변환도 가능하다.

🌳문법

🌸주석

CSS 표준 블록 주석 /* */을 지원하며, // 로 시작하는 인라인 주석도 함께 지원.

• /* : 컴파일을 하더라도 나타남. 변환된 후에도 남기려면 사용
• // : 출력 옵션에 상관없이 모두 CSS 출력물에서 삭제. 그러므로 최종 CSS 출력물에는 없어도 되는 개발용 내용 등을 자유롭게 작성할 수 있다.

🌸중첩(Nesting)

SASS는 중첩기능을 사용할 수 있다.
상위 선택자의 반복을 피할수 있어 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

🌱상위(부모) 선택자 참조

.btn{
    position:absolute;
    &.active{
        color:red;
    }
}

//& 기호가 상위 선택자를 참조한다.
//상위 선택자가 & 기호로 치환된다.

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

.fs {
    &-small { font-size : 12px; }
    &-medium { font-size : 14px; }
    &-large { font-size : 16px; }
}

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

📌 &은 '문자'를 치환하기 때문에 클래스명을 쪼개어 쓰는 것이 가능하다.
btn, btnSmall, btnMedium 이라는 클래스명을 가지는 변수들이 있다면
공통 속성은 btn으로 중괄호 안에 바로 나열하고,
개별 속성은 해당 네스팅 내에 &Small, &Medium로 또 중첩하여 사용할 수 있다.

.btn {
    width: 200px;
    height: 60px;
    border-radius: 30px;
    
    &Small {			// .btnSmall
      background-color: blue;
    }
    
    &Medium {			// .Medium
      background-color: red;
    }
}

🌱중첩된 속성

선택자 처럼 사용하되 뒤에 콜론을 붙여준다.
중괄호가 끝나는 부분에도 명령이 끝났다는 세미콜론을 붙여줘야 함

font- weight, family, size.. 를 네임 스페이스가 동일하다 라고 한다.
네임스페이스란 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말함.

//scss
.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 {
	$size : 200px;
    position: fixed;
    top:100px;
    .item{
    	//재할당 가능
    	$size : 100px;
        width:$size;
        height:$size;
        transform: translateX($size);
    }
    //container 안에서 $size가 200px로 할당되었더라도 
    //마지막으로 할당된 .item 아래에 위치하기 때문에 left 의 값은 100px이 된다.
    left: $size;
}

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

🌸산술 연산

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

단축 속성을 사용할때 / 기호를 사용하기 때문에, 위 코드의 나누기 연산자는 제대로 작동하지 않는다.
1. 연산을 하는 코드를 소괄호로 묶어준다.
2. 변수를 만들어서 값을 할당하고 변수에 나누기를 한다.
3. 다른 연산자와 함께 사용한다.

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

calc() 를 사용하면 단위가 달라도 계산이 가능하다.

🌸재활용 (mixins)

변수와 유사하나 한꺼번에 여러가지의 코드를 담을 수 있다.
재활용 할 때 @mixin의 키워드를 @include 로 가져와서 사용.

@mixin center {
    display : flex;
    justify-content : center;
    align-items : center;
}
.container {
    @include center;
    .item {
        @include center;
    }
}



.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

인수를 제공, 매개변수가 받아서 내부에서 처리
함수명 뒤에 소괄호를 붙여서 사용한다.

@mixin box($size) {
    width: $size;
    height: $size;
    background-color: tomato;
}

.container {
    @include box(200px);
    .item{
        @include box(100px);
    }
}

기본값은 아래와 같이 넣어준다. 그래서 따로 사이즈를 안정해줄 때는 기본값이 들어가게 됨

@mixin box ($size :80px) {
    width: $size;
    height: $size;
    background-color: tomato;
}

.container {
    @include box(200px);
    .item{
        @include box;
    }
}

.container {
  width: 200px;
  height: 200px;
  background-color: tomato;
}
.container .item {
  width: 80px;
  height: 80px;
  background-color: tomato;
}

키워드 인수
인수를 사용할때 매개변수의 이름을 지정해서 넣어주는 것
이 때 인수의 순서와 상관 없이 해당 매개변수로 값이 들어가게 된다.

🌸반복문

1. zero base 가 아님. 1부터 시작
2. 보간할 때에는 자바스크립트와 달리 #{$i} 로 표현한다.

@for $i from 1 through 3 {
    .box:nth-child(#{$i}) {
        width: 100px * $i;
    }
}

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

.box:nth-child(3) {
  width: 300px;
}

🌸함수

계산을 해서 값을 반환하는 역할
역시 재활용 가능

//css스타일을 다룸
@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}
//값을 어떻게 다루는가에 초점을 맞춤
@function ratio ($size, $ratio){
    @return $size * $ratio
}

.box {
    $width: 100px;
    width: $width;
    height: ratio($width, 1/2);
    @include center;
}

.box {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

🌸색상 내장 함수

내장되어 있어 별도의 선언이 필요 없다.

1. mix(컬러1, 컬러2)
   컬러 1, 2의 색을 섞음

2. lighten / darken (컬러, nn%)
   nn% 밝거나 어둡게 만듬
   :hover 에 많이 사용

3. saturate(컬러, nn%)

4. desaturate(컬러, nn%)

5. grayscale(컬러)
   회색으로 만들어줌

6. invert(컬러)
   반전시킴

7. rgba(컬러, 투명도)
   .5 와 같이 투명도를 나타냄
   css에서는 rgba(0, 0, 0, .5) 와 같이 나타내는 것을 더 쉽게 표현 가능.

🌸가져오기

@import url("./sub.scss");
@import "./sub";
@import "./sub", "./sub2";

🌸데이터 종류

$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: orange, royalblue, yellow; //자바스크립트의 배열과 비슷함.
$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);
//객체와 비슷함.

.box {
  width: 100px;
  color: red;
  position: relative;
}

🌸반복문 @each

//scss
$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: orange, royalblue, yellow; //자바스크립트의 배열과 비슷함.
$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);

@each $c in $list {
//list라는 변수에 있는 해당 데이터ㄹ들을 반복적으로 c라는 변수에 담아서 중괄호 안에서 처리하겠다.
    .box {
        color: $c;
    }
}


//css
.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

//scss
$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: orange, royalblue, yellow; //자바스크립트의 배열과 비슷하다.
$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);

@each $k, $v in $map {
//list라는 변수에 있는 해당 데이터들을 반복적으로 c라는 변수에 담아서 중괄호 안에서 처리하겠다.
    .box-#{$k} {
        color: $v;
    }
}


//css
.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

🌸재활용 @content

@mixin 을 제공할 때 중괄호 안에 @content를 넣어서 추가할 수 있다.

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content;
}

.container {
  width: 100px;
  height: 100px;
  @include left-top;
}

.box {
  width: 200px;
  height: 300px;
  @include left-top{
    bottom: 0;
    right: 0;
    margin: auto;
  }
}