이번 글은 아래 강의를 토대로 작성하였습니다.
CS50's Web Programming lecture 0. HTML & CSS
들어가며
CSS에서 같은 값을 반복해서 입력해야 할 때 불편함을 겪는다. 물론 :root{}를 활용하여 자주 쓰이는 값을 저장해서 호출하는 식으로 처리할 수도 있으나 :root에 저장한 값을 일일이 불러와야 한다는 점에선 불편한 것은 매한가지이다.
Sass를 활용하여 CSS를 작성하면 이런 번거로움을 덜 수 있다.
아래 내용을 보며 Sass에 대한 기본적인 지식을 익혀보자.
실전 활용법
설치하기(Windows 10 기준)
npm install sasscomplile scss to css
Sass의 확장자는 scss이다. scss 자체로는 웹 브라우저에 읽힐 수 없기 때문에 css 파일로 변환해서 사용해야 한다.
compile을 하려면 console 창에 아래와 같이 입력한다.
sass {filename}.scss:{filename}.css위의 문장을 입력하면 scss에서 compile된 css가 생성된다. 새로 생성된 css 파일을 html 파일에 input하여 사용하면 된다.
허나 scss 파일에서 수정사항이 생기면 매번 compile을 해줘야 하는데 다음과 같이 --watch를 추가하면 scss 파일을 저장할 때마다 자동으로 수정사항이 css 파일에 반영되어 compile을 해야 하는 수고를 덜 수 있다.
sass --watch {filename}.scss:{filename}.css1. 변수 활용하여 CSS 유지보수 쉽게 하기
<body>
<ul>
<li>unordered item</li>
<li>unordered item</li>
<li>unordered item</li>
</ul>
<ol>
<li>ordered item</li>
<li>ordered item</li>
<li>ordered item</li>
</ol>
</body>위와 같은 html코드를 작성했을 때 ol과 ul에 각각 초록색을 부여한다고 치자. CSS로 색상을 입힌다면 아래와 같이 작성해야 한다.
ul {
font-size: 14px;
color: green;
}
ol {
font-size: 18px;
color: green;
}물론 위와 같이 작성해도 전혀 문제될 것은 없다. 허나 코드 길이가 길어져 100개의 요소에 초록색을 부여해야 한다면? 복붙신공을 한다 쳐도 100번은 붙여 넣어야 한다. 더 큰 문제는 값을 수정하기가 까다롭다는 점이다. 위의 예제 코드에서 ul과 ol에 부여된 color값 green을 변수로 만든다면 보다 유지보수하기 쉬운 코드가 될 것이다.
아래는 Sass를 활용하여 green을 변수에 저장한 코드이다.
$color: green;
ul {
font-size: 14px;
color: $color;
}
ol {
font-size: 18px;
color: $color;
}Sass에서 변수 선언을 할 땐 변수 앞에 $ 기호를 붙여준다. 작성한 scss 파일을 위에서 살펴본 대로 compile하고, 새로 생성된 css를 html 파일에 link 해주면 기존에 css로 스타일을 부여했을 때와 같은 결과물이 출력된다!
여기서 색상을 blue로 바꾸고 싶다면? 번거롭게 일일이 수정할 필요 없이 변수 $color의 값을 blue로 바꿔주기만 하면 된다.
$color: blue;
ul {
font-size: 14px;
color: $color;
}
ol {
font-size: 18px;
color: $color;
}
변경된 색상이 잘 반영됐음을 볼 수 있다.
2. nesting
<body>
<div>
<p>This is a paragraph inside the div.</p>
List inside the div:
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
</div>
<p>This is a paragraph outside the div.</p>
List outside the div:
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
</body>
위와 같이 작성된 html 코드가 있고 div 태그의 하위 속성 p와 ul에 각각 색상을 부여한다 하자. css로 색상을 부여한다면 아래와 같이 작성해야 할 것이다.
div {
font-size: 18px;
}
div p {
color: blue;
}
div ul {
color: green;
}위 코드를 scss로 간소화한다면 아래와 같다.
div {
font-size: 18px;
p {
color: blue;
}
ul {
color: green;
}
}따라서 div 태그 하위 요소에 속성을 부여해야 한다면 {} 안에 속성을 부여할 요소를 추가하기만 하면 된다.
inheritance
<body>
<div class="success">This is a success message.</div>
<div class="warning">This is a warning message.</div>
<div class="error">This is an error message.</div>
</body>
위 예시처럼 대부분의 속성이 중복되는 요소를 관리할 때도 Sass로써 효율적으로 작성 가능하다.
%message {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 1px solid black;
padding: 20px;
margin: 20px;
}
.success {
@extend %message;
background-color: green;
}
.warning {
@extend %message;
background-color: orange;
}
.error {
@extend %message;
background-color: red;
}위처럼 각 요소별 중복되는 속성은 %message에 담고, @extend를 활용하여 앞서 저장한 %message 내 속성들을 불러와서 사용하면 된다.
