SCSS & SASS

CSS 전처리 프로세서

• CSS에 아직 없는 기능을 지원하기 위해 사용하는 프로세서이다.

SASS 사용하기

1. 설치

1. VS의 콘솔에 npm add -D sass를 입력하여 SASS를 설치한다.
2. style.css를 style.scss로 수정한다.
3. 브라우저는 scss를 알아듣지 못하기 때문에 Vite 를 사용해야 한다.

2. SCSS 변수 사용하기

1. SCSS 변수는 이렇게 사용한다. : $bgColor : red

2. CSS 변수는 이렇게 사용한다. : --bgColor : red

   • 브라우저가 지원해주기 때문에 Vite, SASS 가 필요하진 않다.

3. 터미널을 열어 npm run dev를 통해 개발 화면을 볼 수 있고, 배포 시에는 실행 종료 후 npm run build를 사용하면 된다.

   • Vite가 dist 폴더를 생성하고, scss 파일은 css파일로 변환된다.

SCSS의 기능들

1. Nesting

• Nesting이란 코드를 짧게 만들 수 있는 css 코드 편집 방식이다. CSS에선 지원이 되지 않으나, SCSS에선 활용할 수 있다.

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 10px;
  li {
    background-color: tomato;
    color: white;
    padding: 5px 10px;
    border-radius: 7px;
    &:hover {
      opacity: 0.8;
      a {
        color: gray;
      }
    }

1. Tab 을 통해 계층이 있는 css를 합칠 수 있다.
2. 반복되는 코드가 있을 경우, 같은 요소 (예: li)를 가리키고 있다는 것은 &를 통해 표현할 수 있다.
   • 예) li : hover{} -> &:hover{}

2. @extend

• @extend 를 통해 같은 스타일을 여러 항목에서 사용할 수 있다.

1. % 뒤에 공통 코드를 작성한다.

%alert {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px dashed black;
}

2. 같은 규칙을 적용하고 싶은 css 항목에 @extend %공통코드를 작성해 넣는다.

.success {
  @extend %alert;
  background-color: green;
}

3. mixins

• mixin은 extend를 넘어서 css에서 JS 같은 함수를 사용할 수 있게 해준다.

1. @mixin 뒤에 함수 형태의 코드를 만든다.

@mixin alert($bgColor, $borderColor) {
// 변수는 '$변수'로 표현하고 ','로 구분한다.
  
  background-color: $bgColor;
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px dashed black;
  border: 1px dashed $borderColor;
}

2. @extend대신 @include를 사용하고, 원하는 변수를 전달한다.

.success {
  @include alert(green, blue);
}

4. responsive mixins

• mixin에 변수 값을 전달하는 것 말고 더 많은 정보를 전달할 수는 없을까?

1. @include를 포함한 행에 추가 코드를 작성한다.

.success {
  @include alert(green, blue);{
  color : green;
  }

2. 이를 받는 @mixin 개체에는 @content;를 추가해준다.

3. 이걸 통해 다양한 반응형 디자인을 만들어보자.
   우선 화면 크기 변수를 지정해준다.

$breakpoint-sm: 480px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1200px;

4. 각 화면별 @mixin을 만들고, 화면 크기를 감지할 수 있는 @media query를 만든다. 이때, @content;를 넣는 걸 잊지 말자.

@mixin smallDevice {
  @media screen and (min-width: $breakpoint-sm) {
    @content;
  }
}

5. 각 mixin 마다 @include 값을 지정해주면 완성 ~

  @include smallDevice {
    background-color: blue;
  }

---

이제 다음 코스부터 예쁜 디자인들을 따라서 만들어 볼 예정이다. 기대된다 ~