SASS(SCSS)

Sass(Scss) 알아보기🍇

🏳️ Sass(Scss) : CSS Preprocessor(CSS 전처리기)라 불리며 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할수 있게 해준다.

Sass와 SCSS는 차이점은?

🏳️ SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.또한 Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분한다.

---

SASS(Scss)의 데이터형식

---

Nesting(중첩)

 .bottom-bar-section {
    ul {
      list-style-type: none;
      margin: 0;
      padding-bottom: 20px;
      padding-left: 0;
    }
    li {
      padding-bottom: 5px;
    }
    p {
      margin-top: 40px;
    }
  }

위와 같이 요소를 묶어주어 선택자의 반복을 줄여 가독성을 높여주며 코드를 짧게 해준다.

---

Ampersand (상위 선택자 참조)

header {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 60%;
    margin-left: 20%;
    height: 60px;
    background-color: #f4f4f2;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(144, 104, 104, 0.05);

    &:hover .nav li {
      opacity: 1;
      transition: all 0.5s;
    }

    &:not(:hover) .nav li {
      opacity: 0.3;
      transition: all 0.5s;
    }
}

Nesting 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환함

---

속성 중첩

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

가독성을 높여준다.

---

변수(Variables)

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

자주 사용되는 값 변수저장 가능

---

연산가능

width: 50% - 20px;  // 단위 모순 에러(Incompatible units error)
width: calc(50% - 20px);  // 연산 가능

연산가능 / 나누기는 ()괄호에 넣어줘야함.

---

@mixin(재활용)

@mixin 작명 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

h1 {
  @include 작명;
}

아주 훌륭한기능. 코드를 줄여준다.

---

@if()

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

js의 if와 같은기능

---

참조 https://heropy.blog/2018/01/31/sass/