오늘 할 일
- SCSS 문법 정리
- Svelte로 Bar Chart 제작 시작
SASS(SCSS) 문법
SASS(Syntactically Awesome StyleSheet)는 기존의 CSS(Cascarding StyleSheet)의 단점을 보완하기 위해 나온 CSS Preprocessor(전처리기)이다. Preprocessor이므로 웹브라우저가 읽을 수 있도록 CSS로 변환된다. CSS는 반복적인 부분을 재사용이 용이하게끔 코드를 짤 수 없기 때문에, 유지보수가 어렵고 프로젝트의 범위가 커질 수록 어려움이 생긴다. 따라서 SASS를 통해 반복적인 코드 사용을 낮추고 가독성을 높여 유지보수를 더 용이하게 할 수 있다.
CSS와, SASS, 그리고 SCSS의 문법적 차이
SCSS(Sassy CSS)는 SASS와 거의 비슷하나, 중괄호{}를 사용해 좀 더 가독성을 높인 스크립트이다. SASS와 다음과 같은 차이를 보인다.
- CSS
@charset "UTF-8";
.container {
width: 300px;
float: left;
}
.container li {
font-size: 16sp;
color: red;
}
.container li:last-child {
padding-left: 4px;
}- SASS
@charset "UTF-8";
.container {
width: 300px;
float: left;
li
font-size: 16sp;
color: red;
&:last-child
padding-left: 4px;
}- SCSS
@charset "UTF-8";
.container {
width: 100%;
display: flex;
li {
font-size: 16sp;
color: red;
&:last-child {
padding-left: 4px;
}
}
}변수
변수는 Scope에 따라 global variable과 local variable과 나눌 수 있다. global variable은 블럭{}바깥에 선언하여 코드 내 모든 곳에서 사용할 수 있는 변수이며, local variable은 해당 블럭에서만 사용할 수 있는 변수다.
/* 전역 변수 선언 */
$font-color: #ff00ff;
p {
/* 지역 변수 선언 */
$padding-value: 32px;
color: $font-color;
padding-left: $padding-value;
}중첩
CSS에서는 태그 내부에 있는 태그에 효과를 주기 위해 선택자를 반복해서 작성해야 하지만, SCSS 문법에서는 코드 블럭 내부에 해당 태그의 블럭을 중첩해 작성하여 선택자를 사용할 수 있다.
.container {
width: 100%;
display: flex;
li {
font-size: 16sp;
color: red;
}
}선택자 참조
부모의 선택자를 참조할 수 있다.
/* CSS */
.container {
...
}
.container:hover {
...
}
/* SCSS */
.container {
...
&:hover {
...
}
}믹스인(mixin)
미리 정의해둔 스타일시트에서 매개변수를 받아 원하는 선택자에 한 번에 적용시킬 수 있다.
@mixin 믹스인이름($매개변수명);@mixin font-attr($color) {
font-size: 16sp;
font-color: $color;
text-align: center;
}
...
.class1 {
@include font-attr(red);
}
.class2 {
@include font-attr(green);
}함수
믹스인과 비슷하나 @return을 통해 계산한 리턴값을 속성으로 사용한다.
@function 함수이름($매개변수1, $매개변수2){
@return ...
}@function cal-padding($param1, $param2){
@return calc($param1 / $param2);
}
$width-card: 360px;
$height-card: 240px;
...
.class1 {
padding: cal-padding($width-card, $height-card);
}Svelte로 Bar Chart 제작 시작
레이아웃 제작
number 타입의 배열을 속성으로 받아 막대그래프를 구현하는 과제를 하기 시작했다. 우선 다음과 같이 그래프의 레이아웃을 잡아주었다. 타입스크립트의 slot을 사용하여 index에서 Title을 선언할 때만 나오도록 구현하였다.
<div class="container-graph">
<div class="title">
<slot name="title"></slot>
</div>
<div class="wrapper-contents">
<div class="y-axis">
</div>
<div class="x-axis">
{#each data as value}
<div class="bar">{value}</div>
{/each}
</div>
</div>
</div>범례 제작을 위해 변수 선언
그래프 상의 y축을 그리기 위해, index에서 컴포넌트를 정의할 때 데이터를 숫자 배열로 받아온다. 받아온 배열을 Math.max()와 Math.min()함수를 통해 최댓값, 최소값을 구한다.
export let data: number[];
let numData: number = data.length;
let max: number = Math.max(numData);
let min: number = Math.min(numData);소감
앞서 SASS(SCSS)에 대한 내용을 살펴보다가 해야할 과제인 Bar Chart 제작을 완성하지 못했다. 하지만 SASS는 내가 그동안 다른 웹사이트를 보면서 ‘이렇게 복잡한 스타일 시트를 어떻게 일일히 만들었을까?’에 대한 궁금증을 해결해주었기 때문에 의미있는 일이었다고 생각한다. 웹프레임워크를 배우면서 점점 더 난이도가 올라가고 있음을 체감해 쉽지 않지만 그만큼 더 노력해야겠다고 생각했다.
