멋쟁이 사자처럼 FE 2기 - 20

임홍렬·2022년 4월 25일

Sass

멋쟁이 사자처럼 FE 2기

목록 보기

22/45

220425

Sass 파일분리와 Nesting, 변수

Sass, SCSS 쓰는 이유

프로젝트가 완성히 되어갈수록 스타일시트가 점점 더 커지고 복잡해지면 유지보수가 어려워 자동화하기 위해 사용한다.
Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들이 있어 시간을 절약할 수 있고, 코드 재사용도 가능하다 !

Sass 란

특정한 형태의 스타일시트를 css스타일 시트로 변경해주는 변환 엔진 컴파일러

Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 웹업계에서 많이 사용하는 CSS 전처리기이다.
브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.
브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 한다.

Sass 기술방식

- .sass 기술방식과 .scss 방식 → 다른 파일 확장자를 사용
- Sass와 Scss가 있는데 그 중에서 일반적으로 CSS와 좀 더 유사한 SCSS를 사용한다. 
왜냐하면 SCSS는 CSS와 동일하게 중괄호를 사용하는 방식이고, Sass는 중괄호가 없다.

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

파일 분리

파일을 스타일 별로 기능별로 분리하여 사용할 수 있으며 파일을 기능 별, 레이아웃 별로 분할해서 사용하기 때문에 코드를 관리하기 편리해진다.

_'(언더스코어)를 붙이지 않는다면 분할 된 파일들 모두가 컴파일되기 때문에 여러개의 .css파일이 나눠서 저장되는데, scss파일의 이름 앞에 ‘_’(언더스코어)를 붙여서 파일명을 정하면, 
Sass에게 이 파일이 main파일의 일부분임을 알려줘서 해당 파일은 css파일로 컴파일하지 않고 내부에서 @import 형태로 작동한다.

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

주석

주석을 한 줄 작성할 때는 //을 사용하고, 작성한 주석 내용은 sass 내에서만 볼 수 있음
여러 줄을 작성할 경우 /*을 사용하고, scss파일이 컴파일 될 때 주석 내용이 css 파일에 나타난다.

/* 여러줄 주석은 볼 수 있습니다. */
// 한 줄 주석은 볼 수 없습니다.

중첩(Nesting)

Nesting(중첩)을 사용하면, html의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있어, CSS코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리해진다.

<!--HTML-->

<nav> <!--nav안에 ul이 중첩되어 있고-->
    <ul> <!--ul안에 세가지 li가 중첩되어 있다.-->
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul> 
</nav>

//Scss
//Scss에서도 HTML처럼 계층구조로 스타일을 적용할 수 있다.
nav{
	background : #C39BD3;
	padding : 10px;
	height: 50px;
	ul{
		display: flex;
		list-style : none;
		justify-content: flex-end;
		li{
			color: white;
			margin-right: 10px;
		} 
	}
}

Why. 중첩을 사용하는 이유는?

기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 적용하려고 할 때마다 최상위 선택자를 반복 선언해야 하는데, 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있게 되어 코드 반복을 줄일 수 있다.

/*CSS*/

info-list div {
  display: flex;
  font-size: 14px;
  color: #4f4f4f;
}

info-list div dt {
  font-weight: 700;
  margin-right: 7px;
}
/*기존 CSS : info-list에 있는 자식과 자손에게 스타일을 적용하려고 할때마다 
부모 선택자를 적어준다*/

//Scss

info-list {
  div {
    display: flex;
    font-size: 14px;
    color: #4f4f4f;
    dt {
      font-weight: 700;
      margin-right: 7px;
    }
  }
}
// 중첩을 사용하여 부모선택자를 한번만 사용한다.
// 그리고 코드를 봤을 때 info-list div tag안에 dt가 들어있음을 한눈에 알아볼 수 있다

⚠️하지만 지나친 중첩된 코드는 삼가 해주세요. 깊이 중첩되면 코드를 보는 게 불편하고 컴파일 했을 경우 불필요한 선택자를 사용하게 된다.

속성 Nesting

중첩은 선택자뿐만 아니라 스타일 속성들도 가능함.
아래 예시를 보면 .add-icon이라는 클래스 선택자에게 background 스타일을 주려고 한다. 
이때, background 이름을 가진 속성( background-image, background-position 등)들을 background안에 중첩 시켜서 스타일 코드를 작성할 수 있고, 속성을 중첩 할 때는 콜론`:`을 사용함. Sass는  속성이 중첩되었음을 인지하고 css 속성들로 변환한다.

