[ CSS ] SCSS 문법

SCSS 문법 

 

1. 주석

/**/ 또는 //   기존 사용하는 css 주석 이외에  javascript 주석도 함께 이용가능하다.

• /**/  : css 변환 후에도 주석이 남아있다.
• // : css 변환 후 주석이 남아있지 않는다.

.container{
    h1 {
        color: $color;
        /*background:#000*/
        // font-size:20px
    }
}

 

 

2. 변수 설정

$명칭 = 값 

유효범위를 설정 할 수 있다. 

 

2-1. 전역변수 

📑 SCSS

$color : royalblue;
.container{
	color: $color;
}

📑 CSS

/* CSS 전역 변수 선언  */
:root {
	--color: royalblue; 
}
.container{color: var(--color);}

 

2-2. 지역 변수

📑 SCSS

.container{
	$color : royalblue;
	color: $color;
}

📑 CSS

div {
	--font-color: #000f22;  /* CSS 지역 변수 선언 */
    color: var(--font-color);   /* CSS 변수 사용 */
}

 

 

3. 중첩 기능 

📑 SCSS

.container{
   > ul {
        li{
            font-size:40px;
            .name {
	            color: roayalblue;
            }
            .age{
    	        color: orange;
            }
        }
    }
}

📑 CSS

.container > ul li {
  font-size: 40px;
}
.container > ul li .name {
  color: roayalblue;
}
.container > ul li .age {
  color: orange;
}

 

 

4. 상위 선택자 참조 : &

📑 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;
}

 

📑 SCSS

.btn {
   &-small {font-size: 10px;}
   &-medium {font-size: 16px;}
   &-large {font-size: 20px;}
}

📑 CSS

.btn-small {
  font-size: 10px;
}
.btn-medium {
  font-size: 16px;
}
.btn-large {
  font-size: 20px;
}

 

 

5. 중첩 된 속성

네임스페이스가 동일한 속성을 묶어서 사용.

📑 SCSS

.box {
   font:{
       weight:bold;
       size:10px;
       family: sans-serif;
   };
   margin{
       top: 10px;
       left: 20px;
   };
   padding{
       top: 12px;
       left: 22px;
       right: 10px;
   };
}

📑 CSS

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
}
.box margin {
  top: 10px;
  left: 20px;
}
.box padding {
  top: 12px;
  left: 22px;
  right: 10px;
}

 

 

6. 연산자

📑 SCSS

.box {
  width: 20px + 20px;
  height: 40px - 20px;
  font-size: 10px * 2;
  margin: (30px / 2); //나누기는 css에서 '/ '가 단축속성으로 사용하는 경우때문에 괄호 없이 불가하다
  margin: 20px % 3;
}

 

📑 CSS

.box {
  width: calc(20px + 20px);
  height: calc(40px - 20px);
  font-size: calc(10px * 2);
  margin: calc(30px / 2);
  margin: calc(20px % 3);
}

 

7. 재활용 @mixin /  @content / @include 

7-1. 기본사용 : @mixin / @include

📑 SCSS

@mixin center {
    display: flex;
    justify-content: center;
    align-item: center;
}

.container {
    @include center;
    .item{
        @include center;    
    }
}

.box {
    @include center;
}

📑 CSS

.container {
  display: flex;
  justify-content: center;
  align-item: center;
}
.container .item {
  display: flex;
  justify-content: center;
  align-item: center;
}

.box {
  display: flex;
  justify-content: center;
  align-item: center;
}

 

7-2. 매개변수와 인수사용

매개변수에서 기본값을 줄수 있다. 따로 인수로 들어가는 값이 없어도 정상 동작이 가능하다.

📑 SCSS

@mixin center($size:100px,$color:tomato) {
    width: $size;
    height: $size;
    background-color:$color;
}

.container {
    @include center(200px, red);
    .item{
        @include center($color: green);    
    }
}

.box {
    @include center(30px);    
}

📑 CSS

.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: green;
}

.box {
  width: 30px;
  height: 30px;
  background-color: tomato;
}

 

7-3. @content  사용

📑 SCSS

@mixin center {
    display: flex;
    justify-content: center;
    align-item: center;
    @content;
}

.container {
    @include center;
    .item{
        @include center;    
    }
}

