🦁_21.11.24(2) TIL

21년 11월 24일(2)

📝 Sass

Sass: Syntactically Awesome Style Sheets

• Sass/SCSS를 쓰는 이유
  • 스타일 시트가 점점 더 커지고 복잡해지면서 유지보수가 어려움
  • Sass 안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 CSS에 없는 편의 기능들을 통해 시간 절약
  • 코드 재사용성 용이

📎 Sass

• Sass 는 CSS로 컴파일 되는 스타일 시트 확장 언어이며, CSS 전처리기(CSS pre-processor)의 하나
• 브라우저가 Sass를 직접 로딩하는 것이 아니라 Sass를 기반으로 개발한 후, CSS로 export하는 과정을 거침
  => 브라우저는 Sass 파일을 직접 읽지 못하므로 일반 CSS로 컴파일하는 과정이 필요
  => 실제 웹 업계에서 많이 사용하는 전처리기

Sass 기술방식

• .sass 기술방식
  => 선택자의 유효범위를 들여쓰기로 구분
  => 세미콜론;을 사용하지 않음

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

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

• .scss 기술방식
  => 선택자의 유효범위를 중괄호{}로 구분

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

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

Sass와 SCSS의 차이점

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass기능을 지원한다

📎 환경설정

Sass 👉 CSS 로 컴파일 하는 방법

Sass(SCSS)는 웹에서 직접 동작할 수 없고, 웹은 기본적으로 css 파일로만 동작하기 때문에 이 파일들은 별도로 컴파일 하는 과정을 거쳐 CSS 파일로 변환하여 사용
=> 다양한 방법으로 컴파일 가능

• VSC의 Live Sass Compiler Extension을 사용
  

