dev/HTML + CSS

CSS - SASS ① : 중첩, 앰퍼샌드, 변수, 연산자

꼿모 2023. 3. 31. 12:05

출처 : flaticon - Freepick

Sass란?


- CSS로 컴파일되는 스타일 시트의 확장 언어이며 CSS 전처리기의 하나입니다.

- Sass 기반으로 개발한 후, CSS로 익스포트 하는 후작업을 거쳐야 합니다.
- 브라우저가 Sass 파일을 직접 읽지 못합니다.  
- 웹 업계에서 실제로 많이 사용하는 전처리기입니다. 

 

 

 

 * Sass 작성 방식 

  1. .sass 
  2. .scss 

 

=> 다른 파일 확장자를 사용합니다.

 

※ 일반적으로 CSS와 더 유사한 SCSS를 사용합니다. CSS와 동일하게 중괄호로 작성하기 때문입니다. 
✏️ 전처리기 처리 과정(Sass to CSS)을 위해 VSCode에서 'Live Sass Compiler' 확장프로그램을 설치해야 합니다.

 

 

 

 

 * 파일을 더 편하게 관리하는 방법 

파일을 스타일, 기능, 레이아웃 별로 분리하여 사용하기 위해서 각 프레임 별 css를 분리하고 variable(변수)와 mixin 파일도 분리합니다. 메인 파일인 style.scss에 분리했던 파일들을 import 하면 코드를 관리하기 편합니다. 이때, 메인 파일인 style.scss에는 @import와 주석 외에 다른 코드들은 작성하지 않습니다.

출처 : 위니브

✏️ 파일명 앞에 언더바를 붙이는 이유 
scss 파일을 분리하여 관리할 때 메인이 되는 style.css를 제외한 header, home, mixin, variable 등의 파일명 앞에 '_'(언더스코어)를 붙여서 저장하면, Sass에게 이 파일이 main 파일의 일부분임을 알려주어 css로 컴파일하지 않습니다. 언더스코어를 붙이지 않는다면 분할된 파일들 모두가 컴파일되기 때문에 여러개의 .css 파일이 나눠서 저장되어 복잡해집니다. 

 

 


 주석 

- 주석을 한 줄 작성할 때는 '//'을 사용하고 여러 줄을 작성할 경우 '/* */'을 사용합니다.

- 한 줄 주석은 sass 내에서만 볼 수 있고 여러 줄 주석은 컴파일된 css 파일에 나타납니다.

 

 

 * 중첩 (Nesting) 

- 네스팅을 사용하면 HTML의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있습니다.

- CSS코드가 구조화되어 가독성이 높아지고 유지보수에 용이해집니다.

/* SASS */
.one {
  color: blue;
  .two {
    color: green;
    .three {
      color: red;
    }
  }
}

ul {
  li {
    color: red;
    font-size: 10px;
  }
}



/* CSS */
.one {
  color: blue;
}
.one .two {
  color: green;
}
.one .two .three {
  color: red;
}

ul li {
  color: red;
  font-size: 10px;
}

 

 

 속성 Nesting 

- 중첩은 선택자뿐만 아니라 스타일 속성에도 가능합니다.

- 속성을 중첩할 때는 콜론(:)을 사용합니다.  

/* SASS */
.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;
}

 

✏️ 중첩을 사용하는 이유? 
기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 적용하려고 할 때마다 최상위 선택자를 반복 선언해야 합니다. 중첩을 사용하면 최상위 선택자를 한 번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있습니다. => 코드의 반복 사용을 줄여줍니다!

 

 

 

 

 * ampersand 앰퍼샌드 

- "&"는 상위에 있는 부모 선택자를 가리킵니다.
1) &을 이용해서 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있습니다.
2) &을 응용하면 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있습니다.
3) &은 자신의 부모 선택자를 참조하지만 중첩이 깊어지면 자신의 직계 부모가 아닌 최상위 부모 선택자를 참조합니다.


※ 깊은 중첩을 하게 되면 불필요한 선택자들이 사용됩니다. 중첩을 과하게 하지 않게 주의해야 합니다! 

/* SASS */
.box {
  height: 100px;
  width: 100px;
  background-color: red;
  transition: all 0.5s;
  &:hover {
    background-color: green;
  }
}



