콘텐츠로 건너뛰기
Home » SCSS

SCSS

vim에서 scss 파일을 컴파일하기

typescript나 scss 처럼 다른 언어로 컴파일하는 스크립트를 작성하고, 이 결과를 별도의 창에서 확인하는 기능을 vim에서 구현하는 방법을 알아보자. 기본적으로 vim에서는 :r 명령을 사용하면 쉘을 통해 실행한 외부 명령의 출력을 현재 버퍼로 가져오는 것을 수행할 수 있다. 그 외에도 job을 이용한 비동기 방식의 처리도 가능하고 아예 vim 내에 터미널 창을 만들어서 실행하는 방법등 여러 방법이 있다. 오늘은 이러한 방법을 사용해서 vim에서 scss를 컴파일한 결과를 보여주는 방법에 대해서 살펴보겠다.

더 보기 »vim에서 scss 파일을 컴파일하기
Pages: 1 2

SASS/SCSS 내장 함수 정리

지난 글에서  SCSS의 기본적인 문법과 확장, 믹스인, 함수를 작성하는 방법에 대해 정리해 보았다. 이번에는 SASS가 제공하는 기본 함수들을 정리했다. SASS의 기본 함수들은 크게 다음과 같이 나뉜다.

  1. 색상 관련 함수 : 색상 정보 RGB, HSL 값으로 생성하거나, 기존에 만들어져 있는 색상값을 변경할 수 있다. 특히 색상은 유지한채 밝기나 선명도를 변경하는 함수는 동일 색조 내에서 색을 변경하는데 유용하게 쓰일 수 있다.
  2. 숫자 및 문자열 관련 함수
  3. 리스트 및 맵의 데이터 타입을 다루기 위한 함수

더 보기 »SASS/SCSS 내장 함수 정리

SCSS/SASS 문법 정리

SCSS는 기존 CSS 문법에 SASS문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일 될 수 있다. 이 글에서는  SCSS 문법을 기준으로 SASS의 각 기능을 사용하는 방법에 대해 설명하도록 하겠다. 기본문법 – 셀렉터 지정 및 속성 작성 SCSS의 기본문법은 기본적으로 CSS 기본 문법을 그대로 적용하고, 여기에 SASS 식의 치환가능한 요소들을 추가할 수 있다. 기본룰은 다음과 같다. 기본틀은 CSS 문법과 동일하다. 셀렉터를 쓰고 { .. } 블럭안에 속성:속성값; 의 형태로 속성들을 정의할 수 있다. nested block을 적용할 수 있다.  //을 이용해서 라인단위로 주석처리를 할… 더 보기 »SCSS/SASS 문법 정리