scss 문법

1. 선택자 중첩시의 모습

 

기존 css 문법

#a {
  color: red;
}

#a #b {
  color: blue;
}

#a #b #c {
  color: green;
}

scss 문법

#a {
    color:red;

    #b { 
        color:blue;

        #c {
            color:green;
        }
    }
}

선택자를 여러번 쓸 필요 없이 블록안에 넣어버린다.

 

---

 

2. 변수사용

 

$red-color:red;
#red {
    color:$red-color;
}

자주쓰는 값을 변수에 담아 관리할 수 있다.

 

---

 

3. 상속받기

 

.main_font{
    font-size:10px;
    color:red;
}
div {
    @extend .main_font;
    width: 10px;
}

 

main_font라는 css 속성을 만들고

div에 @extend를 통해 상속받는다.

기존 css 였다면

 

.main_font {
  font-size: 10px;
  color: red;
}

div {
  font-size: 10px;
  color: red;
  width: 10px;
}

 

이렇게 작성했을 것

 

---

 

4. 믹스인 @mixin

 

@mixin font-style($color) {
    color:$color
}

#a {
    @include font-style(red);
}
#b {
    @include font-style(blue);
}
#c {
    @include font-style(green);
}

 

믹스인은 extend(상속)과 비슷하다.

 

-extend와 다른 점

extend는 미리 지정된 스타일을 그대로 받아오기만 한다면

mixin은 미리 지정된 스타일 + 인자로 보낸값을 이용하여 개별적으로 스타일링이 가능하다.

 

5. 함수 @function

-mixin

함수처럼 인자를 받아와 처리한다는 점은 같지만,

함수는 css property의 value를 반환하여 원래자리에서 css를 처리한다.

 

믹스인과 함수로 텍스트 크기를 설정해보자

@mixin font-size($size,$size2){
	font-size:$size+$size2;
}

#a {
	@include font-size(5px,10px)
}

@function fontSize($size,$size2) {
	@return $size+$size2;
}

#b {
	font-size: fontSize(5px,10px);
}

 

//

@mixin font-size($size,$size2){
	font-size:$size+$size2;
	color:red;
	background-color: blue;
	width:15px;
	height:20px;
}

#a {
	@include font-size(5px,50px)
}

@function fontSize($size,$size2) {
	@return $size+$size2;
}

#b {
	font-size: fontSize(5px,1px);
	color:red;
	background-color: blue;
	width:15px;
	height:20px;
}