CSS-SCSS정리

SCSS

CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다.
밑에 예시에서 확인하시겠습니다.

변수를 만드는 방법 예)

SCSS 변수예시보기

$font-stack: Helvetica, sans-serif; 
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
} 

CSS로 보기

body { 
    font: 100% Helvetica, sans-serif;
    color: #333;
  }
  olor: $primary-color;
} 

---

중첩

중첩 HTML 을 작성할 때 분명히 중첩되는 계층적인 구조 가 있습니다. 반면 CSS 는 그렇지 않습니다.
Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기를 중첩할 수 있습니다.
지나치게 중첩된 규칙은 유지하기 어려운 것으로 판명될 수 있고 일반적으로 나쁜 습관으로 간주 되는 과도하게 규정된 CSS 를 초래합니다.
이를 염두에 두고 다음은 사이트 탐색에 대한 몇 가지 일반적인 스타일의 예입니다.

SCSS 중첩예시보기

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li { display: inline-block; }
    
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
    } 

CSS로 보기

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    nav li {
    display: inline-block;
    }
    nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    }