# Sass

322개의 포스트
post-thumbnail

styled-components vs. emotion

리액트에서는 CSS-in-JS을 통해 스타일을 작업을 진행한다.그중에서는 styled-components, emotion이 가장 유명하고 많이 사용된다.그래서 우리 모던 애자일 4기 프론트에서는 어떤 라이브러리를 사용할지 선택하기 위해 각각 어떠한 특징과 장점, 단점이

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

[React] Instartgram 로그인 버튼 유효성 검사

🎫 구현 목표 > login input 값을 state에 저장한다. 저장된 값을 삼항연산자를 이용해 유효성 검사를 실행해준다. 👆 Login 사용자 입력 데이터 state에 저장 >> > ID, PW input에 savedUserAccount함수를 실행하는 o

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

9장 - 컴포넌트 스타일링(1)

일반 CSSSassCSS Modulestyled-componentsCSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 중복을 방지하는 방식 두 가지1\. 이름 짓는 규칙2\. CSS SelectorSass(Syntactically Awe

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

SCSS SASS CSS Styled-components

CSS: Cascading Style Sheets - 종속형 시트 SASS: Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트 SCSS: Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS

2022년 8월 2일
·
0개의 댓글
·
post-thumbnail

SCSS이란? 사용하는법?(SASS)

CSS 전 처리기라고 말하기도하고, CSS Preprocessor라고 말하기도 함CSS 동작하기 전에 SCSS로 손쉽게 작성한 후 css로 변경하여 사용할 수 있음Sass는 {}, ; 등의 기호들을 사용하지 않고 css처럼 작성할 수 있으나 막상 기호들 없이 작성하다보

2022년 8월 1일
·
0개의 댓글
·
post-thumbnail

1차 프로젝트 회고

📑프로젝트 소개 > 최선을 다해 위코드 프로젝트에 진행하다보니 드디어 1차 프로젝트가 마무리되었다. 2주동안 5명이서 팀을 이루어 매거진B 홈페이지를 클론코딩했습니다. 프로젝트를 마친 지금 지난 2주를 회고해보며 프로젝트를 정리해봅니다

2022년 7월 30일
·
2개의 댓글
·
post-thumbnail

node버전의 sass 설치가 안될 때 해결법

node는 node사이트에 가서 설치하면 끝!위 코드를 터미널에 검색해보기! 설치 되어 있다면? 아래 코드를 작성해주면 설치 끝! 설치가 잘되었는지 확인하기 위해 아래 코드로 확인해주기 원래 위 방법대로 간단히!! 설치되어야 했지만 난 안됐다 그렇다면 아래와 같이 해주

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

[모각소] 2022-07-27 (화)

SCSS 문법 정리 Svelte로 Bar Chart 제작 시작SASS(Syntactically Awesome StyleSheet)는 기존의 CSS(Cascarding StyleSheet)의 단점을 보완하기 위해 나온 CSS Preprocessor(전처리기)이다. Pr

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

Sass(SCSS) Mixin

mixin 믹스인스타일 시트를 작성하다보면, 비슷하거나 동일한 스타일을 반복해서 사용해야하는 경우多믹스인을 사요하면 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다.믹스인 만드는법믹스인을 만들때는 @mixin 지시자를 사용지시자 뒤에는 만들고자 하는 믹스인의 이

2022년 7월 26일
·
0개의 댓글
·
post-thumbnail

Sass(SCSS) 변수

변수CSS 코드를 수정할때스타일을 작성하다 보면, 속성값을 반복해서 사용하는 경우가 많다,그리고 자주 반복되는 스타일을 수정하는 일은 무척 번거로운 작업이다.css같은 색상을 계속 사용하거나 여러요소의 너비나 높이가 같은 경우, 포지션이나 display가 같은 경우!위

2022년 7월 26일
·
0개의 댓글
·
post-thumbnail

Sass(SCSS) 주석과 중첩

주석과 중첩주석css의 주석을 그대로 사용할 수 있다./\*\*/ : 컴파일에 반영되는 주석// : 컴파일 되지않는 주석 private/ 기존 CSS 주석 여러줄 주석/// sass 한줄 주석// 한줄주석이 scss구문을 작성하는 단계에서 사용할 수 있는 주석중첩규

2022년 7월 26일
·
0개의 댓글
·
post-thumbnail

SCSS(Sass)

SCSS(Sass)

2022년 7월 22일
·
0개의 댓글
·

[React]Sass

1. 설치 설치 시 node-modules 폴더에 sass 폴더가 생성됩니다. (package source code) --save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트 2. .css 파일의 확장자 .scss로 바꾸기 Sass 파일

2022년 7월 18일
·
0개의 댓글
·
post-thumbnail

SCSS에 대하여

2022년 7월 16일
·
0개의 댓글
·

css 적용 순위

CSS 작업을 하면서 선택자가 겹치면서 적용에 우선 순위를 두어야 할 때가 있다. 퍼블리싱을 막 배운 시기에는 선택자가 중복되는 경우 !important 로 해결하는 경우도 있었는 데 이는 작업을 몇 번 하다보면 알 수 있지만 상당히 좋지 못한 코드다. 사이트를 작업하

2022년 7월 15일
·
0개의 댓글
·
post-thumbnail

Sass (CSS 전처리기)

CSS로만 작성하면 선택자(Selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택지를 매번 적어야 하는 점과 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정 변경해야 한다. Sass를 사용하면, 선택자의 중첩을 통해 반

2022년 7월 13일
·
0개의 댓글
·

[Sass] 폴더 관리 및 초기셋팅

초기 설정 방법에 대해 알아보기

2022년 7월 7일
·
0개의 댓글
·
post-thumbnail

TIL | Sass(SCSS) VSCode에서 컴파일 방법

TIL | Sass(SCSS) VSCode에서 컴파일 방법

2022년 7월 4일
·
0개의 댓글
·
post-thumbnail

Sass vs Less vs Emotion

회사에서 새 프로젝트가 진행되며 Sass vs Less vs Emotion 중 어떤 것을 쓸지 고민 했다.

2022년 7월 3일
·
0개의 댓글
·