.box {
    @include center{
        bottom:0;
        left:0;
        margin:auto;
    };
}

📑 CSS

.container {
  display: flex;
  justify-content: center;
  align-item: center;
}
.container .item {
  display: flex;
  justify-content: center;
  align-item: center;
}

.box {
  display: flex;
  justify-content: center;
  align-item: center;
  bottom: 0;
  left: 0;
  margin: auto;
}

 

 

8. 반복문 @for  /  @each

8-1. @for $i from 1 through 반복횟수

📑 SCSS

@for $i from 1 through 4{
    .box:nth-child(#{$i}){ //문자 보관 #{}
        whidth: 100px * $i;
    }
}

📑 CSS

.box:nth-child(1) {
  whidth: 100px;
}

.box:nth-child(2) {
  whidth: 200px;
}

.box:nth-child(3) {
  whidth: 300px;
}

.box:nth-child(4) {
  whidth: 400px;
}

 

8-2. @each  - 리스트에서 사용 

@each $c in $list {}

📑 SCSS

$list: orange,royalblue,yellow; // 색상 배열과 비슷
.box {
    width: 100px;
    color: red;
    position:relative;
}

@each $c in $list {
    .box{
        color : $c;
    }
}

📑 CSS

.box {
  width: 100px;
  color: red;
  position: relative;
}

.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

 

8-3. @each  - map 에서 사용 

📑 SCSS

$map:( // 객체 데이터와 유사 => key: value
    o: orange,
    r: royalblue,
    y: yellow
);

.box {
    width: 100px;
    color: red;
    position:relative;
}

@each $k, $v in $map {
    .box-#{$k}{
        color : $v;
    }
}

📑 CSS

.box {
  width: 100px;
  color: red;
  position: relative;
}

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

 

 

9. 함수 @function

📑 SCSS

@mixin center {
    display: flex;
    justify-content: center;
    align-item: center;
}
// 연산해서 반환하기 위해 사용
@function ratio($size,$ratio){
    @return $size * $ratio;
}

.box {
    @include center;
    $width: 100px;
    width: $width;
    height: ratio($width,1/2);
}

📑 CSS

.box {
  display: flex;
  justify-content: center;
  align-item: center;
  width: 100px;
  height: 50px;
}

 

 

10 색상 내장함수

10-1. mix(색상 1, 색상 2)

색상을 섞어 새로운 색상을 만들어준다.

.box {
    $color : royalblue;
    width:200px;
    height:100px;
    margin: 20px;
    border-radius:10px;
    background-color:$color;
    &.built-in{
        background-color: mix($color,red);
    }
}

 

10-2.밝기 변경

lighten(색상, 퍼센트%)   |  darken(색상, 퍼센트%)

첫번째 인수의 색상을 퍼센트 만큼 밝게 또는 어둡게 변환

 

10-3. 채도 변경

saturate(색상, 퍼센트%)  |  desaturate(색상, 퍼센트%)

첫번째 인수의 색상을 퍼센트 만큼 채도 높게 또는 낮게 변경

 

10-4. grayscale(색상)

해당 색상의 그레이 색상으로 변경

 

10-5. invert(색상)

색상 반전

 

10-6. rgba(색상,투명도)

rgba(red,.5)

색상을 투명하게 변경

 

11. 가져오기

📑 SCSS

@import "./sub.scss";
@import "./sub"; // 확장자 생략으로 가져 올 수 있음
@import "./sub","./sub2"; // 확장자 생략하고 여러개의 파일을 가져올 수 있음

📑 CSS

@import url("./sub.scss");

 

 

12. 데이터 종류

📑 SCSS

$number: 1; //.5 100px, 1em
$string: bold; // relative, "이미지 경로"
$color: red; // 색상 blue, #fff , rgba(0,0,0,.1)
$boolen: true; //false
$null: null;
$list: orange,royalblue,yellow; // 색상 배열과 비슷슷
$map:( // 객체 데이터와 유사 => key: value
    o: orange,
    r: royalblue,
    y: yellow
);

.box {
    width: 100px;
    color: red;
    position:relative;
}

 

 

 

※ SCSS 와 CSS 변경 내용을 확인할 수 있는 사이트

SassMeister | The Sass Playground!