# Sass

14개의 포스트

(TIL 17일차) React (7)

React Sass CSS-moudles styled-components

7일 전
·
0개의 댓글

Scss - mixin basics

@mixin으로 선언하고 @include로 불러온다. 일반적으로 @extend 대신 mixin을 사용하는 것을 권장한다(https://sass-guidelin.es/ko/#extend) examples (from https://poiemaweb.com/sass-css-extention)

2020년 2월 8일
·
0개의 댓글

Next.js + Sass

Import .sass or .scss files in your Next.js project https://github.com/zeit/next-plugins/tree/master/packages/next-sass

2020년 2월 6일
·
0개의 댓글

Sass 기초

Sass 기초

2020년 2월 3일
·
0개의 댓글

CSS vs SASS vs styled Component - FE study13

1. CSS >Cascading Style Sheet : 웹의 디자인을 담당(표준) App.js App.css 해당 js 파일에 css파일을 import 해서 사용. > 특징 : 메뉴얼적인 방법으로 직접 Class , ID 네이밍하며 작성한다. 사용법이 간단함. 하지만 요소들이 많아질수록 관리가 힘들어지고 직관성이 떨어짐. 2. SASS > Synt...

2020년 1월 23일
·
0개의 댓글

TIL - 20.01.09

require 정확히 알고 있었는지.. https://nodejs.org/en/knowledge/getting-started/what-is-require/ Bulma 프로젝트를 셋할때 프론트엔드를 Vue.js 지만 Non SPA로 구성, CSS 라이브러리를 Bulma, Buefy 라는 UI Component 라이브러리를 사용하게 되었습니다. 그러면 먼저...

2020년 1월 9일
·
0개의 댓글
post-thumbnail

What is SASS?

What is Sass? How is it different?

2019년 12월 15일
·
1개의 댓글

React 개발환경 세팅하기 - 3. Sass 설치

React 프로젝트에 Router 설치 방법 1. 터미널을 킨다. 2. Sass 설치를 희망하는 React프로젝트의 디렉토리로 이동한다. 3. 입력한다. 4. 설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "node-sass" 이 있는지 확인해 본다. 끝! +활용방법 형태로 파일을 생성 후,...

2019년 11월 3일
·
0개의 댓글
post-thumbnail

[아주 짧은 글] Next.js에서 ScSS파일 sourcemap 기능 사용하기!

영어 실력이 빈약해서 그런지 간단한 기능같아 보이는데 찾지를 못하고 sourcemap이 되어 있지 않은 scss파일로 작업을 계속 했는데, 아무래도 불편하다고 느껴져서 다시 한 번 찾아보니까 아래와 같이 하면 되는 것이었다.

2019년 2월 22일
·
0개의 댓글

Sass 알아보기

Sass란 > Sass는 일종의 CSS 전처리기이다. 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 코드의 재사용성을 높여준다. Sass설치 > 1. ruby설치 윈도우만 아래 링크에서 ruby설치(mac과 linux는 ruby 기본적으로 설치되어있음) http://rubyinstaller.org/downl...

2019년 1월 29일
·
0개의 댓글
post-thumbnail

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 요즘은 조금 불편하다고 느껴져서 잘 사용하고 있지 않고 있습니다.

2018년 10월 21일
·
24개의 댓글
post-thumbnail

Dnote 3 - 2. React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기)

자 redux설정에 앞서 잠시 기본 적인 sass 스타일의 틀을 잡고 가보겠습니다. styles/index.scss 설명을 드리자면 도현체를 사용하기 위해서 도현체를 import시키고, 전체적인 body태그의 스타일을 해준것입니다. 또한 a 태그로 링크를 걸때, 자동적으로 나오는 못생긴 스타일들을 없애주었습니다. 이제 index.js에 이 스타일을 불...

2018년 9월 21일
·
4개의 댓글
post-thumbnail

Dnote 3 - 1. React - 개발 환경 설정 및 구조 잡기.(sass 설정)

자 이제 프로젝트를 모두 생성했으니, 리액트쪽부터 건들여 볼까요? > # eject 하기 sass를 사용하려면 eject를 해서 설정파일들을 만져줘야 하므로 일단 eject부터 하겠습니다. 첫화면이 잘 뜬다면 다음으로 넘어가겠습니다. > # sass 설정 일단 css대신 scss를 쓰려면 다음 패키지들을 다운로드 해주세요. 그리고 config/p...

2018년 9월 20일
·
1개의 댓글