개발야옹

• 일반 CSS
• Sass
• CSS Module
• styled-components

Sass

확장자 : .scss, .sass

import : import '저장경로';

.scss => 중괄호 세미콜론 사용

.sass => 중괄호 세미콜론 사용 X

Sass도 CSS Module로 사용이 가능하다. => 확장자 .module.scss

Sass 를 사용하기 위해서는 node-sass library를 설치해줘야 한다. 

설치

yarn add node-sass

Sass는 변수 정의를 허용한다. 변수는 $로 시작하며 변수 할당은 콜론 ( : ) 으로 마무리한다.

scss 스타일

$primary-color : #ffffff;
$primary-background : #efaba2;

.content{
	background : $primary-background;
    color : $primary-color;
}

sass 스타일

$primary-color : #ffffff
$primary-background : #efaba2

.conten{
	background : $primary-background
  	color : $primary-color

컴파일 결과

.content{
	background : #efaba2;
    	color : #ffffff;
}

CSS Module

확장자 : .module.css

import : import styles from '저장 경로';

css를 불러와서 사용할 때 className을 고유한 값, 즉 [ 파일 이름 ]_[ 클래스 이름 ]_[ 해시값 ] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지한다.

확장자를 .module.css 로 저장을 하면 자동으로 CSS Module이 적용된다.

해당 클래스는 스타일을 직접 불러온 컴포넌트 내부에서만 작동한다. 

import하고 styles를 console.log로 찍어보면 { key : value } 형태로 불러와 지는 것을 확인할 수 있다.

[ + ] classnames

classnames는 props값에 다라서 다른 style을 주기 쉽게 하기 위한 라이브러리이다. 

CSS Module을 사용할 때 classnames 라이브러리를 함께 사용하면 여러 클래스를 적용하고, 조건부를 설정할 때 편리하다.

설치

yarn add clssnames

classnames 간단한 사용방법

import cn from 'classnames';

cn( 'one' , 'two' ); // = "one two"
cn( 'one' , { two : true } ); // = "one two"
cn( 'one' , { two : false } ); // = "one"
cn( 'one' , [ 'two', 'three' ] ); // = "one two three"

const myClass = "hello";
cn('one', myClass, { myCondition : true } ); // = "one hello myCondition"

styled-components

import : import styled from "저장 경로";

설치

yarn add styled-components

CSS in JS Library로, styled-components를 대체할 라이브러리로는 emotion이 있다.

JS file 안에 style을 선언하는 방식이다. 

사용방법

import styled from 'styled-components';

const Title = styled.h1`
	font-weight : 800;
    color : lightgreen;
`;

{...}

function App(){
	return(
    	<div>
        	<Title>안녕하세요!</Title>
        </div>
    )
}

export default App;

※ 만약 props를 사용하는 경우 styled-components에서 css를 불러와 Tagged 템플릿 리터럴을 사용해 주어야 한다.

[ + ] 반응형 디자인 media query 사용

참고 :

리액트를 다루는 기술 ( 책 )

https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)

& Ampersand

상위 선택자 참조.

ex 1)

.btn {
	position : absolute;
}

.btn.active {
	color : blue;
}


/* Ampersand 활용 */

.btn{
	position : absolute;
    
    // & 가 btn으로 치환된다. 
    &.active{
    	color : blue;
    }
}

ex 2)

.list li : last-child {
	margin : 20px;
}

/* Ampersand 적용 */
.list {
	li{
    	// &가 li로 치환된다. 
    	&:last-child{
    		margin : 20px;
        }
    }
}

출처 :

https://sso-feeling.tistory.com/232

https://velog.io/@jch9537/CSS-SCSS-SASS