/* CSS */
.box {
  height: 100px;
  width: 100px;
  background-color: red;
  transition: all 0.5s;
}
.box:hover {
  background-color: green;
}
/* SASS */
ul {
  li {
    &:hover {
      background: white;
      cursor: pointer;
    }
    &:last-child {
      border: 2px solid black;
    }
  }
}



/* CSS */
ul li:hover {
  background: white;
  cursor: pointer;
}
ul li:last-child {
  border: 2px solid black;
}
/* SASS */
.box {
  &-yellow {
    background-color: yellow;
  }
  &-green {
    background-color: green;
  }
  &-blue {
    background-color: blue;
  }
}



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

 

 

 * @at-root 

- 중첩에서 벗어나게 하고 싶은 선택자 앞에 작성합니다.

- 컴파일된 css 코드에서 @at-root를 사용한 선택자가 중첩에서 벗어났음을 확인할 수 있습니다.

- (당연히) 중첩된 선택자에게만 사용할 수 있습니다.

/* SASS */
.one {
 color: green;
  .two {
    color: blue;

    .three {
      color: pink;

      @at-root .four {
        color: red;
      }
    }
  }
}



/* CSS */
.one {
  color: green;
}
.one .two {
  color: blue;
}
.one .two .three {
  color: pink;
}
.four {
  color: red;
}

 

 

 

 

CSS에도 변수가?

- 변수를 선언한다는 것은 값을 일일이 고치지 않아도 된다는 의미입니다. 유지보수를 매우 쉽게 만들어줍니다. 하지만 무분별한 CSS 작성은 충돌로 인한 에러를 부릅니다. 타당한 이유가 있는 변수들만 먼저 생성하고, 다음 변수는 협업자들과의 적절한 논의를 거치는 게 좋습니다. 


 * 변수를 사용하는 기준 

- 값이 두 번 이상 반복될 때 : 값을 기억하지 않고 변수명만을 가지고 스타일을 적용할 수 있습니다.
- 기존의 값을 다른 값으로 변경해야 할 때 : 변수의 값만 변경하면 되기 때문에 값이 수정될 가능성이 있다면 변수 생성을 고려합시다. 

 

 

 * 변수 생성 

- 변수를 만들 때는 $ 기호를 사용해서 스타일을 적용할 값을 저장합니다. 
- CSS 전체에 걸쳐 반복되는 값들을 정의하면 편하게 스타일링할 수 있습니다.

 

 

 * 변수 type 

  • numbers : 1, .82, 20px, 2em 등
  • strings : "./images/a.png", bold, left, uppercase 등
  • color :  green, #FFF, rgba(255,0,0,.5) 등
  • booleans : true, false
  • lists
  • maps
  • null 
/* SASS */
/* 색상 */ 
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282a36;

/* 폰트사이즈 */
$font-p: 13px;
$font-h1: 28px;

/* 폰트 */
$base-font: "Noto Sans KR", sans-serif;

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

/* maps */
$font-sizes: (
  "h1": 45px,
  "h2": 19px,
  "p": 16px,
);

.title {
  font-size: nth($sizes, 1);
}
.title2 {
  font-size: map-get($font-sizes, "h2");
}



/* CSS */
.title {
  font-size: 40px;
}

.title2 {
  font-size: 19px;
}

 

 

 

 * Lists 

- 리스트는 순서가 있는 값으로 값마다 인덱스를 가지고 있습니다.
- 요소들은 쉼표(,)나 공백 또는 슬래시( / )로 구분하여 생성합니다.
- 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식됩니다. 
- 빈 lists를 만들 때나 lists에 들어있는 값이 하나인 경우 [ ]나 ( )를 사용합니다. 
- lists 값의 index는 1부터 시작합니다. (0이 아님!)

Lists 관련 내장 함수 
append (list,value,[separator]) lists의 값을 추가합니다.
index (list,value) lists의 값에 대한 인덱스를 반환합니다.
nth (list, n)  lists의 인덱스에 해당하는 값을 반환합니다.

 

 

 * Maps 

- maps는 ( ) 괄호 안에 키:값의 형태로 저장합니다.  
- 키는 고유해야 하지만 값은 중복이 가능합니다. 
- 변수를 각각 선언하는 대신, 관련 있는 변수들을 모아 maps로 사용할 수 있습니다. 

