SCSS ② 기본문법정리

ㅋiㅁi·2021년 12월 13일
0

LIBRARY

목록 보기
6/7
post-thumbnail

공부하면서 계속 추가할 예정 👩‍🍳💕

SCSS

CSS에 programming 요소를 한스푼 얹은... 😉

Contents

◼ 변수 (Variables)

$main-color : red;
  • 변수명은 숫자로 시작하지 않는다.
  • 변수는 css의 값으로 사용할 수 있다.
  • 문자열은 그대로 ''따옴표 사용하여 입력.
  • 그 외에 SCSS에서 넣을 수 있는 다양한 값들이 존재함.
    - 기본 패턴 : 회사 convention마다 다름.
    1) 소문자만 사용 (이어쓸 때는 - 사용)
    2) 대문자만 사용 (이어쓸 때는 _ 사용)

변수의 특징

  • SCSS 변수도 전역변수, 지역변수가 존재한다.
$main-color: black;

.content {
  color: $main-color // black
}

.aside {
  $main-color: red;
  color: $main-color // red
}

변수 활용 (+이름)

  • 💡 Figma로 변수 잡을 때 각각의 컬러를 클릭하기 보다는 design system에 들어가서 여백부분을 클릭하면 우측 메뉴에 해당 페이지에 사용되는 컬러, 폰트사이즈 등 정보가 출력된다!
  • 💡 Figma 전체 프레임 클릭 - 우측 메뉴: selection colors에서 컬러 클릭 - 해당 컬러가 사용되는 컴포넌트 확인 가능
  • 💡 Figma의 경우 컬러이름의 variable을 설정할 수 있다. (퍼블리싱시 용이함)

변수 활용: Colors

- 이렇게 명확하게 컬러 이름을 정할 수 없는 경우 (grayscale):
1) gray-1
여기서 1은 #121212의 앞글자의 1을 뜻한다
즉, 숫자가 커지면 커질수록 컬러는 옅어짐. 숫자 ~ 알파벳
단점: 디자이너가 컬러를 바꾸게 되면 변수명도 함께 바꿔야 됨.

2) primary (주로 본문 텍스트 기준)
해당 컬러가 사용되는 상황에 따라 이름을 지어줌
dark, primary, secondary, tertiary, border, background, white

3) 그 외 : 인터넷에서 보고 괜찮은거 찾아봄

https://codeandplayclub.com/docs/global-colors.html

변수 이름 TIP 👇
https://webdesign.tutsplus.com/articles/quick-tip-name-your-sass-variables-modularly--webdesign-13364

변수 활용: Typography

  • 주로 타이포그래피의 경우, line-height와 letter-spacing이 잘 지켜지지 않은 채 퍼블리싱이 되는 경우가 많음! (제각각인 경우도 있고?)
  • 그래서 디자인에 따라 변수는 달라지겠지만, 엄격하게 지켜지는 상황을 따라서 SCSS를 적는 경우,
$font-size-12: 12px;
$line-height-12: 16px;
$letter-spacing-12: -0.005em;
  • 폰트사이즈를 끝에 적어 해당 폰트사이즈에 맞는 line-height와 letter-spacing을 유추할 수 있도록 함.
$font-main: 'Roboto', sans-serif;
$font-price: 'Noto Sans KR', sans-serif;
  • 폰트 서체의 경우 각 기능별로 입력한다.

◼ 보간법 (Interpolation)

Interpolation 사용 구간

Selectors in style rules
Property names in declarations
Custom property values
CSS at-rules
@extends
Plain CSS @imports
Quoted or unquoted strings
Special functions
Plain CSS function names
Loud comments

  • 인터폴레이션은 변수의 값을 문자열 그대로 삽입
  • 연산의 대상으로 취급되지 않는다.
  • 변수의 경우 프로퍼티의 값에만 사용될 수 있지만 만약에 인터폴레이션을 사용하면 셀렉터와 프로퍼티 명에도 사용할 수 있다.

$bold: 600;
$font-size: 16px;
$line-height: 32px;

p.#{$bold}{ //셀렉터
  font-weight: $bold;
  font: #{$font-size} / #{$line-height}; // 16px / 32px
  // 의도대로 연산되지 않고 제대로 출력됨.
}

◼ Style Rules

Overview

Nesting

  • 여러번 쓸 필요없이 부모 셀럭터 안에 자식 셀럭터를 넣는 형식으로 코드를 줄일 수 있다.
ul {
	display: flex; 
    
	li { background-color: yellow; }
    a { display: block; }
}

Parent Selector

  • & 를 사용한다.
  • 해당 셀렉터는 nested selector에 사용된다.
  • nested-selector 에서 조상 셀렉터를 & 키워드로 대신 사용된다.
/* AS-IS : CSS */
button,
a {
  background-color: #000;
}

button:hover,
a:hover{
  background-color: #eee;
}

:not(button),
:not(a){
  opacity: 0.8;
}

/* TO-BE : SCSS*/
button,
a {
  background-color: #000;
  
  &:hover {
    background-color: #eee;
  }
  
  :not(&) {
    opacity: 0.8;
  }
}
  • pseudo-classes / pseudo-class selectors에 사용 가능 
