SCSS Sass 1 [패스트캠퍼스 챌린지 19일차]

개요

CSS 전처리 도구

CSS Preprocessor

Variables 변수

변수를 만들어서 특정한 데이터들을 재활용할 수 있음

Sass에는 문법이 두 가지 있음

1. SCSS
   • 기존의 CSS 문법과 호환 굳
   • 권장되는 문법
2. Sass
   • 기존의 CSS와 호환이 잘 안됨
   • 세미콜론도 없고 중괄호도 없고
     어디서 시작해서 어디서 끝나는지 찾기 어려울 수도

왜 굳이 SCSS?

CSS는 조상 요소 선택자들을 반복적으로 적는 불편함

→ SCSS의 중첩 nesting 기능으로 쉽게 작성 가능

변수 Variables를 만들어 특정한 데이터들을 재활용할 수 있음

→ 손가락 노동을 줄임

---

프로젝트 생성 VScode

1. 프로젝트 폴더 생성

2. npm init -y npm 프로젝트 생성
   →package.json 파일 생성됨

3. npm i -D parcel-bundler -D 개발 의존성 모듈
   → node_modules 생성
   → package-lock.json 생성

4. package.json 파일에서 parcel-bundler 설치 됐는지 확인
   &
   "scripts" : { "dev":"parcel index.html", "build" : "parcel build index.html" },

   파슬 번들러를 실행해서 프로젝트를 브라우저에서 오픈할 수 있도록
   dev라는 명령으로 내용을 실행할 것이고, parcel이라는 명령에 index.html을 연결해서 실행하겠다
   (실제로 제품화 할 때는 build라는 명령을 돌리는데)
   역시 parcel 명령 build 명령 index.html 연결

5. index.html 파일 생성
   → <link rel="stylesheet" href="./main.scss" />

6. main.scss 파일 생성

7. npm run dev
   개발 서버 열어서 링크 Cmd+클릭

---

주석

두 주석 모두 사용 가능

/* */ →표준 CSS 주석

// →새로운 방식

변환 후 ( Compiled CSS)

/* */
→ 나타남

//

→ 나타나지 않음

변환 된 후에도 주석이 남아있길 원하면 /* */ 를 쓰기

---

중첩 with SassMeister

Nesting

SCSS

.container {
    >  ul {
        li{
            fonst-size: 40px;
            .name {
                color: royalblue;
            }
            .age {
                color: orange;
            }
        }
    }
}

CSS

.container > ul li {
  fonst-size: 40px;
}
.container > ul li .name {
  color: royalblue;
}
.container > ul li .age {
  color: orange;
}

> 자식 선택자

태그 앞에 > 입력하고 띄어쓰기까지

---

상위(부모) 선택자 참조

& 상위 선택자 참조

상위 선택자가 하위선택자의 &로 치환

or

& 기호가 상위 선택자를 참조

SCSS

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

.list {
    li{
        &:last-child {
            margin-right: 0;
        }
    }
}

CSS

.btn {
  position: absolute;
}
.btn.active { /*일치선택자*/
  color: red;
}

.list li:last-child { /*가상 선택자*/
  margin-right: 0;
}

SCSS

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

CSS

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

---

중첩된 속성

NAME SPACE란?
이름을 통해 구분 가능한 범위를 만들어내는 것으로,
일종의 유효범위를 지정하는 방법을 말함

주의해야 할 부분

선택자처럼 사용하되, 뒷부분에 : 콜론 기호 붙여주기

중괄호가 끝나는 부분에 ; 세미 콜론으로 마무리

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;
}

---

변수

주의해야 할 사항

변수는 선언된 범위에서 유효범위를 가짐

• 변수를 제일 위에 작성하면 → 전역 변수
• 변수를 어느 선택자 내부에 선언하게 되면,
  → 변수 자신이 선언된 그 중괄호 안에서만 유효함

해당하는 변수가 재할당되면?

→재할당된 코드 아래쪽에서는 재할당된 값으로 사용이 된다

---

반복되는 수치들

SCSS

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

$변수명: 값;

SCSS

$size: 200px;

.container {
    position: fixed;
    top: $size;
    .item {
        width: $size;
        height: $size;
        transform: translateX($size);
    }
}

CSS

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

선언된 변수에 값을 재할당

SCSS

.container {
    $size: 200px;
    position: fixed;
    top: $size;
    .item {
        $size: 100px; // 재할당
        width: $size;
        height: $size;
        transform: translateX($size);
    }
        left: $size; //주의!
}

CSS

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

&size가 재할당 된 건 .item 내부이긴 하지만,

해당하는 변수는 재할당돼서 값이 바뀌었기 때문에, 중괄호 밖이어도 재할당된 값으로 출력이 된다

---

저번에 타입스크립트도 잘 안되더니 SCSS도 지원 안 해주네 여기 마크다운...
타입스크립트 공부하다가 머리 너무 아파서 월담해버림
핑크색 예쁘다...

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online