map 관련 내장 함수
map-get(map,key) 키에 해당하는 값을 반환합니다.
map-keys(map) map에 들어있는 키(key) 전부를 반환합니다.
map-values(map) map에 들어있는 값(value) 전부를 반환합니다.

 

 

 

 * 변수의 Scope(유효범위) 

1. 지역변수 
- 선언한 자기 자신을 감싸고 있는 중괄호{ } 안에서 사용됩니다.
- 하위 단계에 있는 중괄호에도 사용할 수 있습니다.

/* SASS */
.one {
  $value: red;
  color: $value;
  .three {
    background-color: $value;
  }
}



/* CSS */
.one {
  color: red;
}
.one .three {
  background-color: red;
}



2. 전역변수
- 가장 윗부분에 정의하면 파일 내에 어디서든지 사용 가능합니다.
- 전역변수를 파일로 만들어 사용하는 경우, 메인 scss파일에서 다른 파일들보다 상위에 위치시킵니다.

/* SASS */
.one {
  $value: red !global;
  color: $value;
  .three {
    background-color: $value;
  }
}
.two {
  color: $value;
}



/* CSS */
.one {
  color: red;
}
.one .three {
  background-color: red;
}

.two {
  color: red;
}

 

 

연산자


 * 비교연산자 

(숫자형)

  • a < b : a가 b보다 작습니다.
  • a <= b : a가 b보다 작거나 같습니다.
  • a > b : a가 b보다 큽니다.
  • a >= b : a가 b보다 크거나 같습니다. 

(모든 타입)

  • a == b : a가 b와 값이 같다. 
  • a != b : a가 b와 값이 다르다. 
/* SASS */
$value: 32px;
p {
  @if ($value >=32px) {
    letter-spacing: 1rem;
  } @else {
    letter-spacing: 0.5rem;
  }
}



/* CSS */
p {
  letter-spacing: 1rem;
}

✏️ 비교하거나 연산하는 값의 단위가 일치하지 않으면 에러가 발생합니다. 

단위가 없는 숫자와 일반숫자를 비교하는 경우에는 에러가 발생하지 않습니다. 

 

 

※ 변수 타입에 따라 true, false 값이 약간씩 다릅니다.

  • 색상, 숫자, 문자열은 값과 단위가 동일한 경우나 값의 단위를 변환했을 때 일치하는 경우 true를 반환합니다.
  • 맵은 키와 값이 모두 동일할 때 true를 반환합니다.
  • 리스트는 들어있는 값들이 모두 동일해야 true를 반환합니다. 
  • boolean의 경우 각자 자신과 비교할 때만 true를 반환합니다.  

 

 * 산술연산자 (숫자와 색) 

  • a + b : a와 b의 값을 더합니다.
  • a - b : a에서 b의 값을 뺍니다.
  • a * b : a와 b의 값을 곱합니다.
  • a / b : a를 b로 나눕니다.
  • a % b : a에서 b를 나눈 나머지 값을 구합니다.
/* SASS */
.one {
  font-size: 10px + 10px;
}
.two {
  font-size: 30px - 10px;
}
.three {
  font-size: 10px * 2;
}
.four {
  font-size: (20px / 10);
}
.five {
  font-size: 8px % 3;
}



/* CSS */
.one {
  font-size: 20px;
}
.two {
  font-size: 20px;
}
.three {
  font-size: 20px;
}
.four {
  font-size: 2px;
}
.five {
  font-size: 2px;
}

※ 나누기를 할 때의 슬래시( / )는 리스트에서도 사용하기 때문에 혼동을 주지 않기 위해 괄호를 사용하거나 변수와 함께 써야 합니다.

 


 * String의 a + b 

- + 연산자에서 a와 b가 모두 문자열이라면 a, b를 합쳐 새로운 문자열을 반환합니다.
- a나 b 중 하나만 문자열일 경우, 문자열이 아닌 값도 문자열로 변환됩니다.

 

 

 

 * 논리 연산자 (Booleans) 

  • not : true이면 false를, false이면 true를 반환합니다.
  • and : 두 개 다 true일 때만 true를, 하나라도 false면 false를 반환합니다.
  • or : 두 개 다 false일 때만 false를, 하나라도 true면 true를 반환합니다.