CSS SASS SCSS

파이썬은 쉽다 라는 말이 있다.

• 파이썬은 모든 자료형을 객체화 하여 처리하기 때문에 C,C++ 보다는 느리지만 들여쓰기 문법으로 직관적이고 라이브러리도 잘 구성돼있기 때문에 초보자가 입문하기 쉽기 때문이다.
• 하지만 들여쓰기 문법이 누구에게나 편한것은 아닐 수 있다.
• 오늘 소개할 SASS도 위와 같은 들여쓰기 문법을 택하였지만 자리잡지는 못했다..

CSS SASS SCSS

• 셋다 스타일 시트를 작성하는 방법을 나타낸다.
• 기본적으로 웹을 배울때 CSS를 많이 배우지만 실무에서는 SCSS방식이 많이 사용된다고 한다.

CSS

• Cascading Style Sheets
  • 웹페이지 스타일을 정의하고 표현하는데 사용되는 언어.
  • 정적 스타일링을 지원하며 중괄호 선택자와 중괄호 내 속성, 값의 집합으로 구성됨
    태그이름 { color : black } 식으로 사용.
  • 정적 스타일링 : 웹페이지가 로딩될때 적용되며 이후에 변경되지 않는 스타일링
    • 상호작용으로 바뀌는 스타일링은 자바스크립트로 처리해주는것이지 CSS가 처리하는게 아님.
    • 보통 로고, 배경이미지, 레이아웃 등 고정적인 디자인 요소에 사용된다.
  • CSS는 브라우저에서 직접 해석되며 모든 스타일을 한번에 처리.

SASS

• Syntactically Awesome Style Sheets
  • 문법적으로 멋진 style sheets다.
  • CSS를 확장한 버전, 변수, 중첩규칙, 믹스인 같은 고급 기능을 제공하여 효율적으로 관리.
    • 코드의 재사용성과 유지관리성을 높임
  • CSS와 다르게 중괄호, 세미콜론; 을 사용하지 않는 파이썬 같은 들여쓰기 문법을 택함.
    • 하지만 기존 개발자들이 기존 CSS를 위와 같이 변경하는것은 오히려 어려운 일이었다.
  • SASS는 브라우저에서 직접 해석되지 않고 컴파일러를 통해 CSS로 변환
    • 동적인 스타일링을 지원한다.
      • 사용자 인터렉션, 상태에 따라 스타일이 변경되는 방식.
  • 대규모/복잡한 페이지를 개발할때 유용
  • 하지만.. 기존 CSS를 사용해 왔던 사람들에겐 들여쓰기 문법은 익숙하지 않다는 문제

SCSS(Sassy CSS)

• SASS의 새로운 문법이다, CSS와 유사한 구문을 사용한다.
  • CSS와 유사하게 중괄호 {}, 세미콜론;을 사용하여 스타일을 정의한다.
  • 위와 같은 이유로 CSS코드를 그대로 재사용 가능.
• 대부분의 프로젝트에선 SCSS를 사용하는것이 좋다
  • 호환성이 뛰어나며 CSS 기반 프레임워크 및 라이브러리와 함께 사용하기에도 적합.
  • SASS와 마찬가지로 컴파일러를 통해 CSS로 변환 + 동적스타일링을 지원한다.

CSS vs SASS vs SCSS

CSS Version

/* CSS 예제 */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.button {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

#아이디 {} 

/* SASS 예제 */
$font-family: Arial, sans-serif
$primary-color: #007bff
$secondary-color: #0056b3

body
  font-family: $font-family
  background-color: #f0f0f0
  margin: 0
  padding: 0

.header
  background-color: #333
  color: #fff
  padding: 10px

.container
  width: 80%
  margin: 0 auto

.button
  background-color: $primary-color
  color: #fff
  padding: 8px 16px
  border: none
  cursor: pointer

  &:hover
    background-color: $secondary-color

SCSS

/* SCSS 예제 */
$font-family: Arial, sans-serif;
$primary-color: #007bff;
$secondary-color: #0056b3;

body {
  font-family: $font-family;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.button {
  background-color: $primary-color;
  color: #fff;
  padding: 8px 16px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: $secondary-color;
  }
}

SCSS가 동적인 스타일을 만들어내는 예시.

→ CSS는 변수 사용이 불가

// SCSS 변수를 사용하여 색상 정의
$primary-color: blue;
$secondary-color: red;

// 스타일링된 버튼 클래스
.button {
  padding: 10px 20px;
  border: 2px solid $primary-color;
  background-color: white;
  color: $primary-color;
  cursor: pointer;

  &:hover {
    background-color: $primary-color;
    color: white;
  }

  &.error {
    border-color: $secondary-color;
    color: $secondary-color;

    &:hover {
      background-color: $secondary-color;
    }
  }
}

Appendix

CSS

• CSS작성할때 많이 사용되는 국룰? 규칙에 대해 알아보자

  • 전체초기화

    .* {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box; // 200px; 
    }
    
    각태그 요소들은 기본적으로 일부 마진, 패딩, 테두리 등을 포함하는 경우가 있는데 
    이를 0으로 초기화해주는 스타일규칙임 
    
    box-sizing : border-box를 해주면
    요소크기 계산 방식이 변경되는데 원래 기준은 컨텐츠영역기준으로 계산하는데
    위와같이 설정하면 최종요소의 크기로 계산이 됨 ```

``` html
예시를 들어보자 

/* border-box 박스 모델 */
div {
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  box-sizing: border-box;
}

border-box를 안해줬다면 해당 div의 너비는 230px이 될것임 
border-box 해주면 div의 너비는 200px로 유지 
```

• 폰트초기화

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  }
  
  웹 페이지의 기본 폰트 패밀리를 설정. 
  브라우저에 기본으로 제공되는 시스템 폰트 또는 원하는 폰트 패밀리로 변경

• 링크스타일 초기화

  a {
    text-decoration: none;
    color: inherit;
  }
  
  이 규칙은 하이퍼링크의 밑줄을 제거하고 부모 요소로부터 텍스트 색상을 상속.

• 리스트 스타일 초기화

  ul, ol {
    list-style: none;
  }
  이 규칙은 목록 요소의 기본 스타일(점, 숫자 등)을 제거합니다.

• 페이지 초기화

html, body {
  height: 100%;
}

페이지의 높이를 100%로 설정하여 컨테이너에 내용이 없어도 페이지가 전체 화면에 채워지도록 만들어줌

• 이미지 초기화

img {
  max-width: 100%;
  height: auto;
}

이미지가 부모 요소의 크기를 초과하지 않도록 하고, 높이를 자동으로 조정하여 원래 비율을 유지