[JAY⌨️SCSS] SASS(SCSS) 간단 사용법 첫번째! Nesting, Ampersand, Variable, Operator.

 

 

 

 

 1️⃣ Sass 란?

• Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기
• 브라우저가 Sass파일을 직접 읽지 못하기 때문에 Sass를 기반으로 개발한 후, 일반 CSS로 컴파일!
  컴파일 하는 방법으로는 터미널을 이용하는 방법과, VS Code의 익스텐션을 사용하는 방법이 있다.
• Sass와 Scss가 있는데 일반적으로 CSS와 동일하게 중괄호를 사용하는 Scss를 사용.
• 본 포스팅은 Scss문법을 기준으로 작성되어 있습니다. :)

 

Live Sass Compiler, 클릭하시면 VSC 익스텐션 설치하기로 이동됩니다. :)

//SCSS 형식 {} css와 동일하게 중괄호를 사용하기 때문에 권장됩니다.
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
	font: 100% $font-stack
	color: $primary-color
}

//SASS 형식
$font-stack: Helvetica, sans-serif
$primary-color : #333

body 
    font: 100% $font-stack
    color: $primary-color

 

 

 

 2️⃣ Nesting

• html과 동일한 계층 구조를 이용해 부모에게 상속된 자식 요소에게 스타일을 적용하는 중첩 작성법.
• 2depth 이상의 중첩은 지양할 것.
• 깊은 중첩을 하게 되면서 불필요한 선택자들이 사용될 수 있으니 주의!

/* 여러줄 주석은 CSS 컴파일이 되었을 때 볼 수 있습니다. */
// 한 줄 주석은 다른 파일에선 안 보이고 SCSS파일에서만 볼 수 있습니다.
.one {
  color: blue;

  .two {
    color: green;

    .three {
      color: red;
    }
  }
}


ul {
  li {
    color: red;
    font-size: 10px;
  }
}

[Nesting] SCSS 에서 CSS로 컴파일된 형태 예시

 

 

 

3️⃣ ampersand

• &: 명령어로 가상요소, 가상선택자를 선택하는 앰퍼샌드 문법.
• 가상선택자 활용 예시 &:focus{} &:hover{} &:active{} &:first-child{} &:nth-child(2){}
• 가상 요소 활용 예시 &::after{} &::before{}

// ? 가상선택자
ul {
  li {
    &:hover {
      background: white;
      cursor: pointer;

      &:last-child {
        border: 2px solid black;
      }
    }
  }
}

// ? 가상요소
ol {
  border: 1px solid black;

  li {
    &:nth-child(1) {
      color: red;
    }

    &:nth-child(2) {
      color: orangered;
    }
  }
}

[ampersand] 가상선택자, 가상요소 SCSS 에서 CSS로 컴파일된 형태

 

 

 

4️⃣ Variable

• 변수 기능을 이용하면 SCSS 문서 내에서 해당하는 값을 반복해서 호출할 수 있다.
• $ 기호를 사용해서 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 저장.
• 변수 형태로는 numbers strings color booleans lists maps null이 있다.

 

 

1. String(문자열) 변수 사용 예시

// 변수명 설정
/* 색상 */
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$p-color: #282A36;
$link-color: red;

/* 폰트사이즈 */
$font-p: 13px;
$font-h1: 28px;

/* 폰트 */
$base-font: 'Noto Sans KR', sans-serif;

/* 배경 */
$path : './assets/img/';
$name : 'background.png';


// 변수를 요소에 활용
.cover {
  background-image: url($path + $name);
}

.box {
  background: $black;
  color: $red;
  font-size: $font-p;
}

[variable] String 변수 SCSS 에서 CSS로 컴파일된 형태

 

 

2. List 변수 사용 예시

• list는 순서가 있는 값으로, 첫 번째 요소부터 1,2,3 ... 인덱스를 갖고 있다.
• list를 만들기 위해서는 , / 로 구분해서 요소들을 나열.
• list를 생성한 후에 호출할 때는 아래에 있는 내장 함수를 이용하면 된다.
• append(list,value,[separator]) lists의 값을 추가하는 함수.
• index(list,value) lists의 값에 대한 인덱스를 리턴하는 함수.
• nth(list, n) lists의 인덱스에 해당하는 값을 리턴하는 함수.

