[SCSS] 기본 문법 및 사용 방법

🔥 주의점

- 큰따옴표 사용! (convention 때문과 혹시 모를 오류)

 

 

추천 사이트

scss 가 css 로 변환된 코드를 바로 확인할 수 있는 사이트

https://www.sassmeister.com

SassMeister | The Sass Playground!

- scss 공식 사이트 모듈

https://sass-lang.com/documentation/modules

Sass: Built-In Modules

 

Sass: Built-In Modules

주석

// css로 컴파일하면 사라짐

/**/ 컴파일해도 사라지지 않음

 

중첩

/*css*/
.container ul li{
 font-size: 40px;
}
.container ul li .name{
 color: royalblue;
}
.container ul li .age{
 color: orange;
}

/*scss*/
.container{
 ul{
   li{
     font-size: 40px;
     .name{
       color: royalblue;
     }
     .age{
       color: orange;
     }
   }
 }

상위 선택자 참조

&: 엠퍼센드가 포함되어 있는 범위의 상위선택자를 참조 / 상위선택자가 엠퍼센드로 치환

/*css*/
.list li:last-childI
          margin-right: 0;
          
/*scss*/
.list{
 li{
    &:last-child{
      margin-right: 0;
    }
 }
}

중첩된 속성

네임스페이스 : 이름은 통해 구분 가능한 범위를 만들어내는 것 (일종의 유효ㅂ머위를 지정하는 방법)

/*css*/
.box{
/*font- 의 네임스페이스*/
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 30px;
}

/*scss*/
.box{
  font:{
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
 margin:{
    top: 10px;
    left: 20px;
  };
  padding:{
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  };
}

기본값 !default

기본값을 지정해두지만 사용자가 새로 지정하면 그 값을 사용하라

$primary: red; !default

.serch{
	$primary: blue;
	background-color: $primary; /*blue*/
  }

변수 (Variables)

$변수명: 값;

블럭레벨 유효범위가 있음

/*css*/
.container{
position: fixed;
top: 200px;
/*size의 값이 재할당 되었기 떄문에 바뀐 값으로 설정*/
left: 100px; 
}
.container .item{
width: 200px;
height: 200px;
transform: translateX(200px);
}

/*scss*/
$size: 200px;
.container{
    position: fixed;
    top: $size;
    .item{
   		$size: 100px;
        width: $size;
        height: $size;
        transform: translateX($size);
    }
	left: $size;
}

산술 연산

 나누기 기호인 / 는 font 단축속성의 구분자로 사용함으로 아래의 방법을 써야함

1 () 소괄호로 감싸기

2 변수를 사용

3 다른 연산자와 사용하기

/*css*/
div{
 width: 40px;
 height: 30px;
 font-size: 20px;
 margin: 11px;
 padding: 6px;
}

/*scss*/
div {
    sizer 30px;
     width: 20px+20px;
    height: 40p
    font-size: Nopx*2;
                    10px;
    margin: (10px+12px)/2; ///
    padding: 20px%7;
    }

다른 단위 산술연산

width: calc(100%- 200px)

: 100% 에서 200px 를 뺀 만큼의 너비

@mixin

: 여러 줄의 코드를 한번에 담아 재사용

vs 변수 하나의 변수에는 하나의 값만 사용

 

생성: @mixin 이름

사용: @ include 이름

/*css*/
.container{
 display: flex;
 justify-content: center;
 align-items: center;
}
.container.item{
 display: flex;
 justify-content: center;
 align-items: center;
}
.box{
 display: flex;
 justify-content: center;
 align-items: center;
}

/*scss*/
@mixin çenter{ //생성
    disptay flex;
    justify-content: center;
    align-items: center;
}
.container{
   @include center; // 사용
     item{
        @include center;
    }
}
.box{
    @include center;
}

인수 사용

/*css*/
.container{
 width: 200px;
 height: 200px;
 background-color: tomato;
}
.container .item{
 width: 100px;
 height: 100px;
 background-color: tomato;
}
.box{
 width: 100px;
 height: 100px;
 background-color: tomato;
}
/*scss*/
@mixin box ($size){
   width: $size;
   height: $size;
   background-color: tomato;
}
.container{
   @include box(200px)
    .item{
       @include box(100px);
    }
}
.box{
   @include box(100px);
}

인수의 기본값 지정

- 기본값을 사용할 경우 인수 생갹

- 키워드 인수: 인수는 매개변수의 순서대로 매칭되기 때문에 값을 넣을 인수를 키워드로 직접적으로 지정해줌

/*scss 기본값 지정*/
@mixin box ($size: 80px, $color: tomato){
   width: $size;
   height: $size;
   background-color: tomato;
}
.container{
   @include box(200px,red)
    .item{
       @include box; // 기본값을 사용할 경우 인수 생략
    }
}
.box{
   @include box($color: green); // 키워드 인수: 값을 넣을 인수를 직접적으로 지정
}

/*css*/
.container{
 width: 200px;
 height: 200px;
 background-color: red;
.container jtem{
 width:(80px;
 height 80px
 background-cólor: tomato;
.box{
 width: 80px;
 height: 80px;
 background-color: green;

@content

@ mixin 의 추가 내용이 있을 경우를 대비한

/*css*/
.container{
 width: 100px;
 height: 100px;
 position: absolute;
 top: 0;
 left: 0;
}
.box{
 width: 200px;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
  right: 0;
 margin: auto;
}

/*scss*/
@mixin left-top{
   position: absolute;
   top: 0;
    left: 0;
   @content;
 }
 .container{
   width: 100px;
   height: 100px;
   @include left-top;
}
.box{
   width: 200px;
   height: 300px;
   @include left-top{
       bottom: 0;
       right: 0;
       margin: auto;
    }
}

반복문

보간법 #{} vs javascript ${}

제로 베이스드가 아님

//js
for (let i = 0; i < 10; i += 1){
    console.logCloop-${i}`)  
    }

/*scss*/
@for $i from 1 through 10{
  box:nth-child(#{$i}){ // 값을 적는 부분이 아니라서 보간법 사용
    width: 100px * $i ; //값을 명시하는 부분이므로 그대로 적음
  }
}

@each

list data

: list 의 안에 있는 항목들을 c 라는 매개변수로 받아서 차례대로 {} 안에서 처리

/*css*/
.box{
  color: orange;
}
.box{
  color: royalblue;
}
.box{
  color: yellow;
}

/*scss*/
$list: orange, royalblue, yellow;

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

map data

: key와 value 가 있기 때문에 each 다음에 두개의 매개변수를 적어야함 

/*css*/
.box-o {
 colork orange;
}
.box-r {
 co tor royalblue;
}
.bpx-y {
 kolor yellow;
}

/*scss*/
$map:(
   o: orange,
    r: royalblue,
    y: yellow
);

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

 

함수

: 어떤 값을 연산하여 반환하여 사용

vs @mixin 은 스타일 정의 코드의 모음

/*css*/
.box{
 width: 160px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*scss*/
@mixin center{
    display: flex;
    justify-content: center;
    align-items: center;
}
@function ratio($size, $ratio){
    @return $size*$ratio
}
.box{
    $width: 160px;
    width: $width;
    height: ratio($width, 9/16);
    @include center;
}

색상 내장 함수

mix(color1, color2) : color1 과 color2 를 섞음

lighten(color , %) : 색상의 밝기를 %만큼 높임

darken(color , %) : 색상의 밝기를 %만큼 낮춤

saturate(color , %) : 색상의 채도를 %만큼 높임

desaturate(color , %) : 색상의 채도를 %만큼 낮춤

grayscale(color) : 색상을 회색을 변경

invert(color) : 색상을 반전

rgba(color, 투명도) : vs css rgba(레드, 그린, 블루, 투명도)  

 

가져오기

url 생략가능

확장자 생략가능 

여러개 가져오기 가능

/*css*/
@import url("./sub.scss")

/*scss*/
@import "./su1", "./sub2"

데이터 종류

number: 1; // .5, 100px, lem
string: bold; // relative, "../images/a.png"

color: red; // blue, #FFFF00, rgba(0, 0,0,.1)
boolean: true; // false

null 값을 주면 출력되지 않음

null: null; 

js 의 배열 데이터
list: orange, royalblue, yellow;

js 의 객체 데이터

map:(
   o: orange,
    r: royalblue,
    y: yellow
);