scss

🥕 SCSS 란? ( Syntactically Awesome StyleSheet의 약어 )

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset)
=> 웹에서는 직접 동작하지 않기 때문에 CSS로 컴파일(Compile)함

🥕 SCSS 왜 쓸까?

개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어

1. 코드의 재활용성

2. 가독성

=> CSS에서 보이던 단점을 보완함

🥕 중첩(Nesting)

상위 선택자의 반복을 피하고 가독성이 좋게 작성 가능

.box {
  margin: {
    top: 10vh;
    left: 20vw;
  };
  padding: {
    bottom: 40vh;
    right: 30vw;
  };
  .list {
  	padding: 20px;
    	li {
        	text-decoration: none;
            }
   }         
}

🥕 참조

중첩 안에서 &키워드는 상위(부모)선택자를 참조함

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.btn {
  color: blue;
  &:hover {
    color: red;
  }
}

🥕 재활용

SCSS는 @mixin과 @include로 기능을 사용

 

@Mixins

재사용 가능한 기능을 만드는 방식

@mixin 믹스인이름 {
  스타일;
}
@mixin largeBtn {
    border-radius: 50%;
    border: none;
    background-color: white;
    width: 2vw;
    height: 5vh;
}

 

 @include

@include 믹스인이름;

 

🥕 확장 (extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우

@extend 선택자;

.btn {
  padding: 20px;
  margin: 20px;
  background: skyblue;
}
.btn-agree {
  @extend .btn;
  background: green;
}

🥕if (함수)

// @if
if(조건, 표현식1, 표현식2)
	/* 조건이 참일 때 표현식1, 거짓일 때 표현식2 */

// @if @else
@if (조건) {
	/* 조건이 참일 때 구문 */
} @else {
	/* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
	/* 조건1이 참일 때 구문 */
} @else if (조건2) {
	/* 조건2가 참일 때 구문 */
} @else {
	/* 모두 거짓일 때 구문 */
}

=> 조건에 ( )는 생략이 가능