//Scss
.add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

/*CSS*/
.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

ampersand 앰퍼샌드

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

&을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있습니다.

//Scss
.box {
	&:focus{} // 가상선택자
	&:hover{}
  &:active{}
	&:first-child{} 
  &:nth-child(2){}
	&::after{} // 가상요소
	&::before{} 
}

/*CSS*/
.box:focus{} /* 가상선택자 */
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{} /* 가상요소 */
.box::before{}

& 를 응용하면 아래 예시와 같이 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있습니다.

& 은 자신의 부모 선택자를 참조하지만 중첩이 깊어지면, 자신의 직계 부모가 아닌 최상위 부모 선택자로부터 참조됩니다.
깊은 중첩을 하게 되면서 불필요한 선택자들이 사용되었습니다. 중첩을 과하게 사용하지 않도록 주의해주세요.

@at-root

`@at-root` 키워드를 사용하면 중첩에서 벗어날 수 있다.
중첩에서 벗어나고 싶은 선택자 앞에 `@at-root` 를 작성한다. 
컴파일된 css 코드에서 `@at-root` 를 사용한 선택자가 중첩에서 벗어났음을 확인할 수 있고, 중첩된 선택자에게만 사용할 수 있다.

//Scss
.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: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.article .article-content {
  font-size: 14px;
  opacity: 0.7;
}
/*중첩을 빠져나온 것을 확인할 수 있다.*/
i { 
  opacity: 0.5;
}

css에서 변수라니?

변수를 선언한다는 것은 값을 일일이 고치지 않아도 유지보수를 매우 쉽게 만들어준다.
하지만, 무분별하게 CSS를 작성하면 충돌할 수 있다.

※ 변수를 사용하는 기준

값이 두 번 이상 반복된다면 미리 변수로 만듭니다. 값을 기억하지 않고 변수명만을 가지고 스타일을 할 수 있습니다.
기존의 값을 다른 값으로 변경해야할 경우, 변수의 값만 변경하면 되기 때문에 값이 수정될 가능성이 있다면 변수 생성을 고려합니다.
```
	보통 타이포그래피, 폰트색상, 폰트사이즈, 글자 간격 등의 값을 변수로 정의해서 사용합니다.
```

변수 생성하기

변수를 만들 때는 `$` 기호를 사용하셔서 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 저장한다.

//**$변수 : 값**
$bgColor : #FFF

css 전체에 걸쳐 반복되는 값들을 정의하면 편하게 스타일링을 할 수 있다.

//색상
$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;

body{
		background-color : $bg-color;
		font-size : $font-p;
		font-family : $base-font;
}

h1{
   font-size : $font-h1;
	 color : $black;
}

p{
	font-size : $font-p;
	color : $black;
}

변수 type

numbers, strings, color, booleans, lists, null이 있습니다. 아래와 같은 형태로 입력 가능합니다.

numbers : 1, .82, 20px, 2em 등
strings : "./images/a.png", bold, left, uppercase 등
colors : green, #FFF, rgba(255,0,0,.5) 등
booleans : true, false
null

lists :

//sass 공식문서
$font-size : 10px 12px 16px; //폰트사이즈 리스트
$image-file : photo_01, photo_02, photo_03 //이미지 파일명 리스트

//아래와 같은 형태로 사용(순회도 가능)
list.nth(10px 12px 16px, 2); // 12px
list.nth([line1, line2, line3], -1); // line3

maps :

//sass 공식문서
$font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트

//아래와 같은 형태로 사용
map.get($font-weights, "medium"); // 500
map.get($font-weights, "extra-bold"); // null

Lists

리스트는 순서가 있는 값으로, 값마다 인덱스를 가지고 있다. 
lists를 만들려면 lists의 요소들을 쉼표`,` 나 공백 또는 일관성이 있는 `/`로 구분하여 생성하고, 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식한다. 
빈 lists를 만들 때나 lists에 들어있는 값이 하나 인 경우 `[ ]` 나 `( )` 를 사용하여 생성한다.

lists에 들어있는 값의 index는 0부터 시작하지 않고 1부터 시작한다.

$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;

lists 관련 내장함수

append(list,value,[separator]), index(list,value), nth(list, n) 등이 있습니다.

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

예시)

nth()를 사용해서 lists의 인덱스에 해당하는 값을 불러옵니다.

// Scss
$valid-sides: left, center, right;

.screen-box{
	text-align : nth($valid-sides,1);
}

