[SASS] 세팅 및 문법

*세팅 : Live Sass compile 설치

 

SASS (Syntactically Awesome Style Sheets)

CSS내 반복되는 내용은 줄이고 작업할 때, 유지보수 할때 효율적으로 스타일시트를 관리하기 위한 시트

 

• 변수 문법 : 자주 쓰지만 기억하기 어려운 값들을 저장해서 쓰기위한 문법

$서브색상 : #333333;

.text {
  color: $메인색상
}

• Nesting : 중괄호 안에 또 셀렉터를 쓰는 문법

.navbar {
  ul {
    width : 100%;
  }
  
  .navbar {
  :hover {
    color : blue;
  }
}

.navbar {
  &:hover {
    color : blue;
  }
}

• @extend : 이미 존재하는 속성들을 복붙하지 않고 사용

.btn {
  font-size : 16px;
  padding : 10px;
  background : grey;
}

.btn-green {
  @extend .btn;
  background : green;
}

• @mixin(자주사용) : 변수문법에서 스타일을 여러줄을 저장해서 사용 할수 있다.

@mixin 버튼기본디자인() {
  font-size : 16px;
  padding : 10px;
}

.btn-green {
  @include 버튼기본디자인(); //@inclued + 함수 이름 
  background : green;
}

@mixin 버튼기본디자인($구멍) { //파라미터 사용가능
  font-size : 16px;
  padding : 10px;
  background : $구멍;
}

• @use와 언더바 파일

@use 'reset.scss'; //import랑 비슷 

@use '_reset.scss'; //안쓰는 scss 언더바 붙치면 컴파일 x

reset.$변수명;  /* 다른 파일의 변수쓰는법 */
@include reset.mixin이름();  /* 다른 파일의 mixin쓰는법 */