• VSC Extension이 아닌 터미널을 사용 방법
  • npm을 설치 : node.js를 설치하면 npm도 자동으로 설치됨
    => 홈페이지(http://www.nodejs.org)에서 LTS 버전으로 다운받기
  • VSC에서 터미널(Ctrl + ` ) 열기
  • npm -v : npm 버전이 출력되면 설치되어 있음을 의미
    
  • npm init -y : -y를 써서 질문없이 기본 세팅 진행 (주의! 폴더명이 한글인 경우 에러가 발생할 수 있다)
    
    => package.json 파일이 생성됨
    
  • npm i node-sass : node-sass 설치
    
    => node_modules, package-lock.json 파일이 생성됨
    (주의! git commit할 경우, 이 파일들은 .gitignore 파일 안에 작성하여 commit 에 제외 시키기)
    
  • package.json 안에 "scripts" 부분에 컴파일 할 파일과 컴파일 될 파일명 작성
    => Sass에게 빌드할 파일과 CSS를 출력할 위치를 지정해야 한다.
    => 터미널에서 실행하면 단일 Sass 파일인 input.scss가 발생하고 해당 파일이 output.css로 컴파일 된다.
    
    
    [해당 위치에 컴파일 된 css파일이 생성되도록 지정]
  • npm run sass : Sass파일을 CSS파일로 컴파일 실행
    
  • Sass 업데이트 하기 : -options 사용
    => [옵션] 부분에 -w, -r 을 추가

    -w, --watch 
    // Wahch a directory or file
    -r, -recursive
    // Recursively watch directories or files

  • -w : 옵션이 없을 때 Sass 파일을 수정할 때마다 컴파일러를 실행시켜야한다. -w 옵션을 추가하면 Sass가 꺼지지 않고 지속적으로 Sass 파일의 변경사항을 감시하면서 저장할 때마다 자동으로 컴파일을 해준다.
  • -r : -w와 비슷하나 -w만 추가했을 경우, 메인 파일만 감시하고 그 외의 파일들은 감시하지 않는다. -r을 추가할 경우, 메인 파일에 import한 다른 파일도 함께 감시한다.

    참고 링크

    https://www.npmjs.com/package/node-sass

📎 파일 분리

프로젝트를 진행할 때 파일을 분리하여 코드 관리

• 각 프레임 별(_header.scss, _home.scss) CSS를 분리
• _variable.scss, _mixin.scss 분리
• 메인 파일인 style.scss에 분리했던 파일들을 @import
  => 파일을 스타일, 기능 및 레이아웃 별로 분리하여 사용하기 때문에 코드 관리가 용이하다.
  
• 파일명 앞에 언더바(_)의 의미 : Scss 파일 이름 앞에 언더바(_)를 붙인다면, Sass에게 이 파일이 메인 파일의 일부임을 알려줘서 해당 파일은 CSS파일로 컴파일 하지 않고 내부에서 @import 형태로 작동
  => Sass에서 @import할 때, 확장명을 제외하고 파일명만 사용 가능
  => CSS에서 @import할 때는 파일의 URL을 작성해야한다.

📎 주석

/* 여러줄 주석인 이렇게 작성합니다 */
// 한 줄 주석은 이렇게 작성합니다.
// 한 줄 주석은 CSS로 컴파일 되면 보이지 않습니다.

📎 중첩(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 */
/* 위의 Sass 코드와 동일 */
nav {
  background : #C39BD3;
  padding : 10px;
  height: 50px;
}

nav ul {
  display: flex;
  list-style : none;
  justify-content: flex-end;
}

nav ul li {
  color: white;
  margin-right: 10px;
}

중첩을 사용하는 이유

• CSS는 부모에게 상속된 자식 요소에게 스타일 적용 시 최상위 선택자를 반복 선언해야 한다.
• 중첩을 사용할 경우 최상위 선택자를 한 번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있어 반복된 코드가 줄어든다.
• 하자만 지나친 중첩은 피해야한다. 깊이 중첩되면 코드를 보는게 불편하고, 컴파일 했을 경우 불필요한 선택자를 사용하게 된다.

📎 속성 Nesting

• 선택자 뿐만 아니라 스타일 속성에도 중첩할 수 있다.
• 속성을 중첩할 때 콜론(:)을 사용
  => Sass는 속성이 중첩되었음을 인지하고 CSS 속성들로 변환

// Scss
.bg-nesting {
  background : {
    image: url("../img/bg-main.png");
    position: center center;
    repeat: no-repeat;
    size: auto 450px;
  }
}

/* CSS */
.bg-nesting {
  background-image: url("../img/bg-main.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 450px;
}

📎 Ampersand(&)

• & 키워드는 상위에 있는 부모 선택자를 가리킴

& 키워드를 이용해 가상 요소, 가상클래스 참조

// Scss
.box {
  // 가상 클래스
  &:focus{};
  &:hover{};
  &:active{};
  &:first-child{};
  &:nth-child(2){};
  // 가상 요소
  &::after{};
  &::before{};
}

// Scss 예시
ul {
  li {
    &:hover {
      background: #fff;
      color: #333;
    }
    &:last-child {
      margin-bottom: 20px;
    }
  }
}

/* CSS */
ul li:hover {
  background: #fff;
  color: #333;
}

ul li:last-child {
  margin-bottom: 20px;
}

공통 클래스 명을 가진 선택자 중첩

// Sass 
.box {
  &-yellow{
    background-color: yellow; 
  }
  &-red{
    background-color: red; 
  }
  &-green{
    background-color: green; 
  }
}

/* CSS */
.box-yellow {
  background-color: yellow; 
}
.box-red {
  background-color: red; 
}
.box-green {
  background-color: green; 
}

📎 @at-root

• @at-root 키워드를 사용하면 중첩에서 벗어날 수 있다.
  => 중첩에서 벗어나고 싶은 선택자 앞에 @at-root를 작성
  => 중첩된 선택자에게만 사용 가능

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

/* CSS */
.article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.article .article-content {
  font-size: 14px;
  opacity: 0.7;
}
/* 중첩을 빠져나옴! */
i { 
  opacity: 0.5;
}

📎 변수(Variable)

CSS에서 변수?

• 변수 선언
  = 값을 하나하나 고칠 필요가 없다.
  = 유지보수, 재사용성 용이
• 단, 무분별한 변수 선언 주의
• 변수 선언의 기준
  • 값이 적어도 두 번 반복
  • 기존의 값이 적어도 한 번은 수정될 가능성이 클 경우
• 절대 수정될 일이 없거나 한 군데에서만 사용되는 변수를 선언하는 것은 아무 의미 없다.

변수 생성하기

• $기호를 사용하여 스타일을 적용할 값을 저장

// $변수명 : 값

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

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

변수 type

• Numbers : 단위를 포함하거나 포함하지 않을 수 있다.
  => 12, 100px
• Strings : 따옴표를 포함하거나 포함하지 않을 수 있다.
  => "Helvetica Neue", bold
• Colors : 일반적인 red, green 과 같은 색상이나 #f0f0f0 등의 Hex 표현으로도 작성할 수 있다.
  => rgb(107, 113, 127), hsl(210, 100%, 20%).
• Lists : 쉼표나 공백으로 List 를 구분하여 작성한다.
  => Helvetica, Arial, sans-serif
  => 10px 15px 0 0
• Boolean : true, false
• Null : 자바스크립트의 null과 마찬가지로 아무것도 없는 값을 나타낸다.
• Maps : 객체와 유사하게 key값과 value 값을 작성한다.
  => ("background" : red, "border-color" : blue)
• Function : Sass에서 제공하는 내장함수와 임의로 작성할 수 있는 함수가 있다. (@function)
  => 참고 - Sass Functions

변수 type - Lists

• 순서가 있는 값으로 값마다 인덱스를 가짐
• lists 요소의 구분 : 쉼표(,), 공백( ), 슬래시(/)로 일관성 있게 구분
  => 다른 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식
  => 빈 lists 또는 lists의 값이 하나인 경우, []나 ()를 사용
• lists의 인덱스는 1부터 시작
  (0부터 시작하지 않음)

$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;

• lists 관련 내장 함수
  • append($list, $value) : lists에 값을 추가
  • index($list, $value) : lists의 값에 대한 인덱스 리턴
  • nth($list, n) : lists의 인덱스에 해당하는 값을 리턴

// append
@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

// index
@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

// nth
$valid-sides: left, center, right;

.screen-box {
  text-align : nth($valid-sides, 1); // left
}

변수 type - Maps

• 괄호() 안에 키: 값의 형대로 저장하여 사용
  • 키는 고유해야 하지만 키에 해당하는 값은 중복 가능
• 변수를 각각 선언하는 대신, 관련있는 변수들을 모아 Maps로 만들어서 사용할 수 있다.
• Maps 관련 내장 함수
  • get($map, $key) : 키에 해당하는 값을 리턴

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

변수의 Scope(유효범위)

• 지역변수 : 선언한 자기자신을 감싸고 있는 중괄호{} 안에서 사용
  => 하위 단계의 중괄호{}에서도 사용 가능
• 전역변수 : 가장 윗 부분에 정의하여 파일 내 어디서든지 사용 가능
  => 전역변수를 파일로 만들어서 사용하는 경우, 메인 scss 파일에서 전역변수 파일을 다른 파일들보다 상단에 위치해야 한다.

$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;
  local: $local-variable;  // This would fail, because $local-variable isn't in scope.
}

• !global : 지역변수를 전역범위에 할당하여 전역변수로 사용 가능

// scss
$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

/* css */
.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

📎 Operator

📎 Mixin

📎 Extend

---

마무리

• 곰곰히 생각해보니 최근 액션플랜 1순위에 체력 관리를 작성해놓고 할 거 다~~~ 하고 하루의 끄트머리에 챙겼다.
  => 어쩐지 자전거 돌리는게 점점 힘들었어
  => 그래서 오늘은 특강 끝나고 냅다 자전거 돌렸더니 개운-
  => 내가 어떤 것을 우선적으로 생각할 지 되돌아봐야겠다.
• Sass(SCSS)를 배워보고 싶었는데 멋사... 감사합니다♡
  => CSS로 작성 했던 파일을 SCSS로 바꾸는 건 꽤나 어렵구나... 하지만 즐겁, 꽤잼