SCSS란? (cascading)

---

SCSS (Sassy CSS)

SCSS는 웹 개발에서 사용되는 스타일 시트 언어중 하나로, CSS의 확장버전이다. 

 

보다 효율적이고 모듈화된 방식으로 스타일을 작성하고 관리할 수 있게 도와준다. 

 

// 변수 선언
$primary-color: #3498db;
$secondary-color: #e74c3c;

// 믹스인 정의
@mixin button-style {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// 스타일 규칙
.button-primary {
  @include button-style;
  background-color: $primary-color;
  color: white;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

// 중첩된 스타일 규칙
.card {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;

  h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
  }
}

 

예를 들면 다음과 같은 형식으로 작성하는 것이 SCSS이다. 

 

처음과 둘째줄에 작성한 것 처럼 변수를 선언한 후 $를 붙여 $primary-color 처럼 사용가능하다. 

 

 

또한 button-primary 클래스에 믹스인을 적용하여 사용 가능하다. 

 

미리 정의한 버튼 스타일을 적용한 후 차별점을 추가적으로 작성하면 된다. 

 

 

마지막으론 중첩스타일로, '.card' 라는 클래스를 갖고 있는 것 중, h2 별개로, p 별개로 스타일을 추가해 줄 수 있다. 

 

 

 

Cascading

CSS 는 Cascading Style Sheets 의 약자로  웹 페이지의 디자인과 레이아웃을 정의하는데 사용되는 언어를 뜻한다. 

 

그중 Cascading이란 무슨 뜻일까? 

 

Cascade는 종속, 작은 폭포 등의 뜻이 담겨있다. 폭포처럼 흐르는 style sheets 라고 생각 하면된다. 

 

쉽게 말해서 폭포처럼 흐르는 것을 중요시 생각 했기 때문에, CSS의 작업시에는 우선순위, 중요도를 통해서 스타일 규칙이 적용되는 것을 의미한다. 

 

<p class="example">Hello, World!</p>

 

.example {
  color: blue;
}

.example {
  color: red;
}

이렇게 p 태그 클래스에 blue와 red 속성을 추가하면, 나중에 선언된 red가 우선순위가 더 높아 적용된다는 뜻이다. 

 

 

CSS의 Cascading 원칙

• 선언순서 - 동일한 선택자에 대한 여러 스타일 규칙이 있다면, 나중에 선언된 규칙이 우선권을 갖는다. 
• Specificity - 선택자의 구체성에 따라 규칙이 적용된다. 구체적인 선택자일수록 우선순위가 높아진다. ID 선택자가 클래스 선택자보다 구체적이며, 클래스 선택자가 태그 선택자보다 구체적이다. 
• 중요성 - 스타일 뒤에 ' !important ' 키워드가 붙으면, 해당규칙이 모든 규칙보다 우선권을 갖는다. 
• 상속 - 부모 요소에서 정의된 스타일 속성은 자식요소로 상속된다. 상속 가능한 속성들은 폰트 스타일, 색상등이 포함된다. 

 

 

---

🔗 참고

https://opentutorials.org/course/2418/13409

캐스케이딩 - 생활코딩