Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- Sass(SCSS) Variable & Operator.

✏️ Sass ✏️

1. Sass 란?

Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다. 브라우저가 Sass를 직접 읽지 못하기 때문에 개발은 Sass를 기반으로 한 후, CSS로 컴파일하는 과정을 거쳐야한다.

1-1. Sass를 사용하는 이유

• 코드 재사용에 용이.
• 스타일시트가 점점 더 커지고 복잡해지면서 발생하는 유지보수의 어려움을 해결.
• Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등
  css에는 없는 편의 기능들이 있어 시간을 절약할 수 있음.

1-2. Sass의 기술 방식

Sass를 작성하는데에는 기본적으로 .sass와 .scss로 두가지 방법이 있다. 이들은 서로 다른 확장자를 사용하며 그 중에서 중괄호를 사용하는 SCSS를 일반적으로 사용한다.

//SCSS
$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

1-3. 환경 설정

.scss 파일을 .css 파일로 컴파일 하기 위해
VSCode에서 Live Sass Compiler라는 Extension을 설치하여야 한다.
설치가 완료되면 하단에 다음과 같은 버튼이 생긴다.

.scss를 작성한 후 해당 버튼을 누르면 컴파일 되며.css 파일이 생성된다.

2. 파일 분리 & 중첩(Nesting)

2-1. 파일 분리

각 레이아웃 별 _header.scss와 _main.scss 파일을 분리하고, _variable.scss와 _mixin.scss 파일도 따로 분리하였다. 이렇게 파일을 스타일 별로 기능별로 분리하여 사용할 수 있으며 파일을 기능 별, 레이아웃 별로 분할해서 사용하기 때문에 코드를 관리하기 편리해진다.

_(언더스코어)를 붙이지 않는다면 분할 된 파일들 모두가 컴파일되기 때문에 여러개의 .css파일이 따로 저장된다.

메인 파일인 style.scss에 분리했던 파일들을 @import하여 연결하고 다른 스타일 코드는 작성하지 않았다.

※ css는 import할 때 파일 URL을 적어줘야 하지만, Sass에서 import할 때는 확장명을 제외하고 파일명만을 사용한다.

2-2. 중첩(Nesting)

2-2-1. 상속 관계 Nesting

- SCSS

// 상속 관계 Nesting
ul {
    li {
        color: red;
        font-size: 20px;
    }
}

.one {
    width: 100%;
    height: 100px;
    background-color: red;
    .two {
        color: green;
        .three {
            font-size: 20px;
        }
        .four {
            font-size: 40px;
        }
    }
}

- CSS

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

.one {
  width: 100%;
  height: 100px;
  background-color: red;
}

.one .two {
  color: green;
}

.one .two .three {
  font-size: 20px;
}

.one .two .four {
  font-size: 40px;
}

2-2-2. 속성 Nesting

- SCSS

// 속성 Nesting
.add-icon {
    background : {
      image: url("#");
      position: center center;
      repeat: no-repeat;
      size: 14px 14px;
    }
  }

- CSS

.add-icon {
  background-image: url("#");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

2-2-3. 앰퍼샌드(&)

&는 상위에 있는 부모선택자를 가리킨다.

- SCSS

// & 앰퍼샌드
ul {
    li {
        &:hover {
            background-color: white;
            cursor: pointer;
        }
        &:last-child {
            border-bottom: 2px solid black;
        }
    }
}

- CSS

ul li:hover {
  background-color: white;
  cursor: pointer;
}

ul li:last-child {
  border-bottom: 2px solid black;
}

2-2-4. @at-root

중첩이 너무 많이 사용되었을 때 사용하여 중첩에서 벗어날 때 사용

- SCSS

// @at-root
.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .article-content {
    font-size: 14px;
    opacity: 0.7;
    @at-root i {
      opacity: 0.5;
    }
  }
}

- CSS

.article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
}

.article .article-content {
  font-size: 14px;
  opacity: 0.7;
}

i {
  opacity: 0.5;
}

3. 변수

변수를 선언하여 값을 일일이 고치지 않아고 유지보수를 매우 쉽게 만들어준다.
보통 타이포그래피, 폰트색상, 폰트사이즈, 글자 간격 등의 값을 변수로 정의해서 사용한다.

※ 변수를 사용하는 기준

• 값이 두 번 이상 반복된다면 미리 변수로 만들어 값을 기억하지 않고 변수명만을 가지고 스타일을 할 수 있다.
• 기존의 값을 다른 값으로 변경해야할 경우, 변수의 값만 변경하면 되기 때문에 값이 수정될 가능성이 있는 것에 변수를 사용한다.

3-1. 변수 선언

//색상
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

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

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

