HwiDoorumi

1. 기본 mixin 사용법

@mixin 믹스인이름(매개변수){
	스타일 정의
}

@include 믹스인이름(매개변수);

mixin은 @mixin 으로 정의하고, @include로 사용된다.

2. mixin 예시 : 타이틀형 텍스트

@mixin text-title($weight: 700, $spacing: -0.03em){
	font-size:20px;
    line-height:36px;
    font-weight:$weight;
    letter-spacing:$spacing;
}

.textTitle01{
	@include text-title();
}

.textTitle02{
	@include text-title(500)
}

.textTitle03{
	@include text-title(400, -0.05em)
}

설명: mixin text-title의 경우 기본적인 스타일에서, weight와 spacing을 인자로 받는다.

.textTitle01의 경우 매개변수의 기본 스타일인 font-weight:700, letter-spacing: -0.03em의 스타일을 가진다.

.textTitle02의 경우 첫번째 인자인 500만을 받아, font-weight:500, letter-spacing: -0.03em의 스타일을 가진다.

.textTitle03의 경우 두개의 인자를 받아, font-weight:400, letter-spacing: -0.05em의 스타일을 가진다.

3. mixin 예시 : bg아이콘

@mixin bg-icon($name, $width: 20px, $height: 20px, $format: 'png'){
	width: $width;
    height: $height;
    background: url('~assets/images/icon/#{$name}.#{$format}') no-repeat 0 0;
    background-size: 100%
}

.testBgIcon01{
	@include bg-icon('icon-clear')
}

.testBgIcon02{
	@include bg-icon('icon-clear', 30px, 30px)
}

.testBgIcon03{
	@include bg-icon('icon-clear', 30px, 30px, 'jpg')
}

설명: mixin bg-icon의 경우 기본적인 스타일 +  name, width, height, format 을 인자로 받는다.

.testBgIcon01의 경우 $name의 인자 하나를 받고, 기본 스타일을 가져간다.
: 20px/20px의 크기로 '~/assets/images/icon/icon-clear.png'의 경로를 가진다.

.testBgIcon02의 경우 $name, $width, $height의 인자 3개를 받고, 매개변수의 순서에 맞게 정의된다.

: 30px/30px의 크기로 '~/assets/images/icon/icon-clear.png'의 경로를 가진다.

.testBgIcon03의 경우 $name, $width, $height, $format의 인자 4개를 받고, 매개변수의 순서에 맞게 정의된다.
: 30px/30px의 크기로 '~/assets/images/icon/icon-clear.jpg'의 경로를 가진다.

nm817.tistory.com/37?category=816930

위 글을 보면 추가글로 정리해두었지만, 써놓고 내가 못찾아서 다시 정리합니다..........

{
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
         
        "**/node_modules/**",
        ".vscode/**" 
    ],
    "liveSassCompile.settings.generateMap": 
      false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    "editor.fontSize": 14,
    "editor.renderWhitespace": "all",
    "editor.wordWrap": "on",
    "emmet.triggerExpansionOnTab": true,
    "editor.tabCompletion": "on"
}

상세내용 및 세팅방식은 상위 글 참조

[sass란?]

sass는 css의 전처리기, 즉 해석되어 css로 컴파일되는 스크립트 언어이다.

기존 우리가 사용하던 sass에서 많이들 들어봤을 mixin, function 등 여러 기능을 제공한다.

또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다.

sassScript는 4가지 자료형을 지원하는데, 수(int), 문자열(string), 컬러, 불린(boolean)을 지원한다.

[SCSS란?]

scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며,

css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다.

[sass와 SCSS의 구문 차이]

[sass의 문법]

ul.list
	overflow:hidden
	li
    	float:left
        width:200px
        padding: 20px 30px

[scss의 문법]

ul.list {
	overflow:hidden;
	li {
		float:left;
		width:200px;
		padding: 20px 30px;
	}
}

sass의 경우 '들여쓰기'로 구분하고, scss는 기존 css와 같이 { }로 범위를 구분한다.

가독성을 따져보자면 sass가 더 깔끔하고 간단하지만,

깔끔하고 간단한 sass를 선호하는 사람이 있는 반면, 기존 css 문법과 비슷한 scss를 선호하는 사람도 많다.