콘텐츠로 이동

2023 06 05

2023-06-05

SCSS (Sassy CSS)

참고: https://cocoon1787.tistory.com/843 참고: https://heropy.blog/2018/01/31/sass/ 참고: https://sass-lang.com/

  • 개요
    • css를 보다 편리하게 사용할 수 있도록 추가 기능을 지원하는 확장판 스크립트 언어
    • css의 기능 부재 단점을 보완한 다양한 기능 제공
    • 중괄호 + 세미콜론 형식으로 css를 작성해보자
      • 중첩으로 들여쓰기를 사용, 세미콜론으로 속성을 구분
    • scss가 sass 보다 css와의 호환성이 더 좋음
  • CSS가 뭐가 문제였는디?
    • 프로젝트 크기 커질수록 유지보수가 어려워짐
    • 불필요한 Selector, 연산 기능의 한계, 구문의 부재 등의 단점 부각
  • 사용방법
    • scss 문법으로 코드 작성 -> 컴파일 -> Css로 변환됨
    • 컴파일 방법...
      • SassMeister
      • node-sass
      • Gulp
      • webpack
      • parcel

  • 제공하는 기능/예시

    1. 변수 할당

      • 변수 이름 앞에는 항상 $를 붙이도록 하자!
        • 기본 스코프는 {} 안에서
      • !global 플래그를 통해 변수의 유효범위를 전역으로 설정할 수 있음! 
        body {
    font: 100% Halventica, sans-serif;
    color: aqua;
}

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

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

    2. 중첩 구문 

      nav ul {
    margin: 0;
    padding: 0;
}

nav li {
    display: flex;
}

nav a {
    display: block;
}

      nav {
  ul {
    margin: 0;
    padding: 0;
  }

  li {
    display: flex;
  }

  a {
    display: block;
  }
}

      • &를 활용하여 부모 선택자를 지정할 수 있음 
        .btn {
  position: absolute;
  &.active {
    color: red;
  }
}    

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

    3. 모듈화 

      body {
    font: 100% Halventica, sans-serif;
    color: aqua;
}

.inverse {
    background-color: green;
    color: white;
}

      // base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: aqua;

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

// styles.scss
@use 'base';

.inverse {
  background-color: green;
  color: white;
}

    4. Mixin - default 파라미터 지정 가능, 파라미터 받아서 속성 부여 가능 

      .info {
    background: gray;
    color: black;
}

.alert {
    background: red;
    color: white;
}

.success {
    background: blue;
    color: white;
}

      @mixin theme($theme: gray) {
  background: $theme;
  color: black;
}

.info {
  @include theme;
}

.alert {
  @include theme($theme: red)
}

.success {
  @include theme($theme: blue)
}

    5. 확장 & 상속 

      .message, .success, .error, .warning {
    border: 1px solid black;
    color: aqua;
}

.success {
    border-color: blue;
}

.error {
    border-color: red;
}

.warning {
    border-color: yellow;
}

      %message-shared {
  border: 1px solid black;
  color: aqua;
}

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: blue;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

    6. 연산자(Operators) 

      .container {
    display: flex;
}

article[role="main"] {
    width: 62.5%
}

aside[role="complementary"] {
    width: 31.25%;
    margin-left: auto;
}

      @use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

    7. 파일 분할 (Partial)

      • 프로젝트 규모가 커지면 header, side-menu 등으로 각 기능과 부분으로 나뉘어 유지보수가 쉽도록 관리!
      • 파일이 너무 많이지면... 관리나 성능 차원에서 문제 생길 수 있어
      • Scss는 Partial 기능을 지원함
        • 파일 이름 앞에 _를 붙여 @import로 가져오면 컴파일시 ~.css로 컴파일하지 않음*

Future

  • Future의 동작 원리
  • Futuer의 예외 처리 방법

Play ApplicationLifeCycle

@Singleton
class HelloService @Inject()(lifecycle: ApplicationLifecycle) {

    val client = new HelloServiceClient(Const.config.get[String]("env"))

    lifecycle.addStopHook {
        () => Future.successful(client.stop())
    }
}

axios timeout

ExecutionContext.implicits.global