Sass 사용법

🐶 Sass

• css를 만들어주는 언어로, Javascript처럼 특정 속성(ex. color, margin, width … )의 값(ex. #000, 3px, 420px … )을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 css를 만들어주는 언어이다.
  =css 전처리기

❗ 브라우저는 scss문법을 모르기 때문에 scss로 작성한 파일을 다시 css파일로 컴파일 해야함
(node-sass설치하면 알아서 컴파일 해줌)

---

🐻 설치 방법

1) node-sass 설치 (터미널에 입력)

npm install node-sass

2) css파일 이름을 .scss로 해줘야한다

3) sass파일 import 해주기

import './Detail.scss';

---

🐻 사용 방법

1) 변수에 데이터 저장해서 쓰기

💡 기본 예시

$메인칼라 : #ff0000;

.div {
  color: $메인칼라
}

• $변수명 : 변수에 넣을 값 으로 상단에 지정 후, 해당 변수명을 값으로 넣어서 활용

---

2) reset.css내용은 @import 파일경로로 지정해서 모든 다른 페이지에 가져다 쓰기

💡 기본 예시

// reset.scss 파일
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}

// Detail.scss 파일
@import './reset.scss';  /* @import로 다른 scss파일 연동하기 */

.container {
  background-color: blue;
}

• @import 파일경로 로 다른 scss파일 상단에 지정 하여 적용

---

3) nesting

💡 기본 예시

div.container {
  h4 {
    color: red;
  }
  p {
    backgrouond-color: blue;
    img {
      width: 100%;
    }
  }
}

• selector를 nesting 하여 다른 scss파일 상단에 지정 하여 적용

---

3) @extend를 활용하여 특정 코드 전체를 가져다 쓰기

💡 기본 예시

.my-alert {
    max-width: 500px;
    width: 100%;
    margin: auto;
    padding: 20px;
    background-color: #eeeeee;
    border-radius: 10px;
}
.my-alert2 {
    @extend .my-alert;
    background-color: #ffe591;   /* 바꾸고 싶은 속성만 아래에 표기해준다 */
}
.my-alert3 {
    @extend .my-alert;
    background-color: #blue;   /* 바꾸고 싶은 속성만 아래에 표기해준다 */
}

• 특정 selector에 @extend를 붙이면 하여 코드가 그대로 복사된다.
• 즉, 똑같은 모양의 alert창을 여러개 만들고 싶다면, 기본 .my-alert 태그에 스타일링을 준 뒤, .my-alert2 , .my-alert3 를 여러개 만들고 속성값을 그대로 복사하는 것이 아니라 @extend를 붙이고 .my-alert를 적용해주면, .my-alert의 코드가 그대로 옮겨진다

---

4) @mixin / @include를 활용하여 함수 가져다 쓰기

💡 기본 예시

@mixin 함수() {
    max-width: 500px;
    width: 100%;
    margin: auto;
    padding: 20px;
    background-color: #eeeeee;
    border-radius: 10px;
}
.my-alert2 {
    @include 함수()
}

• @mixin으로 함수를 만들고 @include로 함수를 붙이면 함수 안의 코드가 그대로 복사된다.
• 즉, @mixin안에 css속성을 정의해 둔 뒤, 특정 selector안에 함수명으로 불러서 사용할 수 있다