SCSS 란?
CSS 전(예비)처리기, CSS PreProcess 라고도 부릅니다. CSS가 동작하기 전에 사용하는 기능으로 웹에서는 표준 CSS만 동작이 가능하지만 프로젝트의 규모가 커질 수록 불편함이 생기는데 이런 점을 확장 SCSS의 확장 기능으로 상쇄 할 수 있습니다.
동작원리는 ?
웹에서는 직접 동작하지 않으니 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다.
전처리기로 작성하고 CSS로 컴파일해서 동작시키는 거죠.
Sass와 SCSS 는 차이점?
Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다. 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다. 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.
Sass:
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px
SCSS:
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}
Sass: Sass Basics
Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s
sass-lang.com
주석
[ Comment ]
.container{
h1 {
color:royalblue;
// background-color: orange; // line comment
/*font-size: 60px;*/ // block comment
}
}여기서 line comment 는 CSS로 컴파일 되는 과정에서 주석 라인 자체 내용까지 사라진다.
block comment 같은 경우는 주석인채로 계속 살아있다.
중첩
[ Nesting ]
<div class="container">
<ul>
<li>
<div class="name">HEROPY</div>
<div class="age">85</div>
</li>
</ul>
</div>.container{
ul{
li{
font-size: 50px;
.name{
color:royalblue;
}
.age{
color:orange;
}
}
}
}일단 CSS 같았으면 상위선택자를 다 하나하나 써줘야해서 불편했을텐데, SCSS 의 중첩으로 구조적으로 가독성좋게 이렇게 한번에 작성해서 편한 것 같다. 초심자때는 한번 작성하고 나서, 컴파일 결과를 미리 보고 확인해보면 좋다고하는데, SassMeister를 추천해주셨다.
SassMeister | The Sass Playground!
SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...
www.sassmeister.com
상위(부모) 선택자 참조
&( ampersand ) : 상위 선택자를 참조합니다.
// SCSS
.btn{
position : absolute;
&.active{
color:red;
}
}
.list {
li{
&:last-child{
margin-right: 0;
}
}
}
// CSS
.btn {
position: absolute;
}
.btn.active {
color: red;
}
.list li:last-child {
margin-right: 0;
}중첩된 속성
선택자처럼 사용하지만, 뒷부분에 :를 붙여주고 중괄호{} 묶어준 뒤에 세미콜론(;)을 붙여줘야한다.
같은 속성의 hyphen(-) 뒤에 이름만 달라지는 부분을 네임스페이스라고 하는데, 같은 이름이 유효한 범위라고 생각하면 된다.
/ SCSS
.box {
padding: {
top: 10px;
bottom: 40px;
left: 20px;
right:30px;
};
}
/CSS
.box {
padding-top: 10px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
}변수
[ Variables ]
앞에 $를 붙여서 변수를 선언가능하고 유효범위 또한 있어 이처럼 맨위에 넣으면 전역변수처럼 사용 가능하고 스코프안에서 변수를
생성하면, 그 안에서만 호출이 가능합니다. 또한 재할당이 가능합니다.
// SCSS
$square: 200px;
.square{
background-color: beige;
width: $square;
height: $square;
}
// CSS
.square {
background-color: beige;
width: 200px;
height: 200px;
}재활용
[ Mixins ]
// SCSS
@mixin center{
display:flex;
justify-content: center;
align-items: center;
}
.container{
@include center;
.item{
@include center;
}
}
// CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container .item {
display: flex;
justify-content: center;
align-items: center;
}반복되는 스타일을 묶어서 변수처럼 사용하는거다. @mixin name {} 으로 선언하고, @include name ; 으로 호출합니다.
// SCSS
@mixin square($size: 100px, $color: black){
width: $size;
height: $size;
background-color:$color;
}
.container {
@include square(200px, tomato);
.item{
@include square($color: yellow);
}
}
// CSS
.container {
width: 200px;
height: 200px;
background-color: tomato;
}
.container .item {
width: 100px;
height: 100px;
background-color: yellow;
}@mixin 안에 값들을 변경하고 싶을때는 JS의 함수처럼 인수를 받아 사용할 수 있다. 그리고 기본값 또한 설정이 가능합니다.
@mixin을 보시면 사이즈를 100px, 색상을 black으로 기본값 잡아놨구, 해당 mixin을 가져올때는 인수를 차례대로 넣어주던가,
원하는 값만 변경하고 싶다면 키워드 인수 방식으로 변경해야한다.
반복문
[ for loop ]
@for $i from 1 through 10 {
.box:nth-child(#{$i}){
width:100px * $i;
}내가 평소에 알고싶었던 기능들이 계속나오네... SCSS에서는 for문이 가능했던것이다 ....
함수
[ Function ]
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
@function ratio($size, $ratio){
@return $size * $ratio
}
.box{
$width: 100px;
width: $width;
height: ratio($width, 1/2);
@include center;
}자바스크립트 함수와 비슷하다. 특이 사항은 따로 없는 것 같다.
색상 내장 함수
[ Color Built-in Function ]
SCSS 에서는 자체적으로 내장된 색상을 다루는 함수들이 있는데 두 색상을 섞거나, 밝게하거나, 어둡게하는 등
사용자 입장에서 편한 함수들이 여럿 있었다.
.box{
$color: royalblue;
width: 200px;
height: 100px;
margin: 20px;
border-radius : 10px;
background-color: $color;
&.mixed {
background-color: mix($color, red); /*색상 섞기*/
}
&.brighten {
background-color: lighten($color, 10%); /*밝기 조절*/
}
&.darker {
background-color: darken($color, 20%); /*어둡기 조절*/
}
&.saturates {
background-color: saturates($color, 10%); /*채도 조절*/
}
&.grayscale {
background-color: grayscale($color); /* 회색화 */
}
}
가져오기
[ Import ]
CSS에서 Import 할때 처럼 가져 올 수 있지만 SCSS 에서는 좀더 간편하게 개편되었다고 볼 수 있다.
/* CSS */
@import url("./style.css");
/* SCSS */
@import "./style", "./main";데이터 종류
[ Data Type ]
$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null : null;
/* 자바스크립트에서 배열데이터와 유사하다. 하지만 list data 라고 명시한다. */
$list: orange, royalblue, yellow;
/* 자바스크립트 객체데이터처럼 key:value 형태로 구성되어있음. 소괄호로 덮어져있고, map이라고 명시한다. */
$map: (
o: orange,
r: royalblue,
y: yellow
);다른 특이점은 없으나 배열과 유사한 .. 거의 똑같은 형태의 데이터가 있는데 list data 라 명시하고,
자바스크립트의 객체데이터같은 형태의 데이터가 있는데 map data라 명시한다.
@each
/* SCSS */
@each $c in $list {
.box{
color: $c;
}
}
@each $key, $value in $map {
.box-#{$key}{
color: $value;
}
}
/* CSS */
.box {
color: orange;
}
.box {
color: royalblue;
}
.box {
color: yellow;
}
.box-o {
color: orange;
}
.box-r {
color: royalblue;
}
.box-y {
color: yellow;
}위 데이터 종류에서 선언했던 list data와 map data에 @each 를 사용 예이다.
참고 사이트 ( Reference )
https://heropy.blog/2018/01/31/sass/