개발야옹

Sass (Synthetically Awesome StyleSheetes)

Sass는 CSS전처리기로 변수, 상소그 혼합, 중첩 등의 다양한 기능을 제공합니다.

CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램

SCSS 

SCSS는 Sass 3 버전부터 새롭게 등장하였다.

Sass의 모든 기능을 지원하는 Superset으로, CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어 편리합니다.

Sass와 SCSS의 차이점

• Sass: 중괄호가 아닌 들여쓰기를 사용한다.
• SCSS: CSS처럼 {} 와 ; 을 사용한다.

1. SCSS의 자료형

Sass, SCSS는 다음 아래와 같은 자료형들을 지원하며, 속성값으로 사용할 수 있다.

$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
	l: light,
	d: dark,
);

2.  Nesting (중첩)

Nesting을 통해 상위 선택자의 반복을 줄일 수 있다.

복잡한 구조를 더 편리하게 개선할 수 있다.

/* SCSS */
.outer-container {
	width: 200px;
	height: 200px
    
    .inner-container {
    	width: 100px;
        height: 100px;
    }
}


/* Compile to CSS */
.outer-container {
	width: 200px;
	height: 200px;
}

.outer-container .inner-container {
	width: 100px;
	height: 100px;
}

3. & (상위 선택자 참조)

중첩 내부에서 & 키워드는 상위(부모)선택자로 치환된다.

/* SCSS */
.container {
	width: 100px;
    
    &.box {
    	width: 50px;
        color: blue;
    }
}

/* Compile to CSS */
.container {
	width: 100px;
}

.container .box {
	width: 50px;
	color: blue;
}

4. Variables (변수)

반복적으로 사용되는 값을 변수로 지정할 수 있다.

변수 선언 방법은 변수이름 앞에 $ 를 붙이면 된다.

/* SCSS */
$primary: #010101;
$profile-images: "/assetes/images/";
$icon-width: 24px;
$icon-height: 24px;

.icon {
	width: $icon-width;
	height: $icon-height;
    background: $primary;
}


/* Compile to CSS */
.icon {
	width: 24px;
	height: 24px;
    background: #010101;
}

5. #{}

#{}는 리터럴처럼 변수 값을 넣을 수 있게 해준다.

/* SCSS */
$profile: "profile.png";
@import url("/assets/images/#{$profile}");

/* Compile to CSS */
@import url("/assets/images/profile.png");

6. 연산자

레이아웃을 디테일하게 디자인할 때 유용하게 사용할 수 있다.

7. Mixin

Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다.

@mixin을 통해 스타일을 선언한다. 

@include를 통해 사용한다.

/* @mixin 선언 */

@mixin large {
	font: {
    	size: 2rem;
        weight: bold;
    }
    color: red;
}

/* @include 사용 */
h1 {
	@include large
}

8. 함수

함수를 정의하여 사용할 수 있다.

Mixin과의 차이점은 반환 값이 다르다는 것이다.

Mixin은 지정한 스타일을 반환하고, 함수는 계산된 특정 값을 반환한다.

@function column($number: 1, $columns: 12) {
	@return $max-width * ($number / $columns);
}

.box-container {
	width: $max-width;
    
    .box1 {
    	width: columns(); // 1
    }

    .box2 {
        width: columns(8);
    }
}

9. 조건문

if(조건문, 참, 거짓);

조건문이 참인 경우 참값을, 거짓인 경우 거짓 값을 할당

$width: 500px;

div {
	width: if($width > 300px, $width, null);
}

10. @if, @else, @else if

조건에 따른 분기 처리 가능

$color: yellow;

div {
    @if $color == red {
    	color: #adadad;
    } @else if $color == orange {
    	color: #bdbdbd;
    } @else {
    	color: #ababab;
    }
}

11. 반복문 - @for

스타일을 반복적으로 출력

through와 to에 따라서 종료 조건이 달라진다.

• from a throudh b : a부터 b까지 반복(b 포함)
• from a to b : a 부터 b 직전까지 반복