$변수명: 값; 이와 같은 구문으로 선언한다.

3-2. list

list는 순서가 있는 값의 집합으로 값마다 인덱스를 가지고 있다.

list 관련 내장함수

• append(list, value, [separator]) : lists의 값을 추가하는 함수
• index(list, value) : lists의 값에 대한 인덱스를 리턴하는 함수
• nth(list, n) : lists의 인덱스에 해당하는 값을 리턴하는 함수

- SCSS

// variable list
$font-size: 10px 12px 16px;

.one {
    font-size: nth($font-size, 2);
}

.two {
    font-size: nth($font-size, -1);
}

- CSS

.one {
  font-size: 12px;
}

.two {
  font-size: 16px;
}

3-3. maps

maps는 ( ) 괄호 안에 키:값의 형태로 저장하여 변수를 각각 선언하는 대신, 관련 있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다.

map관련 내장함수

• map-get(map, key) : 키에 해당하는 값을 값을 리턴하는 함수
• map-keys(map) : map에 들어있는 키(key) 전부를 리턴하는 함수
• map-values(map) : map에 들어있는 값(value) 전부를 리턴하는 함수

- SCSS

// maps - key를 이용하여 value 리턴
$font-weight: ("regular": 400, "medium": 500, "bold": 700);
$font-size: ("h1": 45px, "h2": 19px, "p": 16px);

div {
    font-weight: map-get($font-weight,"bold");
}

section {
    h2 {
        // 해당되는 key가 존재하지 않으면 css 생성하지 않음
        font-size: map-get($font-size, "h3");
    }
}

- CSS

div {
  font-weight: 700;
}

3-4. 지역 변수(Local)

지역변수는 해당 nest 안에서만 사용가능하다.

- SCSS

// 지역변수
.info{
    $line-normal : 1.34;
    font-size : 15px;
    line-height : $line-normal;
    text-align : right;
    span{
        line-height : $line-normal;
    }
}

div {
    color: red;
    line-height: $line-normal;
}

- CSS

.info {
  font-size: 15px;
  line-height: 1.34;
  text-align: right;
}

.info span {
  line-height: 1.34;
}

3-5. 전역 변수(Global)

전역변수는 최상단에서 선언하여 파일 내 어디서든 사용가능하다.

- SCSS

$font-p : 15px; // 전역변수

.main-box{
	p {
		font-size : $font-p;
	}
	a {
		font-size : $font-p;
	  color : blue;
		text-decoration : none;
	}
}

- CSS

.main-box p {
  font-size: 15px; 
}

.main-box a {
  font-size: 15px;
  color: blue;
  text-decoration: none; 
}

4. 연산자

4-1. 비교연산자

• a < b : a의 값이 b보다 값이 작은지 비교.
• a <= b : a가 b보다 값이 작거나 같은지 비교.
• a > b : a의 값이 b보다 값이 큰지 비교.
• a >= b : a가 b보다 값이 크거나 같은지 비교.
• a == b : a가 b와 값이 같은지 비교.
• a != b : a가 b와 값이 다른지 비교.

- SCSS

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

// 숫자
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

// 문자
@debug "Poppins" == Poppins; // true
@debug "Open Sans" != "Roboto"; // true

// 색상
@debug rgba(53, 187, 169, 1) == #35bba9; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

// 리스트
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true
@debug (5px 7px 10px) == (5px 7px 10px); // true

ERROR : 비교하거나 연산하는 값의 단위가 일치하지 않으면 에러가 발생하지만 단위가 없는 숫자와 일반 숫자와 비교하는 경우에는 에러가 발생하지 않는다.

// Error: Incompatible units px and s
@debug 100px > 10s;

// Not Error
@debug 100 > 50px; // true
@debug 10px < 17; // true

4-2. 산술연산자

• a + b : a 와 b의 값을 더한다.
• a - b : a 에서 b의 값을 뺀다.
• a * b : a와 b의 값을 곱한다.
• a / b : a를 b로 나눈다.
• a % b : a 에서 b를 나눈 나머지 값을 구한다.

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in (1in == 96px)

ERROR : 비교하거나 연산하는 값의 단위가 동일하지 않으면 에러가 발생합니다.

// Error: Incompatible units px and s.
@debug 100px + 10s;

4-3. String의 a + b

앞서 말했던 + 연산자에서 a와 b가 모두 문자열이라면 문자열 a, b 를 합쳐서 새로운 문자열로 반환한ㄷ다. 만약 a나 b중 하나만 문자열이라 하더라도 문자열이 아닌 값은 문자열로 변환하여 두 값을 합친 문자열로 반환한다.

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

4-4. 논리연산자

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

@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false