Sass란?

CSS pre-processor(css전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다.

CSS 전처리란 CSS가 동작하기 전, 즉 개발 단계에서 이 전처리 언어인 SCSS를 사용하고 실제 웹에서는 CSS로 변환해서 동작되는 것을 의미한다.

---

1. Sass 7-1 Architecture

sass 프로젝트를 구성하는 효과적인 모듈식 방법 중 하나가 7-1 패턴이며 이 7-1 패턴은 7개의 폴더와 1개의 파일로 이루어진 구조를 뜻한다.

7개의 폴더(abstracts(utills), vendeors, base, layout, components, pages, themes) 각각의 역할과 1개의 파일 main.scss로 구성

1.absctracts(utills)

프로젝트 전체에서 사용되는 모든 Sass 도구와 도우미를 담고 있다.

• _variables.scss
• _mixins.scss
• _functions.scss
• _placeholders.scss

2. vendors

프로젝트에서 사용하는 외부 라이브러리 및 프레임워크의 모든 CSS 파일을 담고 있다.

• _bootstrap.scss
• _jquery-ui.scss
• _select2.scss

3. base

사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당된다.

• _base.scss (HTML 요소 - html, body 등 디폴트)
• _reset.scss (브라우저 기본 CSS 초기화)
• _typography.scss (폰트)
• _animations.scss (@keyframes를 포함한 애니메이션)

4. layout

사이트 구조에 해당하는 레이아웃을 담고 있다.

• _grid.scss
• _header.scss
• _footer.scss
• _sidebar.scss
• _forms.scss
• _navigation.scss

5. components

layout보다 더 작은 구성 요소들을 담고 있다.
소형 레이아웃 같은 의미로 사이트 내에서 재사용 가능한 작은 부분들을 의미한다

• _buttons.scss
• _media.scss
• _carousel.scss
• _thumbnails.scss

6. pages

모든 페이지가 동일한 스타일을 사용하지는 않기 때문에, 페이지 고유의 스타일이 있는 경우 페이지 이름을 딴 파일을 만들어서 이 폴더에 넣어 사용한다.

• _home.scss
• _contact.scss
• _main.scss

7. themes

다양한 모드의 테마를 사용하는 경우, 각 모드에 따라서 각기 다른 스타일을 지정하여 담아두는 곳이다.

• _theme.scss
• _admin.scss

8. style.scss(폴더x 파일!!)

폴더별로 분류한 scss파일들을 파일들을 단 하나의 파일로 모아서 사용하는 곳이다.

---

2. Sass 세팅

✔️ 1. 먼저 Live Sass Compiler를 설치해주어야 한다.

✔️ 2. 설치 완료후 확장 설정창에서 fotmats의 settings.json을 열어 css파일 저장 경로를 설정해준다.

{
    "liveServer.settings.donotShowInfoMsg": true,
    "emmet.triggerExpansionOnTab": true,
    "liveSassCompile.settings.generateMap": false, //false로 수정 
    "liveSassCompile.settings.formats": [

        {
            "format": "expanded",
            "extensionName": ".css",// !!!파일명!!!
            "savePath": "~/../css/", // !!!저장경로!!!
            "savePathSegmentKeys": null,
            "savePathReplaceSegmentsWith": null,

        }
    ],
    "editor.formatOnSave": true,
    "git.enableSmartCommit": true,
}

• 해당 코드에서 "liveSassCompile.settings.generateMap": false와 "liveSassCompile.settings.formats": [~]이 필수로 필요하다.
  ㅤ
• "savePath": "~/../css/"+"extensionName": ".css", = css폴더로 가서 css파일이 되라!
  ㅤ
  💡 VScode에서 Live Sass Compiler 익스텐션 설치 후 저장 경로를 설치해야 ctrl+s 했을 때마다 내가 원하는 style.css파일에 저장이 된다.

✔️ 3. scss 파일들을 만들어 준다.

퍼블리셔의 범위에서는 이정도로 사용 가능할 것 같다.

💡모든 파일은 style.scss Import로 불러준다.

⭐ 저장하기 전엔 하단에 Watch Sass를 눌러주고 저장을 한다!(저장하면 초록색 글자로 success 나옴)

📍 html에서 css 불러오는거 잊지 말기!!!

---

3. 간단 사용법

• ~.scss

//중첩 기능 사용
.sc_scroll {
    .head_wrap {
        text-align: center;
        .cont_wrap {
            border: 0;
            li:not(.today) {
                margin-top: 7px;
            }
        }
    }
}
ㅤ
//css 결과
.sc_scroll .head_wrap {
  text-align: center;
}
.sc_scroll .head_wrap .cont_wrap {
  border: 0;
}
.sc_scroll .head_wrap .cont_wrap li:not(.today) {
  margin-top: 7px;
}

• _mixins.scss

//믹스인 정의(_mixins.scss)
@mixin postionVt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
@mixin postionHr{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
ㅤ
//믹스인 호출(scss)
.text_area {
    @include postionCt;
    width: 100%;
    margin-top: 0;
    text-align: center;
}

• _mixins.scss

//if문 활용한 단락의 말줄임 정의
@mixin ellipse($line:1){
    overflow: hidden;
    text-overflow: ellipsis;
    @if($line > 1){//2줄 이상 말줄임
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
    @else{//1줄 말줄임
       white-space: nowrap;
    }
}
ㅤ
//믹스인 호출(scss)
strong {
	display: block;
    @include ellipse(1);//1줄 말줄임
    font-size: 18px;
    font-weight: 700;
    color: #333;                    
}

• _variables.scss

 //변수 선언(_variables.scss)
 $base-color: #c6538c
ㅤ
//변수 호출(scss)
.alert {
  border: 1px solid $border-dark;
}

---

4. Nesting (중첩) 기능

SCSS에서는 중첩 (Nesting) 기능을 사용해 상위 선택자의 반복을 피하고 좀 더 편리하게 구조를 작성할 수 있다.

💡그러나 중첩을 너무 깊게 사용하지 말자! 보통 4중첩을 넘어가는 경우 그 이후 중첩부터 새롭게 선언하여 다시 스타일링하는 방식을 사용한다.

1. & (상위 선택자 참조)

부모 선택자를 참조 할때는 & 키워드를 사용
::after, ::before등 사용할때 유용

//scss &사용
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}
ㅤ
//css결과
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

&_클래스명-> 상위 선택자 클래스명을 앞에 사용할 수 있음

//scss &_
.login{
    &_list{
        display: block;
    }
    &_item{
        display: block;
        &_link{
            display: block;
        }
    }
}
ㅤ
//css결과
.login_list {
  display: block;
}
.login_item {
  display: block;
}
.login_item_link {
  display: block;
}

클래스명 &-> 부모가 '클래스명'인 자식에 css를 줄수 있음

//부모가 .dark인 header에 적용
header {
  .dark & {
          background: #f0f;
      }
}
ㅤ
//css 결과
.dark .headerBox {
  background: #f0f;
}

1. @at-root (중첩 벗어나기)

중첩 안에서 생성하되 중첩 밖에서 사용해야 경우에 사용

//scss 사용
.list {
  $w: 100px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}
ㅤ
//css 결과
.list li {
  width: 100px;
}
.box {
  width: 100px;
  height: 50px;
}