STYLE SHEET/Sass

React에서 Sass ...rest props 사용 방법

onClick={() => { console.log("클릭"); }} 만약에 이렇게 onClick을 작성해도 버튼 기능은 활성화되지 않습니다 그 이유는 Button.js에서 props를 생성 후에 받아와야합니다 즉 onClick를 활성화 하려면 Button.js에서 추가적으로 props설정 후 이벤트를 활성화합니다 function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove, }) {children} 하지만 만약 모든 이벤트에 대해 설정하는건 비효율적으니 ...rest를 사용합니다 먼저 Props와 button classNames에서 두개를 없애고 ...rest로 바꿔줍니다 function Button({ childre..

React에서 Sass 추가 Props 설정

기존 props에서 outline, fullWidth props를 추가 Button.js에서 추가 function Button({ children, size, color, outline, fullWidth }) outline, fullWidth는 조건부이며, true or false에 따라 스타일에 들어갑니다 객체로 생성해줍니다 className={classNames("Button", size, color, { outline, fullWidth, })} 만약 props로 받아온 outline 값이 true라면 className에 outline값이 들어가게됩니다 boolean은 값이 없으면 undefined고 undefined라면 classNames에서 처리하지 않습니다 Button.scss의 mixin..

React에서 Sass color props 구현

color props 기능을 통해 버튼에 각각 다양한 색을 입혀보겠습니다 function Button({ children, size, color }) 기본 색상은 blue로 지정하겠습니다 Button.defaultProps = { size: "medium", color: "blue", }; Button.scss에서 변수를 추가 했습니다 $pink: #f783ac; $violet: #9775fa; Button.js에서 classNames의 color 값에 blue가 들어왔을 때 주면 되니까 & 연산자를 통해 자기 자신을 선택하는 blue를 만들어줍니다 {classNames("Button", size, color)} 아래 코드처럼 넣어줍니다 &.blue { background: $blue; &:hover {..

React에서 Sass props 기능 구현

버튼의 다양한 사이즈를 선택할 수 있게 구현 Button.js에 size라는 props 생성 function Button({ children, size }) large, medium, small 총 3가지 값을 설정할 예정입니다 이렇게 하기 위해선 템플릿 리터럴을 사용합니다 지정한 size props가 large면 large className이 만들어지고 medium이면 medium className이 만들어지게끔 설정합니다 만약 넣어야 할 props가 많아지면 코드 가독성이 떨어지고 이해하기 어려우니 classNames 라이브러리를 사용합니다 classNames 라이브러리란, 버튼에 조건부 스타일링을 적용해야할 때 쉽게 적용이 가능합니다 설치 $ npm add classnames classNames를 ..

React에서 Sass 사용하는 방법

리액트 설치 후 경로에서 node-sass 설치 $ yarn add node-sass 해당 라이브러리는 sass로 작성된 코드를 css로 변환해줍니다 src 폴더에 components 폴더 생성 Button.js 파일 생성 import React from "react"; function Button() { return ; } export default Button; 추가 임포트 import './Button.scss'; div 요소 button으로 바꾸기 return Button 내부에 children 추가하고 랜더링 function Button({ children }) { return {children}; } className 설정 {children}; components 폴더에 Button.scss ..

SASS - @if

조건문을 이용해서 각각 article 값을 바꿔보겠습니다 현재 남아 있는 코드 중 기본값만 냅두고 다 지우겠습니다 @charset "UTF-8"; @import "reset"; @import "mixin"; $bgBody: #eee; $bgItem: #fff; $colorH2: aqua; $interval: 0.2s; body { background: $bgBody; } .wrap { width: 100%; border: 2px solid #bbb; padding: 100px; display: flex; justify-content: center; perspective: 600px; .item { width: 300px; padding: 30px; background: $bgItem; margin: 50..

SASS - @each

@for문 보다 좀 더 다양하고 기능 범용성이 있는 @each에 대해 알아보겠습니다 @for문은 반복문이 간결하고 쉽지만 숫자만 반복됩니다 &:nth-of-type(1) { a { @include button($bg: pink); } } &:nth-of-type(2) { a { @include button($bg: aqua); } } &:nth-of-type(3) { a { @include button($bg: orange); } } &:nth-of-type(4) { a { @include button($bg: lightgreen); } } 여기 값을 보면 각각 컬러값이 다르고 순서값으로 활용하기 애매합니다 하지만 @each로 처리가 가능합니다 먼저 서로 리스트가 다른걸 그룹화 시킬 수 있습니다 styl..

SASS - @for 반복문 사용법

반복문을 이용해서 마우스를 올렸을 때 부드럽게 시간차가 발생하며 아래에서 위로 올라오는 모션을 만들어보겠습니다 먼저 만약에 아래 코드 괄호에 아무런 값이 들어가 있지않으면 에러가 발생합니다 &:nth-of-type(1) a { @include button(); } 그러므로 기본값으로 대체할 곳이 필요한데 이때 mixin 함수에 기본값을 적용해놓습니다 @mixin button($wid: 100px 이렇게 되면 괄호에 아무것도 적지 않더라도 기본적으로 button은 100px을 가지고 있습니다 추가적으로 $bg도 넣어줍니다 그렇다면 background도 인수 값으로 변경합니다 @mixin button($wid: 100px, $bg: gray) { display: block; width: $wid; heigh..