[CSS][SCSS] SCSS의 기본 개념

https://github.com/joohaem/prt-scss

GitHub - joohaem/prt-scss: what is SCSS (nomad coders/boostcourse)

 

---

CSS Preprocessor란?

별도의 컴파일과정을 통해 CSS의 기능을 확장하고, 반복적인 작업을 자동화 하게 도와 주는 툴

 

SASS ( Syntactically Awesome Stylesheets )

CSS 호환성 / 다양한 프레임워크 / 많은 실무 사용 사례

 

문법

// scss, Sassy CSS
ul {
  li {
    display: block;				    
  }
}
 
// sass
ul 
  li 
    display: block					
 
// Compiled CSS
ul li {
  display: block;
}

 

세팅하기

1. https://github.com/joohaem/prt-scss/tree/a47d68f6945db7237b7d322922acf45b57ddbc19
2. .babelrc / .gulpfile.babel.js / package.json / package-lock.json 등 scss 세팅 파일들을 복붙, 혹은 위 링크에서 clone 한다
3. npm install or npm i
4. npm run dev

.gulpfile.babel.js 에서

 

const routes = {
  css: {
    watch: "src/scss/*",
    src: "src/scss/styles.scss",
    dest: "dist/css"
  }
};

 

• 코드에 의해 src 파일이 dest 파일에 Compile 된다
• Compile을 원하지 않은 파일은 _를 붙여 저장한다. ex> _variables.scss (styles.scss 파일에서 @import "_variables";)
• index.html 에서는 dist/css/styles.css 파일을 불러온다

 

Nesting

자식 선택자를 부모 선택자 블럭 안에 중첩해 쓴다 (가급적 3뎁스 이내로; 가독성)

 

.espresso {
   color: red;
 
	&:hover {
		color: orange; // 가상 클래스
	}
	&::after {
		color: yellow; // 가상 요소
	}
	&.americano {
		color: blue; // 클래스 선택자
	}
}

 

Variables

$bg: #ffe; 와 같은 형식으로 변수를 선언한다

 

a {
	color: $color-normal;
 
	&:hover {
		color: $color-point;
	}
}
 
p.#{$name} {
	#{$attr}-color: blue;
}

 

Mixins

어떤 종류의 argument를 mixin에 보내 css의 결과값을 바꾼다

 

@mixin myLink($word) {
  text-decoration: none;
  display: block;
  @if $word == "odd" {
    color: darkred;
  } @else {
    color: darkblue;
  }
}
 
a {
  &:nth-child(odd) {
    @include myLink("odd");
  }
  &:nth-child(even) {
    @include myLink("even");
  }
}

 

// 기본값 설정
@mixin border($color, $width: 1px) {
	border: {
		color: $color;
		width: $width;
		style: solid;
	}
}
// 인자... 로 갯수에 영향 X
@mixin margin($variable...) {
	margin: $variable;
}
 
p { 
   @include border(red); 
} 
p { 
   @include margin(5px 5px);
}

 

Extends

많은 CSS style을 재사용 할 때 사용된다

자식선택자, 인접선택자로 사용할 수 없다

 

%water {
	font-size: 12px;
	text-align: center;
	color: #fff;
}
 
.americano {
	@extend %water;
	background-color: red;
}
.americano_ice {
	@extend %water;
   background-color: blue;
}

 

@content, 반응형 Mixins 활용

@content로 include 한 컨텐츠 블록을 믹스인에 통으로 전달할 수 있다

미디어 쿼리문으로 반응형을 작성할 때 유용하다

 

@mixin responsive($device) {
  @if $device == "phone" {
    @media screen and (max-width: 768px), screen and (max-height: 768px) and (orientation: landscape)  {
       @content;
    }
  } @else if $device == "tablet" {
    @media screen and (max-width: 375px), screen and (max-height: 375px) and (orientation: landscape) {
       @content;
    }
  }
}
 
h3 {
  color: blue;
  @include responsive("tablet") {
    color: green;
  }
  @include responsive("phone") {
    color:red;
  }
}