👁‍🗨 SCSS

• CSS보다 심플한 표기법, CSS를 구조화하여 표현 가능
• 즉, 가독성 및 재사용성을 높여주어 유지보수가 용이해짐
• 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
• 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
• 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
• 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.
• 다음과 같은 추가 기능들과 도구들을 제공한다.
  • 변수의 사용
  • 조건문과 반복문
  • 커스텀 함수
  • 수학 연산자 사용가능
  • Nesting (선택자 반복 작성 줄여주는 기능)
  • Modularity (모듈화)
  • Mixin (함수 개념)
  • Extend/Inheritance (확장/상속)

⚙️ 기능

기본적으로 중괄호 { }와 세미콜론 ;을 사용함

1. 변수의 사용

<style type="'text/css">

body {
	font-size:1em;
	color:#000;
}
</style>

<style type="'text/scss">

/* 변수 지정 */
$fontSize: 1em;
$blackColor: #000;

body {
	font-size:$fontSize;
	color:$blackColor;
}
</style>

2. Nesting (선택자 반복 작성 줄여주는 기능)

<style type="'text/css">

ul {
	margin:0;
    padding:0;
}

ul li {
	display:flex;
}

ul li:hover {
	color:#fff;
}

</style>

<style type="'text/scss">

ul {
	margin:0;
    padding:0;

	li {
	display:flex;
	
		&:hover {
			color:#fff;
        }
	}
}

</style>

3. Modularity (모듈화)

<style type="'text/scss">

@use "<불러올 scss 파일>"

@use "module1";

h1 {
  font-weight: module1.$font-weight;
}

</style>

4. Mixin (함수 개념)

@if / @else 등 제어문 사용 가능.

<style type="'text/css">

.thema {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.thema2 {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.thema3 {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

.logo {
  background-image: url('images/logo.png');
}
 
.arrow {
  background-image: url('images/arrow.png');
}
 
.photo {
  background-image: url('images/photo.jpg');
}

</style>

<style type="'text/scss">

@mixin thema($thema) {
  background: $thema;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.thema {
	@include thema($thema:DarkGray);
}

.thema {
	@include theme($thema:DarkRed);
}

.thema3 {
	@include thema($thema:DarkGreen);
}

@mixin bg($name, $path: "/images/", $format: "png") {
    background-image: url("#{$path}#{$name}.#{$format}");
}
 
.logo {
  	@include bg('logo');
}
 
.arrow {
  	@include bg('arrow');
}
 
.photo {
  	@include bg('photo', $format:'jpg');
}



/* @content 구문을 쓰면 @include로 불러와 쓸 때 내용을 추가로 입력할 수 있다. */

// Break Point
$break1: 1024px;
$break2: 768px;
 
 
 
// break1
@mixin res--break1 {
  @media screen and (min-width: #{$break1}) {
    @content;
  }
}
 
// break2
@mixin res--break2 {
  @media screen and (max-width: #{$break2}) {
    @content;
  }
}

.title {
  font-size: 16px;
    
  @include res--tablet {
    font-size: 14px;
  }
    
  @include res--mobile {
    font-size: 12px;
  }
}

/* mixin을 이용한 IR 기법 */

@mixin blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

@mixin ellipsis($lines: 1) {
  @if ($lines==1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

</style>

5. Extend/Inheritance (확장/상속)

<style type="'text/scss">

/* @extend로 공통 스타일을 상속하고 거기서 확장된 스타일을 가짐 */

.button {
  font-weight: bold;
  border-width: 1px;
}
 
.button-confirm {
  @extend .button;
  border-color: blue;
}
 
.button-error {
  @extend .button;
  border-color: red;
}
 
 
</style>

✒️ 마침

SCSS의 모든 기능들을 사용하지 않고 프로젝트를 진행하게 되어 직접 사용할 기능들만 따로 정리하여 메모장으로 남겨두었다. 멋대로 남발하지않고 잘만 사용하면 아주 유용할듯🐖