SCSS문법 공부

SASS, SCSS

CSS를 편하게 쓰도록 도와줌
SCSS는 SASS보다 css와 호완성이 뛰어남

SCSS파일 생성, 작성 후 app.js파일에서 import해준다.
하지만 아마 브라우저에서는 에러가 날것이다.
node-sass패키지 install이 필요하다.

yarn add node-sass@4.14.1 open-color sass-loader classnames
#이코드를 bash창에 붙여넣는다.

패키지 설치 후엔 ctrl+c를 눌려 종료시켰다가 다시 yarn start해서 열어준다.

css입힐때 정리:
1. scss_ex.scss파일 생성 후 css파일 내용 그대로 붙여넣기
2. App.js에서 import ./scss_ex.scss
3. 에러나면 yarn add node-sass open-color sass-loader classnames node창에 명령해서 설치해주기
4. 패키지 설치 후엔 ctr+c종료 후 다시 yarn start

SCSS 문법

sassmeister.com에서 SASS문법을 사용했을때 css로 어떻게 나타나는지 보여준다.
좋은소식은 SCSS 기본 문법은 CSS와 거의 비슷!!

• Nesting 가능
  :하나의 태그로 묶어주는 것

div {
	p {
		color: #888888;
		font: {
		    family:sans-serif; 
		    size: 14px;
		}
	}
	
	img {
	    width: 400px;
	}
}

• 상위 요소 이어쓰기는 "&"로! 클래스명 등, 글자도 이어쓸 수 있다.

//scss
div {
  background-color: green
  &:hover { background-color: blue }
}

.div {
  background-color: green
 &_blue { background-color: blue }
}

• 문자열 치환(=변수 사용 가능)

$defaultSize: 20px;
$className: blue;

p{
	font-size: #{$defaultSize};
	&.#{$className} {color: #{$className}}
}

컬러를 하나하나 바꿔줄 필요없이 변수 하나만 색을 적용시켜 전체다 변경 시켜줄 수 있다.

styled-components

styled 컴포넌트를 사용하면 class이름 짓기때문에 힘들어하지 않아도 된다고 한다. 아주 유용하겠구만🧐

상위 폴더로 이동 명령어
cd ..

새로운 프로젝트 생성
yarn create react-app [프로젝트 이름]

새로운 프로젝트 폴더로 들어가서 프로젝트 시작
cd [프로젝트 이름(=폴더명)]

styled-components패키지 설치하기
yarn add styled-components

App.js 파일에서 styled를 import해준다.

import styled from 'styled-components';

const MyStyled(변수명)이라는 styled 컴포넌트를 생성하고(styled. + [이 스타일을 입힐 element]) + ``(백틱) 백틱 사이엔 css와 동일하게 넣어주면된다.

작성된 컴포넌트는 위에서 다시 불러줘야한다.

function App() {
  return (
    <div className="App">
      <MyStyled>hello React!</MyStyled>      
    </div>
  );
}

props 받아오기

styled 컴포넌트도 데이터를 받아 올 수 있다.

function App() {
  return (
    <div className="App">
      <MyStyled bgColor={"red"}>hello React!</MyStyled>      
    </div>
  );
}

const MyStyled = styled.div`
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
  &:hover: {
    background-color: #ddd;
  }
  background-color: ${(props) => (props.bgColor)}; //여기서 props 불러와줌
`;

if문을 대신할 삼항연산자

background-color: ${(props) => (props.bgColor? "[여기 참일때 넣을 값(red)]" : "[여기 거짓일때 넣을 값(yellow)]")}; 

functionApp에서 bgColor가 선언되어있지않다면 거짓(yellow)의 값, 현재는 red로 되어있기때문에 참인 값이 나올 것이다.

[본 내용은 스파르타 코딩클럽 리액트 강의와 강의자료를 참고하여 작성 된 내용입니다.]