SCSS

scss- > css preprocessor

 

사용전 컴파일, 빌드 단계가 필요함

 

Gulp - > compile 하거나 transform해주는 Node.js 패키지 (자동화 도구)

→반복적인 작업을 자동화해주는 패키지

 

SCSS를 사용하는 이유

→ 프로젝트 규모가 커지면 CSS의 유지보수가 어려워진다.

코드의 재활용성을 올리고, 가독성을 올리는 등의 CSS에서의 단점을 보완하고 , 개발 효율을 올리기 위해 사용

 

SASS/SCSS의 차이

→ SCSS는 SASS가 버전이 업데이트 되면서 기존 CSS와 호환성을 높이기 위해 도입된 문법이다

 

SCSS 변수

밑줄이 있는 SCSS 파일은 CSS로 변하지 않았으면 하는 것들임

평범한 CSS로 번역되거나 컴파일 되기 원하지 않는 파일들

기본적으로 웹 사이트에서 가장 중요한 색깔이나 중요한 스타일을 저장할 때 씀

&변수이름: value;

$bg:#eeeeee;

 

nesting(중첩)

→css를 중첩해서 사용할 수 있다.

클래스 하위에 있는 영역의 수정이 훨씬 더 간편해진다.

 /* 기존의 코드 */

.main .content{
	text-align:center;
}

.main .content p{
	text-align:left;
}

.main .content span{
	display:inline-block;
}
.main .content .txt p{
	color:red;
}

.main{
	.content{
			text-align:center;
			p {
					text-align:left;
					}
			span{
					display:inline-block;
					}
		.txt p { color: red; }
}
}

main 클래스 하위 content클래스 하위의 p태그, span태그

content클래스 하위의 txt 클래스의 p태그에 대해서 중첩이 적용

 

mixins → 함수와 비슷하나 동작을 하는 문법,

→재사용할 CSS스타일 그룹 선언을 정의하는 기능을 함.

@mixin 이름

/* _mixins.scss */

/* @mixin + 이름 */
@mixin sexytitle {
	color:blue;
	font-size:30px;
	margin-bottom:12px;
}

mixin 적용 방법

/* style.scss */
@import "_mixins";

h1{
	@include sexytitle();
}

/* _mixins.scss */

@mixin link{
	text-decoration:none;
	display:block;
}

/* 변수 허용 */
@mixin link($color){
	text-decoration:none;
	display:block;
	color:$color;
}

/* style.scss */
@import "_mixins";

a{
	@include link();
}

/*변수 허용 */
a:nth-child(odd){
	@include link(blue);
}

a:nth-child(even){
	@include link(red);
}

/* == 같은 코드 */

a{
	margin-bottom:1px;
	&:nth-child(odd){
		@include link(blue);
	}
	&:nth-child(even){
		@include link(red);
	}
}

@mixin정리

 💡 선언 (매개변수는 선택사항이다)

@mixin 이름($매개변수){
	스타일 지정
}

 💡 호출

@include 이름(인수)

 💡 예시

<div class = "wrap">
<div class = "box box1">
	<p class = "txt1"></p>
</div>

<div class = "box box2">
	<p class = "txt2"></p>
</div>

<div class = "box box3">
	<p class = "txt3"></p>
</div>

</div>

@mixin default_box{
	width:300px;
	height:50px;
	border:1px solid blue;
}

@mixin fw($weight){
	@if ($weight == 'bold'){
			font-weight:700;
		}
	 @else if($weight == 'light'){
			font-weight:200;
		}
		@else{
			font-weight:400;
			}
}

/* 글씨의 굵기 지정 */
.txt1{
	@include fw('bold');
}

.txt2{
	@include fw('light');
}

 

extends - > 코드를 확장하거나 코드를 재사용하고 싶을 떄 사용

/* style.scss */

@import "_buttons";

a{ 
	@extend %button;
	text-decoration:none;
}

button{
	@extend %button;
	border:none;
}
	

/* _buttons.scss */

%button{
	border-radius:7px;
	font-size:12px;
	text-transform:uppercase;
	padding:5px 10px;	
	background-color:blue;
	color:white;
}

 

@content (반응형 웹)

/* _mixins.scss */

/*변수 설정 */
$miniphone = 500px;
$maxiphone = 690px;

$mintablet = $miniphone + 1;
$maxtablet = 1120px;

@mixin responsive($device){
	@if $device == 'iphone'{
		@media screen and (min-width:$miniphone) and (max-width:$maxiphone){
		@content;
		}
}
	@else if $device == 'tablet'{
		@media screen and (min-width:$mintablet) and (max-width:$maxtablet){
		@content;
		}
} @else if $device == 'ipad'{
		@media screen and (min-width:$mintablet) and (max-width:$maxtablet){
		@content;
		}
}
}

@import "_mixins";

h1{
	@include responsive('iphone'){
		color:red;
	}
	@include responsive('tablet'){
		color:green;
	}
}