CSS_Sass 기초 2

▶️ .sass 와 .scss

  .box 
      font-size : 16px;

  .main-bg 
      color : red

sass는 중괄호 없이도 css 코드를 작성할 수 있다. 다만 구글링해서 나오는 코드들이 대부분 중괄호를 포함하기에 scss로 짜는 것이 더 나을 수도 있다.

---

▶️ 셀렉터 대신 쓰는 Nesting

  .navbar {
    ul {
      width : 100%;
    }
    li {
      color : black;
    }
  }
  /*위에건 SASS 문법*/

  .navbar ul { 
    width : 100%; 
  }
  .navbar li { 
    color : black; 
  }
  /*밑에건 CSS 문법*/

div.container > div p.first > span::after
이런식으로 셀렉터를 많이 사용하다보면 코드 자체가 복잡해진다. 따라서 위 코드처럼 UI를 뭉텅이로 관리할 수 있는 방법이 nasting 문법이다.

---

▶️ &:hover

  .navbar {
    :hover {
      color : blue;
    }
  }

  .navbar {
    &:hover {
      color : blue;
    }
  }
 

• 위처럼 쓰면 .navbar :hover를 잡게 되고 밑처럼 쓰면 .navbar:hover를 잡게 된다.
• 밑처럼 &기호를 붙여주면 셀렉터를 스페이스바 없이 붙일 수 있다.

---

▶️ 이미 있는 클래스를 확장하는 @extend

  .btn {
    font-size : 16px;
    padding : 10px;
    background : grey;
  }

  .btn-green {
    @extend .btn;
    background : green;
  }

@extend를 사용한 후 복붙할 클래스명을 뒤에 적으면 클래스명에 있던 모든 내용이 복붙된다.

---