(scss)

kjn·2023년 1월 31일
0

scss

  • css를 쓰기 쉽게 해주는 도구 (수정, 관리에 용이)

  • scss식 코드를 css화하는 컴파일 작업 필요
    - 앞에 언더바( _ )가 붙은 scss파일을 'style.scss'(허브역할)에 임포트(@import) 함

@import './utils/var'; (변수)
@import './utils/mixins'; (재사용 가능)

@import './base/common'; (공통)
@import './base/reset'; (초기화)
@import './base/typo'; (폰트)

@import './layout/footer';
@import './layout/header';
@import './layout/nav';

@import './pages/main';

@mixin

  • @mixin 으로 재사용 가능한 소스 저장
  • @include 로 소스 불러오기

> position

@mixin position-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin position-hr{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@mixin position-vt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

> ellipse : 말줄임

@mixin ellipse($line:1){

    overflow: hidden;
    text-overflow: ellipsis;

    @if($line==1){
        white-space: nowrap;
    }

    @else{
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }

}

> media : 미디어쿼리(mobile/tablet/desktop)

/*반응형 화면 크기*/
$mobile: 767px; //320
$tablet: 1023px; // 768
$desktop: 1200px; //1025

/*반응형, 브라우저 크기가 767px 이하일때*/
@mixin mobile{
  @media (max-width: $mobile){
    @content;
  }
}

/*반응형, 브라우저 크기가 768이상, 1024px 이하일때*/
@mixin tablet{
  @media (max-width: $tablet){
    @content;
  }
}

/*반응형, 브라우저 크기가 1025px 이상일때*/
@mixin desktop{
  @media (max-width: $desktop){
    @content;
  }
}

$변수

  • 전역변수 : '_variables.scss' 에 공용변수를 저장하여, 어디서든 전역으로 사용가능
  • 지역변수 : 필요한 범위에서만 변수를 재설정하여, 그 범위내에서는 전역변수보다 강하게 적용
profile
초심

0개의 댓글