Sass

Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.

• 브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 함
• 웹업계에서 실제 많이 사용하는 전처리

Sass 기술방식 2가지

Sass를 작성하는데에는 기본적으로 두가지 방법

• .sass 기술방식과 .scss 방식 → 다른 파일 확장자를 사용
• Sass와 Scss가 있는데 그 중에서 일반적으로 CSS와 좀 더 유사한 SCSS를 사용 => SCSS는 CSS와 동일하게 중괄호를 사용하는 방식

//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
	font: 100% $font-stack
	color: $primary-color
}

//Sass
$font-stack: Helvetica, sans-serif
$primary-color : #333

body 
	font: 100% $font-stack
	color: $primary-color

Sass → CSS 컴파일 방법

• 전처리기 처리 과정(Sass to CSS) :

1. Sass파일을 가져와서 웹 사이트에서 사용할 수 있는 일반 CSS 파일로 저장
2. Sass가 설치되면 터미널에서 Sass명령어를 사용하여 .SCSS파일을 Sass 컴파일러를 통해 컴파일.
3. .scss파일이 .css로 바뀜.

익스텐션 설치 후 저장을 하니 자동으로 컴파일 되어 style.css 파일이 생성된다.

파일 분리하기

각 프레임 별 css를 분리하고, variable과 mixin 파일도 따로 분리
메인 파일인 style.scss에 분리했던 파일들을 import
이렇게 파일을 스타일 별로 기능별로 분리하여 사용할 수 있으며 파일을 기능 별, 레이아웃 별로 분할해서 사용하기 때문에 코드를 관리하기 편리함

파일명 앞에 언더바 _를 붙이는 이유

• Partial
  : 언더스코어를 붙이지 않는다면 분할 된 파일들 모두가 컴파일되기 때문에 여러개의 .css파일이 나눠서 저장
  그러나 scss파일의 이름 앞에 언더스코어를 붙여서 파일명을 정한다면, Sass에게 이 파일이 main파일의 일부분임을 알려줘서 해당 파일은 css파일로 컴파일하지 않고 내부에서 @import 형태로 작동

※ css는 import할 때 파일 URL을 적어줘야 하지만, Sass에서 import할 때는 확장명을 제외하고 파일명만을 사용할 수 있음

주석

주석을 한 줄 작성할 때는 //을 사용하고, 작성한 주석 내용은 sass 내에서만 볼 수 있음
여러 줄을 작성할 경우 /*을 사용하고, scss파일이 컴파일 될 때 주석 내용이 css 파일에 나타남

중첩 (Nesting)

Nesting(중첩)을 사용하면, html의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있음
CSS코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리

<nav> <!--nav안에 ul이 중첩되어 있고-->
    <ul> <!--ul안에 세가지 li가 중첩되어 있다.-->
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul> 
</nav>

//Scss
//Scss에서도 HTML처럼 계층구조로 스타일을 적용할 수 있다.
nav{
	background : #C39BD3;
	padding : 10px;
	height: 50px;
	ul{
		display: flex;
		list-style : none;
		justify-content: flex-end;
		li{
			color: white;
			margin-right: 10px;
		} 
	}
}

사용하는 이유

기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 적용하려고 할 때마다 최상위 선택자를 반복 선언
=> 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있게 되어 코드 반복을 줄임

//Scss

info-list {
  div {
    display: flex;
    font-size: 14px;
    color: #4f4f4f;
    dt {
      font-weight: 700;
      margin-right: 7px;
    }
  }
}
// 중첩을 사용하여 부모선택자를 한번만 사용
// 그리고 코드를 봤을 때 info-list div tag안에 dt가 들어있음을 한눈에 알아볼 수 있음

속성 Nesting

중첩은 선택자뿐만 아니라 스타일 속성들도 가능
속성을 중첩 할 때는 콜론:을 사용
Sass는 속성이 중첩되었음을 인지하고 css 속성들로 변환

//Scss
.add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

/*CSS*/
.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

ampersand 앰퍼샌드

"&"는 상위에 있는 부모선택자를 가르킴

1) &을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조

.box {
	&:focus{} // 가상선택자
	&:hover{}
  &:active{}
	&:first-child{} 
  &:nth-child(2){}
	&::after{} // 가상요소
	&::before{} 
}

2) & 를 응용하면 아래 예시와 같이 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있음

//Scss
.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}
//.box라는 이름이 같기 때문에 &를 사용해 중첩구조로 만들 수 있다

3) & 은 자신의 부모 선택자를 참조하지만 중첩이 깊어지면, 자신의 직계 부모가 아닌 최상위 부모 선택자로부터 참조

//Scss
.nav {
  height: 60px;
  font-size: 18px;
  .nav-list {
    background: #3e68ff;
    span {
      padding: 10px 13px;
      a {
        color: white;
        .one {
          & .two {
            color: skyblue;
          }
        }
      }
    }
  }
}

=> 깊은 중첩을 하게 되면서 불필요한 선택자들이 사용

@at-root

@at-root 키워드를 사용하면 중첩에서 벗어날 수 있다
중첩에서 벗어나고 싶은 선택자 앞에 @at-root 를 작성
컴파일된 css 코드에서 @at-root 를 사용한 선택자가 중첩에서 벗어났음을 확인할 수 있음
중첩된 선택자에게만 사용

//Scss
.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .article-content {
    font-size: 14px;
    opacity: 0.7;
    @at-root i {
      opacity: 0.5;
    }
  }
}