리액트)1주차 학습 - SASS(SCSS 싸스)

SASS(SCSS 싸스)란?

( Syntactically Awesome StyleSheets )

CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. SASS에는 Sass와 SCSS가 있다.
또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.

 

 

scss를 css로 변환하는 방법 2가지
1.  Live Sass 확장자
vscode에서 scss를 쓰기전 Extensions 에서 [ Live Sass ] 확장자를 먼저 설치한다. 
SCSS 파일을 자동으로 CSS 파일로 변환시켜준다.

2.  명령어
1). https://sass-lang.com/install/ 참고. 

&부

 

문법 6가지

 

한글 주석처리를 위해 @charset "UTF-8"; 을 넣어야 한다

1. 변수 $

2. 중첩 (Nesting 네스팅문법) 

3. & (부모 엘리먼트 참조)

4. extend  와 % 

5. @mixin - 인자전달

6. @use - 파일 끌어 쓰기

7. 연산자 --추후 추가할 예정

 

 

1. 변수  $

변수 : 변하는 수(숫자, 문자 등 모든 데이터 타입)
변수 선언 :  $ + "변수명" : "저장할 내용";
                    $myColor: lightblue;
변수 사용 : color: $myColor;

 

 

 

2.  중첩 (Nesting 네스팅문법) 

일반 css 에서 자손 스타일링할 땐 따로따로  스타일링을 한다.

body {
  padding: 0 auto;
}

body .nav {
  border: 1px solid black;
}
  
body .nav div {
  margin: 10px;
}

 

scss에서는 중첩을 활용해 아래처럼 코드양을 줄일 수 있다.

body {
  padding: 0 auto;
  .nav {
    border: 1px solid black;
    div {
      margin: 10px;
    }
  }
}

 

 

3.  & (부모 엘리먼트 참조)

:hover  같은 기능이나   .이름:nth-of-type(1)   같은 기능 쓸때

body {
  .box1 {
    border: 1px solid black;
    &.btn {
      background-color: blue;
    }
  }

  .box2 {
    background-color: orange;
    &:hover {
    background-color: darkorange;
    }
    &:nth-of-type(1) {
    color: gray;
    }
  }
}

 

body .box1 {
  border: 1px solid black;
}
body .box1.btn {
  background-color: blue;
}
body .box2 {
  background-color: orange;
}
body .box2:hover {
  background-color: darkorange;
}
body .box2:nth-of-type(1) {
  color: gray;
}

 

이름 반복적으로 쓸때도 상위 선택자로 치환되는 원리를 이용해  &를 아래 처럼 사용할 수 있다. 

--------- scss --------
.nav {
    &Padding-B { padding-bottom: 10px; } 
    &Padding-L { padding-left: 20px; }
    &Padding-R { padding-right: 30px; }
}

-------- css ---------
.navPadding-B {
  padding-bottom: 10px;
}
.navPadding-L {
  padding-left: 20px;
}
.navPadding-R {
  padding-right: 30px;
}

 

 

 

 

4.  extend  와 %  

extend : css 스타일 확장

% : scss에서만 쓰이는 임스 클래스

 

↓ ↓ ↓ 사용방법 ↓ ↓ ↓

1). 공통으로 쓰일 코드를 작성후 이름앞에 %를 붙인다.

2). @extend %이름;

      "추가할 내용"

 

5. @mixin - 인자전달

공통으로 쓰일 코드를 작성후 변경되는 값만 인자로 전달한다.

1). @mixin 이름($인자1, $인자2) 를 붙이고 공통으로 쓰일 코드를 작성한다 .

2). 변경되는 값 작성

     @include 이름(인자1, 인자2)

 

! 주의 !  

순서를 반드시 지켜야 하고 만약 "인자2" 만 작성하고 싶다면  @include 이름(인자2 = 인자 값)

 

인자를 적지 않으면 오류. 디폴트 값을 작성할 수 있음 @include 이름(인자1 : 디폴트값, 인자2 : 디폴트값)

편의를 위해 한글로 적었지만 기본적으로 영어로 적어야 오류 일어날 확률이 적어진다

 

 

6. @use - 파일 끌어 쓰기

다른 scss파일을 끌어다 쓸때 사용.

1). @use "파일이름";  혹은 @use "파일이름" as 별칭;

2). @use "test" as c;

       .box { 

           color: c.$다른파일변수이름;

        }

 

 

7. 연산자  --추후 추가할 예정

연산자는 주로 + - * /  사칙연산을 쓰는데 /- 나누기는 이미 사용하는 기호라서 +, - 같이 써야 오류가 덜난다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 

sass 공식문서 - https://sass-lang.com/

생활코딩 - https://opentutorials.org/module/237/2488

나무위키 - https://namu.wiki/w/Sass