/*CSS*/
.screen-box {
  text-align: left;
}

Maps

maps는 `( )` 괄호 안에 키:값의 형태로 저장하여 사용한다.
키와 값을 정의할 때, 키는 고유해야 하지만 키에 해당하는 값은 중복이 가능함 
변수를 각각 선언하는 대신, 관련 있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다.

p관련 내장함수
map-get(map,key), map-keys(map), map-values(map) 등이 있습니다.
map-get(map,key) : 키에 해당하는 값을 값을 리턴하는 함수
map-keys(map) : map에 들어있는 키(key) 전부를 리턴하는 함수
map-values(map) : map에 들어있는 값(value) 전부를 리턴하는 함수

예시)

map-get을 사용하여 map안에 있는 키에 해당되는 값을 불러옵니다.

// Scss
$font-sizes: ("h1": 45px, "h2": 19px, "p": 16px);

section {
	h2 {
		font-size : map-get($font-sizes, "h1");// 45px
	}
}
map-get($font-size, "h3");// null

/*CSS*/
section h2 {
	font-size : 45px;
}

※ lists와 maps 뿐만 아니라 string이나 number같은 타입들도 function을 가지고 있다.

지역변수

지역변수는 선언한 자기자신을 감싸고 있는 중괄호 { } 안에서 사용됨. 
하위 단계에 있는 중괄호에서도 사용할 수 있다.

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

전역변수

전역변수는 가장 윗부분에 정의하면 파일 내에  어디서든지 사용가능하다.
전역변수를 파일로 만들어서 사용하는 경우,  메인 scss파일(파일분할부분에서 설명한 style.scss파일)에서 전역변수파일을 다른 파일들보다 윗부분에 위치시킨다.

//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; 
}

!global을 사용하여 local 변수를 global 변수로 만들어 사용할 수도 있습니다.

$mycolor: #ffffff !global;

비교연산자

1️⃣ < , <=, >, >=

a < b : a의 값이 b보다 값이 작은지 확인합니다.
a <= b : a가 b보다 값이 작거나 같은지 확인합니다.
a > b : a의 값이 b보다 값이 큰지 확인합니다.
a >= b : a가 b보다 값이 크거나 같은지 확인합니다.

// Sass 공식문서
@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

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

//Sass 공식문서

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

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

2️⃣ ==, != (모든 타입)

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

변수의 타입에 따라 true, false결과가 약간씩 다릅니다.( == 의 연산자의 경우를 말합니다. != 연산자는 반대의 값을 반환합니다.)

색상, 숫자, 문자열은 값과 단위가 동일한 경우나, 값의 단위를 서로 변환했을 때 일치하는 경우 true를 반환합니다.
맵은 키와 값이 모두 동일할 때, 리스트는 들어있는 값들이 모두 동일해야만 true를 반환합니다.
boolean의 경우, true == true, false == false,null == null 처럼 각자 자신과 비교할 때만 true를 반환합니다.

//Sass 공식문서

// 숫자
@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

산술연산자 (숫자나 색)

a + b : a 와 b의 값을 더합니다.
a - b : a 에서 b의 값을 뺍니다.
a * b : a와 b의 값을 곱합니다.
a / b : a를 b로 나눕니다.
a % b : a 에서 b를 나눈 나머지 값을 구합니다.

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

※ 나누기를 할 때 사용하는 슬래시/는 리스트에서도 사용하기 때문에 혼동을 줄 수 있어,괄호를 사용하거나, 변수와 함께 사용하거나, 덧셈을 할 때 함께 써서 Scss에게 / 를 나누기 연산자임을 알려줘야 한다.

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

//Sass 공식문서
@debug 100px + 10s;
// Error: Incompatible units px and s.

String의** `a + b`

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

//Sass 공식문서
@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";

// Scss
.status-bar {
	font-family : "Noto Sans KR", sans- + serif;
}

td {
	&::after{
		content : "Heades" + " up!"; // 문자열 더하기
	}
}

/*CSS*/
.status-bar {
  font-family: "Noto Sans KR", sans-serif; 
}

td::after{
	content : "Heades up!";
}

논리연산자 (불리언 타입)

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

// Sass 공식문서
@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

Sass 과제할때

버튼 한두개정도
박스의 중앙정렬 정도 = mixin
변수 한두개 정도 적용해보기

임홍렬

뜨내기 FE 개발자

이전 포스트

멋쟁이 사자처럼 FE 2기 - 19

다음 포스트

멋쟁이 사자처럼 FE 2기 - 20