[CSS} SASS 학습

📌 SASS 공부

---

• SASS의 특징
  • sass(scss) : css의 확장 언어
  • css보다 조금 더 높은 자유도를 개발자들에게 부여
  • sass에서 nesting 구조는 많아도 4구조 3구조 내에서 하는 것이 좋다
  • 설치 방법
    • 브라우저: html, js ,css - sass(scss) > css : webpack, node로 연결
    • vscode 설치: Sass, live sass compiler(sass를 css로 컴파일 해주는 역할)

 

📌 sass1 기본적용: nesting 구조로 계층을 잡을 수 있음

---

    body {
      .box {
        width: 100%;
        background-color: white;
        color: black;
        //& 부모를 가르킨다 => .box:hover { background-color: white}
        &:hover {
          background-color: $primary-color;
        }
      }
    }

 

📌 sass2: 색 적용

---

/*
※ SASS 색 7가지 속성
- darken이랑 lighten은 hover시 많이 사용된다.
- darken : 어둡게
- lighten: 밝게
- saturate: 더 선명하세(높은 채도)
- desaturate: 더 흐리게(낮은 채도)
- adjust-hue: 명도 변경
- rgba: alpha값 변경
& 은 부모를 가르킴
*/

div {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: $primary-color;
display: inline-block;
margin: 10px;
text-align: center;

&:nth-of-type(1) {}
&:nth-of-type(2) {
  background-color: darken($primary-color, 30%);
}
&:nth-of-type(3) {
  background-color: lighten($primary-color, 20%);
}
&:nth-of-type(4) {
  background-color: saturate($primary-color, 70%);
}
&:nth-of-type(5) {
  background-color: desaturate($primary-color, 20%);
}
&:nth-of-type(6) {
  background-color: adjust-hue($primary-color, 60deg);
}
&:nth-of-type(7) {
  background-color: rgba($primary-color, 0.5);
}

 

📌 sass3: extend 적용

---

    extned: css 스타일 확장

    % : 임시 클래스 이름

  %btn {
    padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius:14px;
  }

  .btn-1 {
    @extend %btn;
    border: 1px solid red;
    color: red;
    font-weight: bold;
  }

  .btn-2 {
    @extend %btn;
    border: 1px soild blue;
    color: blue;
    font-weight: bold;
  }

 

📌  sass4: mixin 적용

---

@mixin 버튼($border-color: black, $font-color:black) {
    padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius:14px;
    border: 1px solid $border-color;
    color: $font-color;
    font-weight: bold;
  }

  .btn-1 {
    @include 버튼( $font-color: red)
  }

  .btn-2 {
    @include 버튼(blue, blue)
  }

 

 

📌  sass5: operator(연산자)  적용

---

  /*
  sass5: operator(연산자) 적용: +, -, * , /
   /(슬래쉬)를 나누기를 사용할 때 주의해야 하는 이유는 css에서 슬래쉬를 다른용도로 사용하고 있다.
   /를 할 떄 @use "sass:math" 를 사용하거나
   /를 할 때 ()/2  괄호를 묶어 연산하거나 한다.
  */


  .box {
    width: math.div(100px,2);
    height: 100px;
    border: 1px solid use_test.$color;
  }

 

 

📌  sass6: 반복문, 가정문(조건문), 변수:배열 ,오프젝트

---

/*
  sass 변수: 변하는 수(모든 것 ..?)
  $: 기호 +"작명" : "저장할 내용";
*/

$primary-color: #d2e1dd;
@use "sass:math";
@use "./use_test";

$list : orange, blue, red, yellow;

$object : (
  1: orange,
  2: blue,
  3: yellow
);


  @for $i from 1 through 10 {
    .box:nth-of-type(#{$i}) {
      width: 100px;
    }
  }

  @each $color in $list {
    .box {
      background-color: $color;
    }
  }
  
  @each $key, $color in $object {
    .box-#{$key} {
      background-color: $color;
    }
  }

  $statement: blue;
  p {
    @if $statement == blue {
      color: blue;
    }
    @else {
      color: red;
    }
  }