[TIL] Sass 사용법

한호수 (The Lake)·2022년 9월 28일
Sass
0

Sass(Syntactically Awesome Stylesheets)나 SCSS 쓰는 이유

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

파일 분리

  • 아래와 같이 모든 파일을 컴파일 할 것이 아니라면 main 파일 외에는 _ 를 붙이지 않고 네이밍 하여 컴파일을 피한다.
  • main 파일 즉, 여기선 style.scss에서는 @import 하여 메인 이외의 Scss 파일을들 임포트해준다.

중첩(Nesting)

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

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

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

속성 Nesting

중첩은 선택자뿐만 아니라 스타일 속성들도 가능.
속성을 중첩 할 때는 콜론:을 사용.
Sass는 속성이 중첩되었음을 인지하고 css 속성들로 변환함

div {
background : {
	image: url("img/image.jpg");
    size: cover;
    repeat:no-repeat;
}

ampersand 앰퍼샌드

"&"는 상위에 있는 부모선택자를 가리킴

  • &을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조 가능
div {
	&:hover{
   		background-color:red; //div에 hover시 배경색 red로 변경 
    }
    &::after{
    	content:"";
        display:block;
    }
}
  • & 를 응용하면 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있음
//Scss
.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}
//.box라는 이름이 같기 때문에 &를 사용해 중첩구조로 만들 수 있다

@at-root

@at-root 키워드를 사용하면 중첩에서 벗어날 수 있음
중첩에서 벗어나고 싶은 선택자 앞에 @at-root 를 작성
중첩된 선택자에게만 사용할 수 있습니다.

.article {
  display: flex;
  .article-content {
    opacity: 0.7;
    @at-root i {	// @at-root  중첩에서 벗어나 i 태그들의 투명도를 0.5로 설정함
      opacity: 0.5;
    }
  }
}

Sass 변수(Variable)

변수를 사용하는 기준

  • 값이 두 번 이상 반복된다면 미리 변수로 만드는것이 좋음
  • 기존의 값을 다른 값으로 변경해야할 경우가 있을 것 같다면 변수로 만드는걸 고려

변수 생성하기

변수를 만들 때는 $ 기호를 사용해서 스타일을 적용할 값을 저장

변수 type

저장할 수 있는 변수 타입에는 numbers, strings, color, booleans, lists, maps, 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 : 10px 20px 30px // 공백으로 구분해서 배열 생성
    • nth($lists, 2) // $lists 변수의 2번째 항목 사용
  • map: ("h1": 45px, "h2": 19px, "p": 16px); // 키와 값으로 이루어진 자료구조
    • map-get($map, "key"); // 맵에 저장되어있는 키를 두번째 인자로 적어 값을 불러옴

Lists, Maps

lists 내장함수

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

Maps 내장함수

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

변수의 Scope(변수의 유효범위)

변수는 전역변수와 지역변수로 두가지 종류로 나뉨

지역변수

.info{ // 블록 내에서만 사용되고 사라짐
	$line-normal : 2; // 지역변수 선언 및 값 할당
	font-size : 15px;
	line-height : $line-normal;
	text-align : right;
  span{
		line-height : $line-normal;
	}
}

전역변수


$font-p : 15px; // 전역변수 선언 및 값 할당

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

Mixin

Mixin은 코드를 재사용하기 위해 만들어진 기능.
중복되는 코드는 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include하여 사용

Mixin 사용법

@mixin 이름(매개변수) //생성
@include 이름(인수)  //사용

mixin은 파일을 개별로 만들어서 import 하여 사용하거나, mixin을 사용할 파일 내에서 선언 후 사용할 수 있음.
이때, 여러 개의 mixin을 만들어 사용한다면, _mixins.scss 파일을 만들어서 관리하는것이 좋다.

Arguments

mixin 이름 뒤에 인수를 넣어서 사용할 수 있으며, 일반 언어와 마찬가지로 매개변수와 인수의 개수가 같아야 함

@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
//background관련 스타일 코드가 들어있다.
//mixin의 인수에 따라 조금씩 다른 스타일링이 가능하다.

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}

