이 밑으로 css에 관한 새로운 지식에 관한 나열입니다.
이런 것도 있구나 하고 봐주시게끔 간결한 페이지로 만들었습니다.
$red: #fa5252;
$orange:#fd7e14;
$yellow:#fcc419;
$green:#40c057;
$violet:#7950f2;
@mixin square($size){
$calculated:32px * $size;
width:$calculated;
height:$calculated;
}
.SassComponent{
display:flex;
.box {
background:red;
cursor:pointer;
transition: all 0.3s ease-in;
&.red{
background: $red;
@include square(1);
}
&.orange{
background: $orange;
@include square(2);
}
&.yellow{
background: $yellow;
@include square(3);
}
&.green{
background: $green;
@include square(4);
}
&:hover{
background: $violet;
}
}
}
이런 식으로 사용합니다. 중괄호랑 세미콜론이 있으니 scss입니다.
css의 필요한 부분을 변수화 해서 사용합니다. @import를 이용해서 파일 분할을 하고 사용할 수도 있습니다.
include media를 사용해서 반응형 css를 짜기 용이하고
open color를 사용해서 색도 편하게 추가할 수 있습니다.
. module.css로 저장하면 css module이 적용되는데 모듈화 해서 사용하면 className에
호출할 때 import style , css에서 testCss라는 css 객체일 때 style.testCss로 호출하면 됩니다.
호출된 변수는 고윳값을 가지고 있습니다. classname에 기입했기 때문에 그 엘리먼트는 호출한 css값을 갖습니다.
마지막으로 styld-components라는 라이브러리입니다.
import React from 'react';
import styled , {css} from 'styled-components';
const Box = styled.div`
background:${props => props.colorr || 'blue'};
padding: 1rem;
display:flex;
`;
const App =()=>{
return (
<div>
<Box colorr="green">
</Box>
</div>
);
}
export default App;
react 하면서 ui를 대부분 material 나 antd에서 가져왔습니다. 앞으로도 그런 부분은 있지만
이런 식의 css 스타일링은 유용하면서도 쓸만하다는 느낌이 들었습니다.
props로 받아주는 부분을 보면 colorr이라고 r을 하나 더 붙였습니다. 라이브러리에서 선언되어있는
변수명이 아닌 제가 직접 만든 엘리먼트명이나 props를 설정해서 사용할 수 있다는 점이
꽤 괜찮았네요. media를 이용하면서 반응형 웹을 만들 때도 같이 사용하면 좋겠다는 생각이 들었습니다.
새로운 지식이 되었길 바랍니다.
