src/SassCom.scss
//훨씬 더 쉬운 sass
//변수 사용하기
$red: #FF0000;
$orange: #FF5E00;
$yellow:#FFE400;
//@mixin - 스타일 정의
// @mixin 믹스인 이름 {
// //CSS 스타일 내용
// }
// //@include - 믹스인 호출
// @include 믹스인 이름
//class 대신 mixin 사용하면 재사용을 줄일 수 있고 더 편함.
@mixin square($size){
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
}
// Components: anything reusable such as buttons, navbars, cards etc.
.SassCom{
display: flex;
.box{
background: red;
cursor: pointer;
transition: all 0.3s ease-in;
// .red 클래스가 .box와 함께 사용되었을 때
&.red{
background: $red;
@include square(1);
}
&.orange{
background: $orange;
@include square(2);
}
&.yellow{
background: $yellow;
@include square(3);
}
&:hover{
background: black;
}
}
}
src/SassCom.js
import './SassCom.scss';
const SassCom=()=>{
return(
<div className="SassCom">
<div className="box red"/>
<div className="box orange"/>
<div className="box yellow"/>
</div>
);
}
export default SassCom;
src/styles/util.scss
$red: #FF0000;
$orange: #FF5E00;
$yellow:#FFE400;
@mixin square($size){
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
}
믹스인 만들기! 재사용되는 스타일 블록을 함수처럼 사용 가능하다.
src/SassCom.js
@import './styles/utils.scss';
.SassCom{
display: flex;
.box{
background: red;
cursor: pointer;
transition: all 0.3s ease-in;
// .red 클래스가 .box와 함께 사용되었을 때
&.red{
background: $red;
@include square(1);
}
&.orange{
background: $orange;
@include square(2);
}
&.yellow{
background: $yellow;
@include square(3);
}
&:hover{
background: black;
}
}
}
git commit 후
$yarn eject
config/webpack.config.js
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
}).concat({
loader: require.resolve('sass-loader'),
options: {
sassOptions: {
includePaths: [paths.appSrc + '/styles'],
},
additionalData: `@import 'utils';`
}
}),
sideEffects: true,
},
$yarn add open-color include-media
화면 가로 크기가 768px 미만이 되면 배경색 어둡게 바꾸기
src/styles/util.scss
@import '~include-media/dist/include-media';
@import '~open-color/open-color';
$red: #FF0000;
$orange: #FF5E00;
$yellow:#FFE400;
@mixin square($size){
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
}
src/SassCom.js에 추가
background: $oc-gray-2;
@include media('<768px'){
background: $oc-gray-9;
}
styled-components
import styled, {css} from 'styled-components';
//이렇게하면 따로 css나 scss 파일 확장해서 사용할 필요 없음.
const Box = styled.div`
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
`;
const Button = styled.button`
background: white;
color: black;
border-radious: 4px;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 1rem;
font-weight: 600;
&:hover{
background: rgba(255, 255, 255, 0.9);
}
${props => props.inverted &&
css `
background: none;
border: 2px solid white;
color: white;
&: hover {
background: white;
color: black;
}`
};
& + button {
margin-left: 1rem;
}
`;
const StyleComponent = () => (
<Box color='black'>
<Button>Hi</Button>
<Button inverted={true}> 테두리만 </Button>
</Box>
);
export default StyleComponent;
'FE > React & TS' 카테고리의 다른 글
Redux를 활용한 투두리스트 구현 (0) | 2023.10.10 |
---|---|
Todo app (0) | 2023.07.21 |
[REACT Movie App part-two] React-router / react-router-dom (0) | 2023.05.11 |
[REACT Movie App part-one] fetch / async / await / axios / Cannot read properties of undefined (reading 'map') 오류 (0) | 2023.05.11 |
[REACT] Axios (0) | 2023.05.11 |