.box-one {
  @include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}

기본값
Arguments들에게 미리 값을 줘서 매개변수에 값이 들어오지 않았을 때 기본값을 줄 수 있다.

@mixin image-style($ul, $size=30px, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
}

Content
@content를 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있음


// 정의하는 곳에서
@mixin sample{
	display: flex;
	justify-content: center;
	align-items: center;
  @content;
}
// 사용하는 곳에서 (추가로 스타일링을 할 수 있음)
a {
	@include sample{
	    color: white;
	}
}

조건문과 반복문, 함수

조건문

조건에 따라 스타일을 주고자 할 때, if와 else문을 사용
if문 하나만 사용 할 수도 있으며, 뒤에 나오는 else문, else if문과도 함께 사용도 가능

@if

if (조건){
	// 조건이 참일 때 실행될 구문
} @else if(조건){
	// else if 조건이 참일 때 실행될 구문
} @else{
	// 위에 모든 조건이 거짓일 때 실행될 구문
}

반복문

@for
@for은 정의한 횟수만큼 코드 실행을 반복
@for문에 from(시작 : 이상) - through(끝 : 이하)를 사용하여 시작과 끝을 정함

@for ($변수) from (시작) through(끝){
	// 반복할 내용
}

@each

each문은 lists나 맵의 각각의 요소마다 코드를 실행해서 스타일을 적용할 수 있게 합니다.
js의 forEach문과 비슷

@each ($변수) in (리스트나 맵){ 
	// 반복할 내용
}

예시)

@each $color in $color-palette {
    $i: index($color-palette, $color); //index는 list의 내장함수
    .color-circle:nth-child(#{$i}) {
        background: $color;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
}
``
**@while**
특정 조건에 충족될 때까지 코드를 무한 반복
while문 안에 반드시 빠져나오는 조건을 만들어야 끝날 수 있다.
```scss
@while 조건 {
	// 반복할 내용
}

function
함수는 Mixin과 비슷하지만 mixin은 스타일 코드를 반환하고 function은 @return 키워드를 사용해서 값 자체를 반환한다는 차이가 있음

@function 함수이름($매개변수) {
	// 실행 코드
	@return 값
}
// Scss - function
// Sass 공식문서
// 거듭제곱을 구하는 함수
@function pow($base, $exponent) { 
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

내장함수

  • 색상 함수
    • lighten(color, amount) : 기존 색상의 밝기를 높임( 0%-100% 사이의 값 )
    • darken(color, amount) : 기존 색상의 밝기를 낮춤( 0%-100% 사이의 값 )
    • mix(color1, color2, weight) : 2개의 색상을 섞어서 새로운 색상을 생성
  • 숫자 함수
    • max(number, ..) : 괄호에 넣은 값 중에 가장 큰 수를 반환
    • min(number, ..) : 괄호에 넣은 값 중에 가장 작은 수를 반환
    • parcentage(number) : 퍼센트로 숫자를 바꿈
    • comparable(num1,num2) : 숫자1과 숫자2가 비교 가능한지 확인 후 true,false 값을 반환
  • 문자 함수
    • srt-insert(string,insert,index) : 문자열에 원하는 위치(index)에 문자를 넣은 후(insert), 새로운 문자열을 반환
    • str-index(string,substring) : 문자열에서 해당 문자의 index 값을 반환
    • to-upper-case(string) : 문자열 전부를 대문자로 바꿈
    • to-lower-case(string) : 문자열 전부를 소문자로 바꿈
  • 확인 함수
    • unit(number) : 숫자의 단위를 반환
    • unitless(number) : 단위를 가지고 있는지 판단하여 true,false 값을 반환
    • variable-exists(name) : 변수가 현재 범위에 존재하는지 판단하여 true,false 값을 반환. 이 함수의 인수는 $없이 사용
profile
한호수 (The Lake)
항상 근거를 찾는 사람이 되자
이전 포스트

[TIL] 반응형 컨텐츠와 이미지 포맷

다음 포스트

[TIL]Tailwind 가벼운 사용법

0개의 댓글