SASS 핵심문법

sass와 scss의 차이

 

sass : 괄호 없이 사용가능함

 

.background
 color : red

scss : 괄호 사용함

.background {
 color : red;
 }

 

 

nesting 문법     

 

• 관련있는 Class들 묶을 때 좋음  
• Nesting안에 또 Nesting 할수있지만 이렇게까지 거의 사용안함
• UI들을 뭉탱이로 관리할 수 있음

.main {
	h4 {
    font-size: 16px;
    }
    button {
    color: red;
    }
 }
 
 
 이건 SCSS로 작성한것

 

CSS 결과물:

.main h4 {
	font-size: 16px;
}
    
.main-bg button {
	color: red;
}

 

 

 

@extend  

• 이미 존재하는 속성들을 복붙하지 않고 사용할수 있다.

 

 

사용법

.**** { } : 변수선언

%**** { }: 임시변수 선언  // 임시변수는 단독으로 컴파일 되지 않음.

 

@extend %****  : 변수 불러오기

 

 

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

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

 

 

@mixin 

긴코드를 짧은 단어로 축약할 때 사용함

$파라미터를 이용하면 긴 코드를 가변적으로 이용가능함

 

@extend랑 비슷한듯?!?

 

@mixin 폰트스타일($구멍, $구멍2) {
	font-size: $구멍;
    letter-spacing: $구멍2;
  }
  
  h2 {
	@include 폰트스타일(40px, 1px)
    }
    
  h2 {
	@include 폰트스타일(30px, 2px)
    }
    
  h2 {
	@include 폰트스타일(20px, 3px)
    }


/* 결과물 */

h2 {
	font-size: 40px;
    letter-spacing: 1px;
    }
    
 h3 {
 	font-size: 30px;
    letter-spacing: 2px;
    }
    
 h4 {
 	font-size: 20px;
    letter-spacing: 3px;
    }