반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (230)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (24)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 전공 요약 #네트워크
  • C++
  • A형
  • 알고리즘
  • 언어
  • 나의 해방일지
  • 삼성SDS
  • 삼성SW역량테스트
  • 오블완
  • 기계식키보드 #nuphy
  • 전공요약
  • 25년도채용시장
  • 개발자이직
  • 티스토리챌린지
  • 백준
  • 면접
  • 개발자취업시장
  • 개발자이직회고
  • Next.js #graphql #tailwind.css
  • 전공 요약 #데이터베이스

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

SCSS - CSS를 프로그래밍 언어처럼 작성하자
프론트엔드 개발/HTML CSS

SCSS - CSS를 프로그래밍 언어처럼 작성하자

2021. 9. 26. 13:40
728x90
반응형

SCSS


scss는 css를 좀 더 프로그래밍 언어처럼 다룰 수있게 해준다. (변수, 함수 등)

편리하게 scss파일을 작성한 것을 컴파일하여 css로 변환하여 사용해야한다.

 

이 변환하는 방법에 몇 가지 방법이 있는데

  1. VS Code extension
    sass, live sass compiler 등이 있다.
  2. gulp
    VS Code가 아닌 환경인 경우 gulp를 사용할 수 있다.
 

gulp 모듈 - Node.js기반 프로세스 자동화 도구

gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을

11001.tistory.com

 

 

scss 파일을 여러 파일로 나눠서 하나의 main.scss에 import하는 방식으로 작성한다고 했을 때

하위 scss 파일들은 css로 변환되면 안된다. 파일 이름에 밑줄 접두사를 추가하여 방지할 수 있다.

styles.scss

_variables.scss

_elements.scss

 

 

variables


$변수명: 값;
h1 {
  color:$변수명
}

 

Nesting


기존 css에서는 부모에 속하는 자식 요소에 style 적용할때 각각의 요소를 불러와야했지만,

.box {}
.box h2 {}
.box button {}

 

scss의 nesting을 이용하면 아래와 같이 한방에 끝낼 수 있다.

.box {
  color: $변수명;
  h2 {
    color: $white;
  }
  button {
    color: $red;
  }
}

아래와 같이도 할 수 있다.

.box {
  color: $변수명;
  &:nth-child(odd) {
    color: $white;
  }
  &:nth-child(even) {
    color: $red;
  }
}

 

Mixin


재사용이 가능하고 상황에 따라 다르게 사용가능한 css 함수이다.

연관성 있는 요소가 아니더라도 단순히 반복적인 요소가 들어갈 때 사용하면 된다.

@mixin link(){
  color: red;
  display: block;
}

a {
  @include link();
}

 

예상대로 파라미터를 받을 수 있다.

@mixin link($color){
  color: $color;
  display: block;
}

a {
  @include link(yellow);
}

조건문도 가능하다.

@mixin link($word){
  display: block;
  @if $word == 'odd'{
    color: blue;
  }@else {
    color: red;
  }
}

a {
  @include link('odd');
}

 

extend


코드를 재사용하거나 다른 코드를 확장할때 사용한다.

연관성 있는 요소들에 반복적인 요소가 들어갈 때만 사용하면 된다.

 

%button{
  font-size: 20px;
  border-radius : 10px;
  padding: 5px 10px;
  background-color: blue;
}

a {
  @extend %button;
  원하는 내용을 추가하여 확장...
}
button {
  @extend %button;
  원하는 내용을 추가하여 확장...
}

참고로 %선택자를 붙이면 해당 코드는 컴파일되지 않는다.

실제 컴파일 시 @extend %button을 호출한 부분에 extend 코드가 들어가는 것이 아니라.

아래와 같이 호출된 선택자들을 싹 모아서 새로운 코드를 만든다.

그러므로 명백히 연관성이 있는 컨텐츠들에 공통 요소를 넣어야할 때 사용해야한다 !!!

(단순히 똑같은 것이 반복된다는 이유로 상관없는 요소끼리 강제로 연관성 부여하면 안됨!)

a, button {
  font-size: 20px;
  border-radius : 10px;
  padding: 5px 10px;
  background-color: blue;
};

 

responsive mixin


mixin과 extend를 합쳐놓은 듯한 함수이다.

@mixin responsive {
  color: white;
  @content;
}

a {
  @include responsive{ -> 아래내용이 @content에 들어간다.
    text-decoration: none;
  }
}

결과
color: white;
text-decoration: none;

 

 

extend와 비슷해 보이지만, 이게 훨씬 확장성 있어 보인다.

$minIphoneSize: 500px;
$maxIphoneSize: 690px;
$minIpadSize: 500px;
$maxIpadSize: 1120px;

@mixin responsive($device) {
  @if $device == 'iphone'{
    @media screen and (min-width: $minIphoneSize) and (max-width: $maxIphoneSize)  {
      @content;
    }
  }
  @else if $device == 'ipad'{
    @media screen and (min-width: $minIpadSize) and (max-width: $maxIpadSize) {
      @content;
    }
  }
}

a {
  @include responsive("iphone") { -> 아래내용이 @content에 들어간다.
    color: yellow;
  }
  @include responsive("ipad") { -> 아래내용이 @content에 들어간다.
    font-size: 60px;
  }
}

 

매우 많은 mixin library 들이 존재한다.

미리 만들어진 mixin을 끌어와 쓰는거다. (매우 효율적)

 

대표적으로 bourbon 이 있고, animation 을 다루는 mixin도 많이 존재함.

 

Bourbon - Documentation

The direction the triangle should point. Accepts up, up-right, right, down-right, down, down-left, left or up-left.

www.bourbon.io

 

반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글

tailwind 레이어가 뭔데? postcss.config 는 뭐지?  (0) 2023.12.24
깃허브 페이지 - Publishing on Github Pages  (0) 2021.09.25
CSS : box-sizing: border-box;  (0) 2021.09.21
CSS : reset CSS (브라우저 기본 스타일 제거)  (0) 2021.09.21
CSS Hack : 정확히 중앙에 위치 시키기 (space-between 대신)  (0) 2021.09.21
    '프론트엔드 개발/HTML CSS' 카테고리의 다른 글
    • tailwind 레이어가 뭔데? postcss.config 는 뭐지?
    • 깃허브 페이지 - Publishing on Github Pages
    • CSS : box-sizing: border-box;
    • CSS : reset CSS (브라우저 기본 스타일 제거)
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바