[엘리스 sw 엔지니어 트랙] 51일차 Sass, Scss

수업 51일차

이론

• SASS: CSS의 확장 스크립팅 언어, 들여쓰기로 Scope구분
  SCSS: CSS의 확장 스크립팅 언어, 중괄호로 Scope구분

Sass 란 ?

CSS 전처리기 중의 하나로, CSS 작성을 더 편하게 만들어주는 도구

CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다.
이에 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.

Sass 문법

변수

global 변수와 local 변수

global변수 : 모든 영역에서 사용 가능
local변수 : 해당 소괄호 안에서만 사용가능

$font-color: red;

.container {
	$font-color: green;
    color:$font-color /* green */
}
.contents {
	color:$font-color; /* red */
}

연산

일반적인 .css에서는 calc를 사용하고 엄격한 띄어쓰기를 바탕으로 작성해야한다. 하지만 sass에서는 변수에 연산을 넣을 수 있다.

$box-width: (500px - 200px) / 2;
$box-height: 1500px % 500px;

.square {
	width: $box-width;
    height: $box-height;
}

중첩

원래는 작성을 할 때마다 부모 요소를 항상 써주면서 작업을 했어야했다. 물론 :after :before :first-child :last-child등 :(콜론)이 붙는 스타일도 하나하나 전부 다 적어줘야했지만 sass를 사용하면 아래 코드처럼 작성한 코드 안에 자식 요소의 스타일을 지정해주기만 한다면 문제없다.

ex.1
.square {
	width: 500px;
    height: 500px;
    inner {
        width: 100%;
        height: 100%
    }
}
ex.2
.square {
	width: 700px;
    height: 500px;
    &:first-child {
    	width: 500px;
        height: 400px;
    }
}

mixin

mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다. @mixin은 재사용할 내용을 선언하는 부분이며 @include는 @mixin에서 정의된 내용을 삽입,적용되는 부분입니다
재활용이라는 키워드가 가장 적절할 것 같다.

자주쓰는 스타일 코드 블럭을 mixin으로 지정을 해주고 그 안에 내가 원하는, 내가 자주 사용하는 스타일 코드 블럭을 넣게 된다면 지정한대로 그 코드를 사용할 수 있게 된다.

// SCSS문법
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// 함수 선언 / 인자 전달 / 기본값 설정
@mixin circle($size){
	width: $size;
    height: $size * 2;
    border-radius: 50%;
}
.box {
	@include circle(100px);
}

// 인수가 전달되지 않으면 초기값을 이용한다.
@mixin circle($size : 10px){
	width: $size;
    height: $size * 2;
    border-radius: 50%;
}
.box {
	@include circle(100px);
}

include

선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요하다.
작성법은 아래와 같이 @include를 작성해주고 내가 작성해놓은 mixin을 불러와서 사용하면 된다.

h1 {
	@include large-text;
}

Nesting

nest는 번역하면 둥지이다.
말 그대로 분기마다 기준이 되는 코드를 바깥에 두고 감싸주는 형식으로 작성된다.

Not Nesting

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Use Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

      li {
        display: inline-block;
      }
    }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SCSS

scss compiler

• vs code live sass comiler
  • scss 파일로 작성 후 컴파일이 되면 css 파일이 떨어진다.
  • html 작성시 css 파일을 링크 시키면 된다.
• ruby gem - 진입 장벽이 높음
• node.js npm - 진입 장벽이 높음

문법

& - 부모 연산자를 가리킴

/* 변수 선언 - $로 시작해야 한다. */
$fs_12: 12px;
$fc_red: red;

.box {
	font-size: $fs_12;
	background: #ffcccc;

	/* .box > a */
	& > a {
		text-decoration: none;
		color: $fc_red;
		
		/* .box > a:hover */
		&:hover {
			color: #000;
		}
	}
}

media query

스크린 사이즈 정의 후 스타일 설정

@mdeia screen and (max-width: 500px) {
	font-size: 15px;
}
@mdeia screen and (min-width: 501px) and (max-width: 900px) {
	font-size: 20px;
}

mixin

속성은 같은데 값이 다를때 사용

/* mixin 선언 - include로 사용 */
/* 여러가지 속성이 겹치고 값만 바뀌어야 하는 경우 유용하게 사용할 수 있다. */
/* 파라미터에 기본값을 줄 수도 있다. */
@mixin fontSizeBgColor($fontSize: 10px, $bgColor: #eee) {
	font-size: $fontSize;
	background: $bgColor;
}

.box {
	// font-size: 40px; 
	// background: #ffcccc;
	@include fontSizeBgColor(40px, #ffcccc); // 이렇게 사용 할 수 있다. 
}

.box1 {
	// font-size: 20px;
	// background: #000;
	@include fontSizeBgColor(20px, #000);
}

extend

완전히 같은 코드가 중복되서 사용 될 때 사용

/* %로 시작해야 한다. */
/* */
%boxShape {
	border-radius: 20px;
	border: 1px solid black;
}

.box {
	@extend %boxShape;
}

partial

특정 코드들을 별도로 묶어서 다른 파일로 저장하고 그 파일을 불러다가 쓰는것
파일 이름은 underscore로 시작 해야 한다.

// _mixin.scss
@mixin fontSizeBgColor($fontSize: 10px, $bgColor: #eee) {
	font-size: $fontSize;
	background: $bgColor;
}

// pariatl/_style.scss
...

// common.scss
// 불러들일때는 import를 사용하고, underscore를 제외한 이름을 적어준다. 
@import "mixin"
@import "parial/style" // 이때도 underscore를 빼고 사용한다. 

.box1 {
	@include fontSizeBgColor(20px, #000);
}

if

@mixin textAndBgColor($textColor, $bgColor) {
	color: $textColor;
	background: $bgColor;
}

// if, else if, else 로 조건에 일치할 때 다른 스타일을 적용 
@mixin theme($mood) {
	@if $mood == 'light' {
		@include textAndBgColor(#ccc, #eee)
	}
	@else if $mood == 'dark' {
		@include textAndBgColor(#fff, black)
	}
	@else {
		@include textAndBgColor(red, #aaa)
	}
}

.box1 {
	@include theme('light');
}

.box2 {
	@include theme('dark');
}

.box3 {
	@include theme('orange');
}