Sass, SCSS

📌 Sass란?

Sass(Syntatically Awesome Style Sheets)란 css의 단점을 보완하기 위한 css 확장 언어를 의미한다. 코드의 재활용성, 가독성을 높이고 개발 효율울 더욱 높여주는 CSS 전처리기 언어이다. 복잡해지는 CSS 작업을 쉽게 해주어 유지보수도 CSS에 비해 쉽게 해준다.

Sass와 SCSS의 차이점은?

SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 상위집합니다. Sass와 SCSS은 문법에서 차이가 있다. SCSS는 CSS와 같은 문법을 사용한다. {}(중괄호)와 ;(세미콜론)의 유무이다.

📖 Nesting (중첩)

Nesting(중첩)이란 스크립트나 html와 같이 부모, 자식 관계로 묶는 것을 의미한다.
시각적으로 구조화 되어 가독성이 높아지고, CSS에서처럼 중복되는 class 네임을 반복적으로 사용하지 않아도 되어 편리하다.

// CSS
nav ul{ 
		margin:0;
        padding:0;
        liest-style: none;
      }
      
nave ul li { display: in-line-block; }

nav ul li a { 
			  display: block;	
              padding: 6px 12px;
              text-decoration: none;
            }
            
// SCCSS
nav{
  	ul { 
		 margin:0;
         padding:0;
         liest-style: none;
       }
      
  	li { display: in-line-block; }
    
  	a { 
	    display: block;	
        padding: 6px 12px;
        text-decoration: none;
       }

📖 SCSS 문법

📍 & 부모선택자

&(엠퍼샌드)는 상위에 있는 부모 선택자를 가르킨다. &을 이용하여 :hover, :fous와 같은 가상 클래스, ::before, ::after와 같은 가상 요소 , class, id 를 참조 할 수 있다.

.menu-list{
			font-size: 14px;
			color: #fff;
            
            &:hover{
            		 font-size:20px
                     font-weight: 500;
                     color: #000000;
            		}
            
            li {
            	 font-size: 14px;
                 font-weight: 700;
                 color: $white;
                
                 &::before {
                		     content: "";
                             width: 1px;
                             height: 10px;
                             backgroun-color: #red;
                		  }	
               	} 
            }

📍 @mixin, @include

@mixin은 css에서 반복적으로 사용되는 코드를 변수처럼 선언하여 사용한다.@mixin으로 재사용할 코드를 선언 한 후, @include을 이용하여 재사용할 수 있다.

@mixin 이름(매게변수) { };
@include 이름(인수) { };

@mixin common-inner { 
					  width: 1020px;
                      margin: 0 auto;
                      padding: 16px 10px;
                      color: #000;
					}
                    
.menu-list{ 
			@include common-inner;
            backgroun-color: #c9c9c9;
            border: 1px solid red;
          }

📍 $ 변수

$을 이용하여 $ 변수 이름: 값을 설정하여 변수를 만들 수 있다.

// 변수 선언
$red: #eed4sd;
$white: #ffffff;
$bg-color1: #4f56ed;
$border-color: #004f86;

.menu-list{
			color: $red;
            background-color: $bg-color1;
            border: 1px solid $border-color;
            
            li {
            	font-size: 14px;
                font-weight: 700;
                color: $white;
            	}
            }