기억 휘발 방지소

[CSS] CSS, SCSS, SASS 본문

Web/CSS

[CSS] CSS, SCSS, SASS

choice91 2021. 9. 29. 22:04
728x90
반응형

📌 CSS (Cascading Style Sheets)

웹페이지를 꾸미려고 작성하는 코드

아래 코드에 body를 선택자(Selector)라고 부르고 background-color, color를 속성(Property), 뒤에 값 white, black을 속성 값(Property Value)라고 부른다.

선택자는 태그명을 써줄 수도 있고 id, class명을 써줄 수도 있다.

id는 선택자 앞에 #을 붙여야하고 class는 .(점)을 붙여야한다.

<body>
  <a href="#">Home</a>
  <div id="header">Header</div>
  <h1 class=".title">Title</h1>
</body>
body {
  background-color: white;
  color: black;
}

a {
  color: inherit;
  text-decoration: none;
}

#header {
  ...
}

.title {
  ...
}

 

📌 SCSS (Sassy CSS): 멋진 CSS

SCSS와 SASS는 CSS를 편리하게 더 편리하게 작성할 수 있도록 도와주고 추가 기능까지 있는 확장판이라고 보면 된다.

&는 부모선택자로 아래 코드에서 &는 a태그를 의미한다.

<body>
  <a href="#">Home</a>
  <div id="header">Header</div>
  <h1 class=".title">Title</h1>
</body>
body {
  background-color: white;
  color: black;
  a {
    color: inherit;
    text-decoration: none;
    &:hover {
      cursor: pointer;
    }
  }
}

SCSS는 변수도 사용할 수 있다.

// variables.scss
$bgColor: white;
@import "./variables.scss";

body {
  background-color: $bgColor;
  color: black;
  a {
    color: inherit;
    text-decoration: none;
    &:hover {
      cursor: pointer;
    }
  }
}

background-color: $bgColor는 background-color: white랑 같은 뜻

 

📌 SASS (Syntactically Awesome Style Sheets): 문법적으로 멋진 스타일시트

SCSS와의 가장 큰 차이점은 중괄호({})와 세미콜론(;)이 없다는 것

body
  background-color: white
  color: black
  a
    color: inherit
    text-decoration: none
    &:hover
      cursor: pointer
728x90
반응형
저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[CSS] TailwindCSS  (0) 2024.03.09
'Web/CSS' Related Articles more