티스토리 뷰
Sass란??
Sass 공식 문서를 살펴보면 'CSS에 우아함을 더해주는 확장 언어이다.' 라고 스스로를 묘사하고 있습니다.
CSS는 배우기에는 매우 간단하지만, 여러 스타일을 지정하다보면 코드가 지저분해지기 쉽습니다. 코드의 양이 많을 수록 더욱 그렇죠
하지만, Sass는 최대한 CSS의 기능을 유지하면서 부족한 부분만을 도와줍니다 그래서 Sass는 CSS를 사용하던 사람들이 배우기에 어렵지 않습니다. 그저 몇 가지 기능만 추가해서 사용하면 됩니다.
Sass or SCSS
Sass라고 검색을 하면 보통 SCSS도 같이 검색이 됩니다. 두 가지 모두 같은 기능을 갖고 있습니다. 차이는 그저 미관상의 문제인데, Sass는 스타일을 적용할 때 중괄호, 세미콜론 그리고 들여쓰기에 의존하여 간결하고 짧은 코드를 작성하게 합니다. SCSS는 Sass와 CSS의 차이를 좁히기 위해 등장했는데, CSS와 같은 작성법을 사용하면서 Sass의 기능만을 가져온 것입니다. (들여쓰기 같은 것들을 사용하지않는...)
Sass를 사용한 스타일 가이드
스타일 가이드는 절대적인 것은 아니며 협업을 하기 위한 도구이다.
변수: 한 번이상 사용되는 색 or 값은 의미있는 이름을 붙여 변수에 저장하여 사용하는 것이 좋습니다.
$sass-pink: hsl(330, 50%, 60%);함수(function, mixin): 중복되는 스타일이 있다면 묶어서 mixin or function을 사용하는 것도 좋습니다.
/// 색을 약간 밝게 한다
/// @access public
/// @param {Color} $color - 밝게 만들려는 색
/// @param {Number} $percentage - 반환될 색 내 `$color`의 백분율
/// @return {Color}
@function tint($color, $percentage) {
@return mix(white, $color, $percentage);
}들여쓰기: 위 처럼 정의한 것들을 함께 사용하면서 코드를 깔끔하게 묶기위해 들여쓰기도 사용해보세요.
.foo, .foo-bar,
.baz {
$length: 42em;
@include ellipsis;
@include size($length);
display: block;
overflow: hidden;
margin: 0 auto;
&:hover {
color: red;
}
@include respond-to('small') {
overflow: visible;
}
}선택자 내포(Nesting): Sass가 제공하는 기능 중 많은 개발자들이 심하게 남용하는 기능 중 하나 입니다. 선택자 내포는 짧은 선택자들을 서로 포개어 넣음으로써 긴 선택자를 산출해 내는 방식을 제안합니다.
.foo {
.bar {
&:hover {
color: red;
}
}
}위 코드는 아래 css와 동일한 코드 입니다.
.foo .bar:hover {
color: red;
}이 외에 더 많은 내용이 궁금하신 분들은 [https://sass-guidelin.es/ko/] 이 사이트를 참고해보세요 정리가 아주 잘되어 있어서 저도 많이 보고 있답니다.
