React Component Styling 중 Sass(Scss)
sass(scss)는 Syntactically Awesome Style Sheets의 약자로 문법적으로 어~섬한 스타일 시트다.
sass(scss)는 복잡한 작업을 쉽게 해주고 코드의 재활용성과 가독성을 up시켜주며 유지보수를 쉽게 해준다.
CSS pre-processor로 CSS 전처리기이다.
확장자는 .sass / .scss 이고 개발자가 개발할때는 .sass / .scss 확장자 파일로 코드를 작성하고
컴파일러를 통해 브라우저가 읽을 수 있는 css로 변환된다.(브라우저는 .sass / .scss 읽지 못함)
.sass는 문법이 간결한 편이다.
.scss와의 차이점은 {}와;를 쓰지않고 들여쓰기로 선택자의 유효범위를 구분한다.
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px).scss는 css와 완전한 호환을 이룬다.
css처럼 {}로 선택자의 유효범위를 구분하며 ;도 사용한다.
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}중첩
.section {
width: 100%;
.list {
padding: 20px;
li {
float: left;
}
}
}& 키워드를 사용해서 상위 선택자를 참조하여 치환할 수 있다.
.btn {
position: absolute;
&.active {
color: red;
}
}
.list {
li {
&:last-child {
margin-right: 0;
}
}
}중첩된 속성
.box {
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
margin-top: 10px;
margin-left: 20px;
padding-bottom: 40px;
padding-right: 30px;
}.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
}
margin: {
top: 10px;
left: 20px;
}
padding: {
bottom: 40px;
right: 30px;
}
}변수
사용하고자 하는 변수명 앞에 $ 키워드 사용
내용 추가 및 보완 예정