Sass(Scss)로 css를 간편하게 만들자

1. 환경 설정

• VScode 에디터를 실행한다.
• extension 메뉴를 눌러서 live sass compile를 설치한다.
• (파일명). scss으로 만들어서 사용한다.

• test.scss 파일에 내용을 작성 후 저장을 한다.
• css 파일에 설정한 값이 저장된 내용이 만들어진다.
  • 이 파일을 HTML에 링크를 걸어서 사용하면 됩니다.
    
    
• map 파일의 용도는 구글 크롬에서 찾기 쉽게 만드는 용도다.

 

- Sass파일과 Scss파일의 차이점

// Sass 방식
.background
    color : red
    
// Scss 방식
.background {
    color : red
    }

 

 

 

2. Sass(Scss) 문법 특징

1. 값을 저장을 하고 쓸 수 있다.
   1. $변수명  : 컬러, 폰트사이즈, 높이, 길이 등등
   2. 한글이 잘 적용이 된다.
      
2. 사칙 연산도 가능하다.
   1. 다만 같은 단위 끼리 사용을 해야 된다 ex) px는 px, %는 %...

/*  test.scss 파일에 작성을 합니다. */

$메인칼라 : #2a4cb2;
$기본사이즈 : 16px;

.main_box{
    width: 100%;
    color: $메인칼라;
    font-size: ($기본사이즈 + 2px);
}

.sub_box {
    background-color: $메인칼라;
    font-size: ($기본사이즈 - 2px);
}

 

 

-  Nesting 문법

1. css의 실렉터 문장을 쉽게 사용이 가능하다.
2. hover도 사용이 가능하다.

.main_bg {
    h3 {
        font-size: $기본사이즈;
    }
    button {
        color: $서브칼라;
        &:hover {
            color : $메인칼라;
          }
    }
}

 

 

- @extend 문법

1. 존재하는 클래스를 확장하는 문법이다.
2. 존재하는 속성을 쉽게 사용이 가능하다.
3. @extend (변수명)으로 임시클래스, 혹은 클래스를 속성을 그대로 가져올 수 있다.
   1. %(변수명)으로 임시클래스로 단독으로 컴파일되지 않는 특징이 있다.

%btn {
    width: 100px;
    height: 100px;
    padding: 20px;
}

.btn-green {
  @extend %btn;
    color: green;
}

.btn-red {
    @extend %btn;
      color: red;
  }

 

 

- @mixin 문법

1. 여러 줄의 스타일을 간단하게 사용이 가능하다.
2. 이름( ){ }으로 생성해서 사용한다.
3. @include 이름으로 사용한다.
4. extend 대비 다른 값을 넣는 것이 가능하다.
   1. 버튼($색상){ color : $색상} = @include 버튼(red) 하면 빨간색으로 컬러값이 적용이 된다. 

@mixin 폰트스타일($크기,$간격){
font-size: $크기;
letter-spacing: $간격;
}

h2{
    @include 폰트스타일(40px, 1px)
}

h3{
    @include 폰트스타일(30px, 2px)
}

h4{
    @include 폰트스타일(20px, 0px)
}

 

 

- @use 그리고  _파일

1. 다른 Scss를 파일의 내용을 그대로 사용이 가능하다.
2. _를 붙을 경우 css와 map이 생성하지 않는다.
   1.  자주 사용하는 Scss 스타일을 만들어두면 필요할 때마다 @use로 사용하면 되기 때문에
      
3. $변수 그리고 @mixin도 그대로 사용이 가능하다.
   1. 다만 사용하는 @use로 가져온 scss 파일명.$변수, 파일명. mixin버튼(); 으로 사용해야 된다.

@use '귀찮은요소정리.scss';
@use '_자주사용.scss';
자주사용.$변수명;  /* 다른 파일의 변수쓰는법 */
@include 자주사용.mixin버튼();  /* 다른 파일의 mixin쓰는법 */