[scss]기본 문법 정리

SCSS 기본 작성법

- 중괄호를 활용하여 부모자식 관계를 표현하고 & 사용 시 부모태그를 가져옴

// 입력
ul{
  width: 100px;
  li{
    height: 100px;
    &::before{
      content: "";
    }
  }
  &::after{
    background: #fe0;
  }
}

//출력
ul {
  width: 100px;
}

ul li {
  height: 100px;
}

ul li::before {
  content: "";
}

ul::after {
  background: #fe0;
}

 

$를 활용한 기본 변수 설정

// 입력
$main_color : #fe0;
div{color: $main_color; }

// 출력
div{color: #fe0; }

 

@import "파일명"을 통한 파일 불러오기

@import "var";
// scss의 경우 파일명 생략 가능

 

 

 

@mixin을 활용한 변수

- @mixin으로 설정 후 @include로 출력

// 입력
@mixin flex {
  display: flex;
}

div{
  @include flex;
}

// 출력
div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

- #{변수명}으로 mixin 내 변수 출력

// 입력 
@mixin j_spa($bet){
  display: flex; justify-content: space-#{$bet};
}

@mixin f_col(){
  flex-direction: column;
}

div{
  @include j_spa(between);
}
div{
  @include j_spa(between);
  @f_col();
}

// 출력
div{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
div{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-direction: column;
  
}

@mixin 변수{

  속성

}

위 형태가 기본형태이므로 괄호 생략가능

// 입력
@mixin af_posi($w:20px, $h:20px){
  position: relative; 
  &::after{
  content: ""; display: block; position: absolute; top: 50%; left: 50%; 
  transform: translate(-50%, -50%); width: $w; height: $h;
  };
}

div.af_posi{
  @include af_posi();
  &::after{background: $main_color;
  }
}

//출력
div.af_posi {
  position: relative;
}

div.af_posi::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 20px; 
  height: 20px;
}​

::after도 출력 가능

mixin내 변수 설정 후 기입하지않을 경우 기존대로 출력

include시 변수 재설정 가능

ul.af_posi{
  @include af_posi();
}
// 20px, 20px로 출력됨

ul.af_posi2{
  @include af_posi($w:30px, $h: 40px);
}
// 30px, 40px로 출력됨

 

중복명이 많은 속성의 경우 아래와 같이 작성 가능

// 입력
div{
  margin: {
    right: 5px; 
    top: 5px;
  };
  font: {
    weight: 900;
    size: 16px;
  }
}

//출력
div{
  margin-right: 5px;
  margin-top: 5px;
  font-weight: 900;
  font-size: 16px;
}

@while문

//입력
$i: 1;
@while $i < 10 {
  .fon_s_#{$i}{
    font-size: $i+px;
  }
  $i: $i+1;
}

======================================

@for $i from 1 to 21{
  .mb#{$i*5}{
    margin-bottom: $i*5+px !important;
  }
}

while과 for 같은 값으로 출력됨
========================================

//출력
.fon_s_1 {
  font-size: 1px;
}

.fon_s_2 {
  font-size: 2px;
}

.fon_s_3 {
  font-size: 3px;
}

.fon_s_4 {
  font-size: 4px;
}

.fon_s_5 {
  font-size: 5px;
}

.fon_s_6 {
  font-size: 6px;
}

.fon_s_7 {
  font-size: 7px;
}

.fon_s_8 {
  font-size: 8px;
}

.fon_s_9 {
  font-size: 9px;
}

// 응용 입력 - 사칙연산 활용
$i: 1;
@while $i < 20 {
  .mt_#{$i*10}{
    margin-top: $i*10px !important;
  }
  $i: $i+1;
}

// 응용 출력
.mt_10 {
  margin-top: 10px !important;
}

.mt_20 {
  margin-top: 20px !important;
}

.mt_30 {
  margin-top: 30px !important;
}

.mt_40 {
  margin-top: 40px !important;
}

.mt_50 {
  margin-top: 50px !important;
}

.mt_60 {
  margin-top: 60px !important;
}

.mt_70 {
  margin-top: 70px !important;
}

.mt_80 {
  margin-top: 80px !important;
}

.mt_90 {
  margin-top: 90px !important;
}

.mt_100 {
  margin-top: 100px !important;
}

.mt_110 {
  margin-top: 110px !important;
}

.mt_120 {
  margin-top: 120px !important;
}

.mt_130 {
  margin-top: 130px !important;
}

.mt_140 {
  margin-top: 140px !important;
}

.mt_150 {
  margin-top: 150px !important;
}

.mt_160 {
  margin-top: 160px !important;
}

.mt_170 {
  margin-top: 170px !important;
}

.mt_180 {
  margin-top: 180px !important;
}

.mt_190 {
  margin-top: 190px !important;
}

 

@extend

extend의 경우 콤마로 묶여서 출력이 되므로 사용 시 주의 필요

// 입력
.btn{
  position: absolute; 
  top: 0;
}

.next_btn{
  @extend .btn;
  right: 0;

}

.prev_btn{
  @extend .btn;
  left: 0;
}


//출력
.btn, .next_btn, .prev_btn {
  position: absolute;
  top: 0;
}

.next_btn {
  right: 0;
}

.prev_btn {
  left: 0;
}

다른 태그에 사용된 css를 그대로 가져오기

 

@at-root

// 입력
ul{
  display: block;
  li{
    display: flex;
    @at-root span{
      display: inline-block;
    }
  }
}



// 출력
ul {
  display: block;
}
ul li {
  display: flex;
}
span {
  display: inline-block;
}

 

 

주석활용법

SCSS에서

/* */로 작성된 주석은 CSS로 컴파일 되지만

// 로 작성된 주석은 CSS로 컴파일 되지 않음

 

/* 컴파일 되는 주석 */

// 컴파일 되지않는 주석

See the Pen scss 문법 by sangmok-ye (@sangmok-ye) on CodePen.

 

@mixin af_posi(){
  position: relative; 
  &::after{
  content: ""; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    
    @content;
  };
}

ul.af_posi{
  @include j_spa(evenly);
  align-items: center;
  height: 100px;
  @include af_posi(){
    width: 50px; 
    height: 50px;
    background: $main_color;
  }
}

@content를 활용하여 mixin에서 만들어 놓은 변수 내의 추가 속성도 기입 가능