// 변수명 설정
$size: 10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 110px, 120px;


// 변수를 요소에 활용
.size-lg {
  width: nth($size, 10);
  padding: nth($size, 2) 0 0;
}

.size-md {
  width: nth($size, 5);
}

.size-sm {
  width: nth($size, 2);
}

[variable] List 변수 SCSS 에서 CSS로 컴파일된 형태

 

 

3. Map 변수 사용 예시

• map은 ( ) 괄호 안에 키:값의 형태로 나열하여 사용
• map을 생성한 후에 호출할 때는 아래에 있는 내장 함수를 이용하면 된다.
• map-get(map,key) 키에 해당하는 값을 값을 리턴하는 함수
• map-keys(map) map에 들어있는 키(key) 전부를 리턴하는 함수
• map-values(map) map에 들어있는 값(value) 전부를 리턴하는 함수

// 변수명 입력
$font-sizes: (
  "h1": 45px,
  "h2": 19px,
  "p": 16px
);

$size: (
  "1x": 200px,
  "2x": 400px,
  "4x": 1600px
);


// 변수를 요소에 활용
.map {
  font-size: map-get($font-sizes, "p");
  width: map-get($size, "2x");
  height: map-get($size, "1x");
}

[variable] Map 변수 SCSS 에서 CSS로 컴파일된 형태

 

 

 

 

5️⃣ Operator

• 비교 연산자 (숫자형) < <= > >= == !=
• 산술 연산자 (숫자나 색) + - * (/) %
• 논리 연산자 (불리언 타입) not and or

 

 

1. 비교 연산자

• a == b a가 b와 값이 같은지 확인.
• a != b a가 b와 값이 다른지 확인.

// 비교 연산자
$value : 32px;
p {
  /* $value 변수가 32와 같거나 크다면? letter-spacing: 1rem */
  @if($value >=32px) {
    letter-spacing: 1rem;
  }

  /* 그렇지 않다면 letter-spacing: 0.5rem */
  @else {
    letter-spacing: 0.5rem;
  }
}

[operator] 비교 연산자 SCSS 에서 CSS로 컴파일된 형태

 

 

 

1. 산술 연산자

// 산술 연산자 활용 예시 
.one {
  font-size: 10px + 10px; /* 덧셈 */
}

.two {
  font-size: 30px - 10px; /* 뺄셈 */
}

.three {
  font-size: 10px * 2;  /* 곱셈 */
}

.four {
  font-size: (20px / 10); /* 나눈 몫 */
}

.five {
  font-size: 8px % 3; /* 나눈 몫을 뺀 나머지 값 */
}

[operator] 산술 연산자 SCSS 에서 CSS로 컴파일된 형태

 

 

3. 논리 연산자

• not true이면 false를, false이면 true를 반대로 반환.
• and 두 개 다 true일때 true를 반환.
• or 하나라도 true라면 true를 반환.

// 논리 연산자
// debug를 통해 true인지 확인하고 값을 반환

/* 두 색상이 동일한가? = true */
@debug rgba(53, 187, 169, 1) == #35bba9; // true

/* 두 색상이 동일하지 않은가? = true */
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

/* true의 not이므로 = false */
@debug not true;

/* 두개 다 true일때만 true이므로 = false */
@debug true and false;

/* 하나라도 true라면 true이므로 = true */
@debug true or false; // true

 

 

 

👩🏻‍💻 요약!

• Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기
• 일반적으로 CSS와 동일하게 중괄호를 사용하는 Scss를 사용.
• 부모에게 상속된 자식 요소에게 스타일을 적용하는 nesting 문법.
• 가상요소, 가상선택자를 선택하는 ampersand 문법.
• $ 기호를 사용해 변수로 지정하고 스타일을 적용할 값을 저장한 뒤 반복해서 재사용 가능!
• 코드를 비교하고, 계산하고, true, false로 반환해서 조건을 걸어 사용할 수 있는 operator 문법이 있다.
• 해당 게시물은 Sass에 대한 기본기를 설명하는 첫번째 발행물으로
  Sass의 기능에 대해 더 알고 싶으시다면 아래 링크에서 다음 내용을 확인할 수 있습니다!

[JAY⌨️SCSS] SASS(SCSS) 간단 사용법 두번째! Mixin, if, for, function