01_주간 학습 요약

제로베이스를 시작한지 일주일이 지났다.
아는 내용도 있었고, 몰랐던 부분도 제법 있었다고 생각된다.
우선 이번 한주동안 학습한 내용은 크게 나누어 보았을 때,
HTML, CSS, CS이론, Git/Github 로 나눌수 있다.
무엇을 적어야할지 고민이 되는데, 개인적으로 그동안 외면하였던 css에서 sass에 관한 내용을 정리하려고 한다.

Sass

css가 가지고 있지 않은 여러 유용한 기능을 제공해주는 일종의 확장 언어!

sass ? scss ?

sass에 대해서 공부하다 보면 scss라는 용어도 심심치 않게 등장한다. 결론적으로 말하자면, 개인의 기호의 차이이므로 입맛에 맞는 것을 사용하면 된다. 풀네임만 봐도 큰 차이가 없다는 것을 알 수 있다. sass는 syntactically awesome style sheets로, 문법적으로 어썸한 스타일 시트라는 뜻이고, scss는 sassy CSS 즉, 짱 멋진 CSS라는 뜻이다. (???)

sass의 경우, 들여쓰기에 따라서 중첩을 사용하고, 줄 바꿈을 통해 속성을 구분하지만, scss의 경우 중괄호를 통해 중첩을 표현하고, 세미콜론을 사용하여 속성을 구분한다. 때문에, 나의 경우, css와 유사한 형식을 가진 scss가 좀 더 사용하기에 편리하다고 생각한다.

몇 가지 특징

1. 변수(variable)

$변수명: css 속성값

css의 속성값을 변수에 할당한 후에, 해당 속성이 필요한 곳에서 재사용 할 수 있다.

2. 중첩(nesting)

/css
body div {
	margin: 0;
    padding: 0;
    display: flex
}

body section {
	margin: 10 auto;
    background-color: #fff;
}

/scss

body {
	div {
    	margin: 0;
    	padding: 0;
    	display: flex
    }
    section {
    	margin: 10 auto;
    	background-color: #fff;
    }
}

기존 css와 비교하여 가독성을 높여서 작성할 수 있다.

3. 믹스인(mixin)

@mixin 기본폰트 {
	스타일 지정
    e.g. font-size: 12px
}

title {
	@includes 기본폰트
}

@mixin 믹스인이름 으로 작성하며 해당 mixin 에 여러 특정 속성들을 작성한 후에, 이러한 속성들을 적용하기 위해서 @ncludes 뒤에 해당 믹스인의 이름을 작성하면 해당하는 특정 속성을 적용할 수 있다.

4. 함수(function)

@function 함수명($매개변수) {
	@return 값;
}

e.g.
@function 뭐든지열배로($매개변수) {
	@return $매개변수 * 10;
}

.img {
	width: 뭐든지열배로(10px);
    height: 뭐든지열배로(10px);
}

이후 배울 js와 유사하게 함수와 같이 동작한다. mixin과 유사해 보이지만 가장 큰 차이점은 mixin은 사용 시, 여러가지 스타일 값이 적용되지만, function의 경우 리턴되는 값이 적용(반환)된다는 점이다.