@for $i from 1 through 3 {
	.through:nth-child(#{$i}) {
    	width: 20px * $i;
    }
}

12. 반복문 - @each

List또는 Map 데이터를 반복할 때 사용하는 반복문

/* List */
@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
    	background-image: url('/assets/images/#{$animal}.png');
    }
}

/* Map */
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
	#{$header} {
    	font-size: $size;
    }
}

13. 내장함수

SCSS에서는 다양한 내장함수를 지원한다.

• 일반 CSS
• Sass
• CSS Module
• styled-components

Sass

확장자 : .scss, .sass

import : import '저장경로';

.scss => 중괄호 세미콜론 사용

.sass => 중괄호 세미콜론 사용 X

Sass도 CSS Module로 사용이 가능하다. => 확장자 .module.scss

Sass 를 사용하기 위해서는 node-sass library를 설치해줘야 한다. 

설치

yarn add node-sass

Sass는 변수 정의를 허용한다. 변수는 $로 시작하며 변수 할당은 콜론 ( : ) 으로 마무리한다.

scss 스타일

$primary-color : #ffffff;
$primary-background : #efaba2;

.content{
	background : $primary-background;
    color : $primary-color;
}

sass 스타일

$primary-color : #ffffff
$primary-background : #efaba2

.conten{
	background : $primary-background
  	color : $primary-color

컴파일 결과

.content{
	background : #efaba2;
    	color : #ffffff;
}

CSS Module

확장자 : .module.css

import : import styles from '저장 경로';

css를 불러와서 사용할 때 className을 고유한 값, 즉 [ 파일 이름 ]_[ 클래스 이름 ]_[ 해시값 ] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지한다.

확장자를 .module.css 로 저장을 하면 자동으로 CSS Module이 적용된다.

해당 클래스는 스타일을 직접 불러온 컴포넌트 내부에서만 작동한다. 

import하고 styles를 console.log로 찍어보면 { key : value } 형태로 불러와 지는 것을 확인할 수 있다.

[ + ] classnames

classnames는 props값에 다라서 다른 style을 주기 쉽게 하기 위한 라이브러리이다. 

CSS Module을 사용할 때 classnames 라이브러리를 함께 사용하면 여러 클래스를 적용하고, 조건부를 설정할 때 편리하다.

설치

yarn add clssnames

classnames 간단한 사용방법

import cn from 'classnames';

cn( 'one' , 'two' ); // = "one two"
cn( 'one' , { two : true } ); // = "one two"
cn( 'one' , { two : false } ); // = "one"
cn( 'one' , [ 'two', 'three' ] ); // = "one two three"

const myClass = "hello";
cn('one', myClass, { myCondition : true } ); // = "one hello myCondition"

styled-components

import : import styled from "저장 경로";

설치

yarn add styled-components

CSS in JS Library로, styled-components를 대체할 라이브러리로는 emotion이 있다.

JS file 안에 style을 선언하는 방식이다. 

사용방법

import styled from 'styled-components';

const Title = styled.h1`
	font-weight : 800;
    color : lightgreen;
`;

{...}

function App(){
	return(
    	<div>
        	<Title>안녕하세요!</Title>
        </div>
    )
}

export default App;

※ 만약 props를 사용하는 경우 styled-components에서 css를 불러와 Tagged 템플릿 리터럴을 사용해 주어야 한다.

[ + ] 반응형 디자인 media query 사용

참고 :

리액트를 다루는 기술 ( 책 )

https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)

& Ampersand

상위 선택자 참조.

ex 1)

.btn {
	position : absolute;
}

.btn.active {
	color : blue;
}


/* Ampersand 활용 */

.btn{
	position : absolute;
    
    // & 가 btn으로 치환된다. 
    &.active{
    	color : blue;
    }
}

ex 2)

.list li : last-child {
	margin : 20px;
}

/* Ampersand 적용 */
.list {
	li{
    	// &가 li로 치환된다. 
    	&:last-child{
    		margin : 20px;
        }
    }
}

출처 :

https://sso-feeling.tistory.com/232

https://velog.io/@jch9537/CSS-SCSS-SASS