/* AS-IS : CSS */
.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: block;
}

/* TO-BE : SCSS*/
.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;

    &--open {
      display: block;
    }
  }
}
  • suffix의 용도로 사용가능

Placeholder Selectors

  • 클래스 선택자와 비슷하지만 다른 점은 CSS output에 바로 뜨지 않는 점이다.
  • placeholder는 %를 활용하여 선택할 수 있다.
.alert:hover, %strong-alert {
  font-weight: bold;
}

/* 
 * CSS OUTPUT : placeholder는 바로 보이지 않음.
 */

.alert:hover {
  font-weight: bold;
}
  • CSS에 placeholder를 사용하기 위해서는 @extend 키워드를 사용한다.
%button {
	padding: 10px 20px;
	border-radius: 5px;
	transition: all .5s linear;
	&:hover { 
	  opacity: .8 
	}
}

.alert-btn{
  @extend %button;
  background-color: red;
}
  • @extend 관련 글은 At-Rules에 더 적을 예정!

◼ At-Rules

@mixin & @include

  • 재사용성 코드를 @mixin화 하여 각각의 컴포넌트에 @include하는 것.
  • function화 한다고 생각하면 될 듯!
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

/****************************************/

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}
  • 매개변수가 들어갈 수 있다.
@mixin font ( $fontsize, $fontweight, $color ){
  font-size: $fontsize;
  font-weight: $fontweight;
  color: $color;
}

.container {
  @include font(12,bold,black)
}

@mixin with @content

  • content의 경우 만약에 @mixin안에 속성과 값이 들어가는 형태가 아닌 새로운 block형태의 값이 들어갈 경우 콘텐츠의 위치를 알려준다.
@mixin hover {
  &:hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px; //값이 block형태 내에 들어가게 됨.
  }
}

@function

-이 역시 @mixin처럼 function화 한다. 다만 다른점은 @function의 경우 값을 리턴해야 한다.

@function _px($num) {
  @return $num + px;
}

em {
  font-size: _px(12);
}

@function에 들어갈 수 있는 요소

  1. Universal Statements : 이 타입은 Sass stylesheet어디든 들어갈 수 있다.
  • Variable declarations, like$var: value.
  • Flow control at-rules, like @if, @each, @for, @while
  • The @error, @warn, and @debug rules.
  1. @return

@extend

  • BEM 네이밍 기법처럼 공통 스타일에서 확장하는 느낌으로 클래스를 작성할 때 @extend를 사용한다.
  • parent selector (style rules) 사용 시 @extend 유무에 따른 다른 점
  • placeholder와도 함께 사용 가능 → 관련 내용은 상단에
  • @media에서 사용 가능. 단, @extend를 하는 선택자는 @media 안에 존재해야 된다. → 안쓰는게 나을거 같고, 사용방법을 읽어보면 @media에 사용할 이유도 굳이 없다.
/*
 * 1. @extend 사용
 */
 
.error {
  border: 1px #f00;
  background-color: #fdd;

   &--serious {
     @extend .error;
     border-width: 3px;
   }
 }

.error, .error--serious { /* 공통 스타일 적용 */
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

/*
 * 2. @extend 미사용
 */
 
 .error {
  border: 1px #f00;
  background-color: #fdd;

   &--serious {
     border-width: 3px;
   }
  }

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious { /* 이름만 이어지고 공통 스타일 X */
  border-width: 3px;
}
  • @extend 사용 시, pseudo-class역시 함께 적용됨
.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
}

/* CSS OUTPUT */
.error:hover, .error--serious:hover {
  background-color: #fee;
}
  • @mixin과는 거의 비슷하지만 매개변수의 유무에 따라 둘 중 하나를 선택하면 되고 확장하는 개념이라고 생각될 때는 @extend를 사용하는게 좋다.

- Flow Control : @for

  • 자바스크립트의 for문과 같은 기능을 제공함
    @for <variable> from <expression> to <expression> { ... }
    @for <variable> from <expression> through <expression> { ... }

  • to키워드 사용시 마지막 숫자 불포함

  • through키워드 사용시 마지막 숫자 포함

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

/****************************************/

ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

- Flow Control : @if & @else

@if <expression> { ... }

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

◼ Built-In Modules

sass:math

math.percentage($number)
percentage($number)
  • $number * 100%를 해주어 % 단위로 만들어 준다.

sass:map

maps 만들기

$font-weights: (
"regular": 400, 
"medium": 500, 
"bold": 700
);
  • keys, values 형태로 만들어졌다.

map-get

map.get($map, $key, $keys...) 
map-get($map, $key, $keys...)
  • 맵의 값을 가져올 때 사용
  • 맵의 값이 없는 경우 null반환
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

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

📚 모든 글은 SCSS doc을 공부하고 난 후 작성합니다.
📚 이해가 안되는 부분은 하단의 웹사이트를 참고하였습니다.
https://poiemaweb.com/sass-script

profile
ㅋiㅁi
Frontend Developer
이전 포스트

SCSS ① 개발환경설정

다음 포스트

SCSS ③ 유용한 웹사이트 모음

0개의 댓글

관련 채용 정보