SCSS 기초

SCSS = SASS = "사스"

css 의 전처리기

css로 변경 후 실행

브라우저는 scss를 알 수 없음

인간만을 위한 css

속성(margin, padding.. ) 값을 js 변수처럼 활용

 

 

 

네스팅(nesting): 안에 넣고 또 넣고 ~ ...

 

코알라(사스 생성 프로그램) 설치방법

Koala 검색 후 다운로드

→ 설정 클릭

→ Autoprefix 체크

→ Output Style은 Compact

→ Okay

 

코알라 사용하는 방법

설정

→ Default Options의 Auto Prefix 체크

→ Output Style에서 Compact 선택

→  VSC에서 scss파일 생성 (확장자를 .scss로 하면 됨)

→ 코알라 실행 후, 막 생성한 파일을 불러옴

→ 우측 초록색 compile 버튼 클릭

 

코알라 주의사항 (VSC html 파일에서)

/*# sourceMappingURL=index.css.map /*

* 지우면 css로 작업 파일을 불러들일 수 없음

 

 

 

주석

한 줄 주석:  //

여러 줄 주석: /*

                                 */

 

변수 할당

자주 사용하는 속성은 변수로 지정해서 재사용 할 수 있음

맨 앞에 '$' 삽입하여 선언

'$'기호 앞에 어떤 기호도 붙지 않으면 자손 선택자

(.scss파일에서 작성)

$myColor: pink;

$myColor2: blue;

 

body {

             background-Color: $myColor;

             color: $myColor2;

}

 

$fs: 30px;

$size: 20px;

.btn {

         font-size: $fs;

         padding: $size;

         margin: $size;

 

변수 이름 정하는 방법:

영문 + 숫자

영문 + 특수문자('-' 또는 '_' + 숫자)

대소문자

한글 x

 

 

중첩

scss에서는 한 클래스나 아이디에 모든 속성과 이벤트핸들러를 집어넣음

쉬운 구성과 높은 가독성을 가질 수 있음

/*css*/                                                      /*scss*/

nav ul {                                                  nav{

    margin: 0;                                                   ul{         

    padding: 0;                                                      margin: 0;

    list-style: none;                                                list-style:none;

 }                                                                        }                               

nav li {

   display: inline-block;                                     li {

                                                                              display: inline-block;

}                                                                         }

nav a {

     display: block;                                            a {

     padding: 6px 12px;                                           display: block;

     text-decoration: none;                                       padding: 6px 12px;

                                                                              text-decoration: none;

                                                                          }

                                                                        }

 

선택자

/*html*/

<ul class="my-fav">
       <li>은동이</li>
       <li>스타크래프트</li>
       <li>인피니트</li>
       <li class="pink">핑크색</li>
       <li>드라이브</li>
</ul>

 

/*scss*/

.my-fav{
  > li{
    font-size:1.5rem;
  }
  >.pink{
    color:pink;
    font-weigh:bold;
  }
}