꽤 오래전부터 듣기만 했던 scss와 styled-component에서의 mixin을 한번 알아보고자 정리를 해보았다!
사실 10개월간 회사에서 styled-component를 쓰면서 믹스인을 쓴적은 없지만 이전부터 css를 간결하게 써보고 싶었던 욕구를 해소해보고 싶어서 강의를 들으면서 오늘의집을 클론코딩 해보면서 mixin,@extend 적용해보는 연습을 해봤다. (mixin 부분만 보고 싶으면 중간 3번부터 스킵해서 읽는것을 추천합니다!)
사실 스타일드 컴포넌트를 주변에서 많이 쓰고 있지만, 그 외에도 html,css를 처음 배웠을 때의 눈에🥰 하나하나 보일때마다 신기해했던 초심으로 돌아가고 싶었던 생각 때문에 scss로 한번 초심 찾기 프로젝트를 해보고 있다.
Sass(Syntactically Awesome StyleSheets)
=> 문법적으로 멋찐! 이라는 뜻✨
CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.
Sass와 SCSS는 거의 같은 문법이지만 {}(중괄호)와 ;(세미콜론)의 유무가 차이가 있다.
CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
실습한 코드를 보며 바로 하나씩 사용법을 소개하러 고고리~
install node-sass
$ npm install -g node-sass
옵션으로 --watch 혹은 -w를 입력하면, 런타임 중 파일을 감시하여 저장 시 자동으로 변경 사항을 컴파일해요.
$ node-sass --watch scss/main.scss public/main.css
변수 이름 앞에는 항상 $를 붙여서 사용할 수 있다.(이건 너무 쉽쥬?!.ㅎ. 그래도 간단하게 소개해보아요)
예를 들면 컬러들을 constants 변수로 관리 할수 있겠죠?!
$black: #000;
$dark: #191a20;
$primary: #3f4150;
$secondary: #8c8d96;
$tertiary: #b2b3b9;
$border: #e0e2e7;
$backgroud: #f7f8fa;
$white: #fff;
디테일한 부분(변수 유효범위-{}스코프,재할당)부분들은 저보다 더 잘 정리한 글이 많아서 패스하겠습니다!
https://heropy.blog/2018/01/31/sass/ 여기서 확인 가능!
for문과 비슷한 형태로 쓸수 있는 신기한 문법. 변수 $i를 사용하고 through 또는 to를 쓸수 있다.
@include responsive(Desktop) {
max-width: $lg-max-container;
padding: 0;
@for $i from 1 through $lg-columns {
.col-lg-#{$i} {
width: ($lg-unit + $gutter) * $i;
}
}
}
@for $i from 1 to 3 {
.to:nth-child(#{$i}) {
width : 20px * $i
}
}
믹스인은 선언하고 여러 줄의 코드를 재활용할 수 있습니다. 선언할 때는 @mixin 이라고쓰고 믹스인을 쓰겠따! 이렇게 선언하고, 쓰는 곳에서는 @include를 쓰면 되요~
//선언
@mixin text-style-12($color: false) {
font-size: $font-size-12;
line-height: $line-height-12;
letter-spacing: $letter-spacing-12;
color: $color;
@if (type-of($color) == color) {
color: $color;
}
}
//사용
p {
@include text-style-12;
}
이런식으로 폰트 사이즈 별로 mixin을 줄 수 있습니다!
그리고 위에서 처럼 인자도 넘겨줄 수 있습니다. color값이 없으면 초기값 false로 줄 수 있고, type-of라는 내장 함수로 color값일 때만 color로 전달 될수 있도록 할 수 있어요! (왜냐면 실수로 color: 13px 이런값이 들어갈 수 있기 떄문에!)
import { css } from "styled-components"
const Navigation = styled.nav`
position: fixed;
left: 0;
top: 0;
right: 0;
${Sticky}
`;
const Sticky = css`
position: fixed !important;
background-color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.11);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
transition: all 0.6s ease-in-out;
color: black;
`;
//
const RingVariant = (radius, stroke = "10") => css`
position: absolute;
border-radius: 50%;
height: ${radius * 2}px;
width: ${radius * 2}px;
border: ${stroke}px solid rgba(0, 0, 0, 0.5);
`;
예를 들어 flex 센터 삼대장을 mixin으로 만들면 재사용 할 수 있어서 좋다!
flex-direction: ${direction};
align-items: ${align};
justify-content: ${justify};
스타일드 컴포넌트에서 사용할 때는 보통
export const mixins = {
// flex
flexBox: (direction = 'row', align = 'center', justify = 'center') => `
display: flex;
flex-direction: ${direction};
align-items: ${align};
justify-content: ${justify};
`,
src/styles/theme.js 에서 export 해주고 theme에서 가져다가 쓰면 된다.
${({ theme })} => theme.flexBox('row', 'center', 'flex-start');
사실 작년에 styled-component를 처음 썼을 때 mixin을 scss에서의 mixin보다 먼저 접했기 때문에 직접 적용해보기가 어렵게 느껴졌었는데, 스타일드 컴포넌트가 있기 이전에 scss에서의 mixin을 써보고 나서 써보니 어려운 부분도 아니였는데 어렵게 느꼈구나 싶었다.
if문 처럼 조건문 처리도 가능하다!
@mixin postion-center($type: absolute) {
@if ($type == fixed or $type == absolute) {
position: $type;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
이 외에도 다양한 내장 함수와 기능이 있지만 추가로 placeholder 선택자만 더 소개하고 마무리 하려고 한다.
믹스인 처럼 여러줄의 공통 스타일링을 선언해주고 재사용한다는 점에서는 같지만 인자값을 넘겨 주지않고 일반적으로 믹스인보다는 조금 더 좁은 범위에서 재사용 한다는 점이 차이가 있다.
%선택자명 으로 선언하고 사용하는 곳에서 @extend로 쓸수 있다.
%tag-base {
// 공통 스타일
@include text-style(12);
height: 20px;
padding: 0 6px;
font-weight: 700;
border-radius: 4px;
}
.tag-red {
@extend %tag-base;
color: $white;
background-color: $red;
}
더 많은 사용법은 https://sass-lang.com/guide 공식문서를 참고!
현재 가장 많이 쓰고있는 css방법론인 스타일드 컴포넌트도 좋지만, if문 for문과 같은 문법들이 직접적으로 느낄 수 있었던 scss도 매력을 느낄 수 있었다. (물론 class를 이용한 조건 처리는 단점이긴 하지만)
유행을 이유없이 따라가는 것 보다는 역시 발전된 역사(?) 히스토리를 느끼면서 하나씩 배워가는 오...이런 발전을 거쳐왔구나! 느끼며 배워보는 것도 기억에 오래남고 더 잘 이해가 되어서 좋은 것 같다!
오랫만에 벨로그를 써보니 감회가 새롭다!
아직 많이 부족하지만 조금씩 조금씩 꾸준히 다시 해보자 다짐하며 오늘도 끄적여 본다!