Sass(SCSS)

최현호·2022년 4월 4일
0

Sass

목록 보기
1/1
post-thumbnail

Sass(SCSS)

CSS 전처리기로서 CSS의 한계나 단점을 보완하기 위해 만들어졌습니다.

SASS 에 SCSS가 포함되어 있는데, SCSS는 SASS 3번째 버전에서 추가되었고,

SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다.


주요 기능


변수 설정

  • $표시를 사용하여 변수명을 지정할 수 있습니다.
$hongsi-1: 1;
$HONGSI_2 : 2;
$hongsi: 'hongsi';
  • 반복적으로 사용되는 폰트나 색상 등을 변수로 지정해 간단하게 제어할 수 있습니다.

  • 규칙

    • 문자를 넣을 때 '' 사용
    • 유의사항 : 알파벳, -, _, 123 사용 가능
    • 대소문자 구분
    • 숫자로 변수명 시작 X

Nesting(중첩)

  • SASS에서는 Nesting 기능을 사용해 상위 선택자의 반복을 피할 수 있습니다.
  • 또한 html 구조를 반영해서 코드를 작성할 수 있기 때문에 CSS의 구조를 명확하게 파악할 수 있습니다.
body {
  background-color: $bg;
}

.box {
  margin-top: 50px;
  &:hover {
    background-color: green;
  }
  h2 {
    color: red;
  }
  button {
    color: yellowgreen;
  }
}
  • Nesting 기능을 이용한 중첩 안에 & 를 사용하여 부모 참조 선택자를 사용할 수 있습니다.

Mixin

  • 재사용성이 핵심
  • @mixin으로 재사용할 스타일을 정의하고 필요한 부분에서 @include를 통해 불러옵니다.
@mixin title {
  color: blue;
  font-size: 30px;
  margin-bottom: 12px;
}
-----------------------------

@import '_mixin.scss';

body {
  background-color: $bg;
}

h1 {
  @include title();
}

조건문과 반복문

  • if문과 비슷하게 @if, @else를 사용하여 조건에 따라 CSS를 반환 합니다.
  • for문과 비슷하게 @for throughto를 사용하여 반복문을 만들 수 있습니다.
  • while문과 비슷하게 @while을 사용하여 조건이 거짓이 될 때까지 내용을 반복할 수 있습니다.
//기본 @if 지시문 
@if(조건식) { 
    //조건이 참일 때 표현식 
} 

//@if @else@if(조건식) { 
    //조건이 참일 때 표현식 
} @else { 
    //조건이 거짓일 때 표현식 
} 

//다중 @if@if(조건식1) { 
    조건식1이 참일 때 표현식 
} @else if(조건식2) { 
    //조건식2가 참일 때 표현식 
} @else { 
    //조건식이 모두 거짓일 때 표현식
}


// through - 시작부터 종료조건까지 반복 
@for $변수 from 시작 through 종료 { 
    // 반복내용
}; 
    
// to - 시작부터 종료조건 직전까지 반복 
@for $변수 from 시작 to 종료 { 
    //반복내용 
};

@while 조건 {
	//반복 내용
}

참고

profile
현재 블로그 : https://choi-hyunho.com/

0개의 댓글