# Sass

126개의 포스트
post-thumbnail

sass란?

우리가 css로 작업을 할 때, 같은 코드를 반복해서 쓰거나 연산을 활용해야 하는 경우 css만으로는 불편함을 느껴보신 적 있으시죠?Sass(Syntactically Awesome Style Sheets)는 css의 전처리기(CSS pre-processor)라고 흔히

약 20시간 전
·
0개의 댓글
post-thumbnail

SCSS - 색상 내장함수

시작 전 사담sass(scss) 공부도 하기전부터 최고라는 얘기를 많이 들었기에 굉장히 부푼기대를 안고 배우는중이다. 동영상 강의를 듣는데 이거 진짜 누가 정리 잘 해서 책으로 내도 좋겠다는 생각이든다. (이미 있다면 추천 좀)벨로그 게시글을 몇번쓰고 날아가기를 반복해

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

[WeCode] 3Week - #2 ReactReact Router, Sass

Router > 라우팅(Routing) 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 리액트 자체에는 이러한 기능이 내장되어있지 않다.(React가 Library로 분류되는 이유) React-router 는 리액트의 라우팅 기능을 위해 가장

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

HTML, CSS 되집어보기

1. sass란? CSS가 동작하기 전에 사용하는 기능인 CSS 전(예비)처리기 중 하나로 보통 CSS Preprocessor라고 부른다. Less, Sass(SCSS), Stylus 등이 있다. 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Uni

2021년 6월 2일
·
0개의 댓글
post-thumbnail

React에서 Styled components로 스타일링 하기

Styled components로 우아하게 스타일링 해봅시다!

2021년 5월 31일
·
2개의 댓글

Scss(sass) debugging and Breaking Change: Slash as Division

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any gi

2021년 5월 26일
·
0개의 댓글
post-thumbnail

Sass(SCSS)를 통한 스타일 수정

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

2021년 5월 25일
·
0개의 댓글
post-thumbnail

Toy Project 05 이케아 클론 프로젝트 : Sass에 대해 알아보자

🤠 프로젝트 들어가기 앞서 인스타그램 클론을 하면서 React와 더불어 Sass라는 CSS Preposessor를 알게 되었다. 하지만 nesting외 별다른 기능을 써보지 않았고, 결국 마음 한 구석 짐이 되어버렸다..! 새로운 것을 배울 때 오는 불편함을 이기지

2021년 5월 23일
·
0개의 댓글
post-thumbnail

[TIL] SCSS선택자 &: vs &:: vs &.

SCSS 선택자 &: vs &:: vs &.

2021년 5월 22일
·
0개의 댓글
post-thumbnail

부모 컴포넌트 height 100% 맞추기(Setting height of parent tag 100% of screen)

div 부모태그의 height를 100%로 그냥 주고 자식 태그들의 height를 100%로 주면 스크린 로딩과 함께 자식 컴포넌트가 쭉쭉 자라나게 된다(...)너무 스트레스 받아서 찾아보니 부모태그의 height를 100vh(Viewpoint Height)로 주면 고

2021년 5월 20일
·
0개의 댓글
post-thumbnail

[HTML/CSS] SCSS와 SASS

안녕하세요. 김용성입니다. 여러분들은 혹시 SCSS를 사용하고 계신가요?

2021년 5월 15일
·
0개의 댓글
post-thumbnail

연산(operations)

Sass는 기본적인 연산 기능 지원함보통 px단위로 연산을 하지만 상대적 단위(%,em,vw) 연산일 경우 CSS의 calc()로 연산해야함CSS 속성 값을 구분하는 용도로 /를 사용하는 경우가 있기 때문에 나누기 연산이 안되는 경우가 있음. 따라서 /나누기 연산 기능

2021년 5월 13일
·
0개의 댓글
post-thumbnail

Sass(SCSS)

Sass(SCSS)란? CSS를 더 편리하게 작성하기 위한 CSS전처리기(preprocessor) 프로젝트의 규모가 클수록 CSS 작업이 복잡해지고 고도화되기 때문에 불편해짐 CSS동작 전에 Sass로 CSS를 편리하게 작성하여 불편함을 줄일 수 있음 CSS문법과

2021년 5월 11일
·
0개의 댓글

REACT - Component styling

react에서 component를 어떻게 스타일링하는지 정리합니다😁

2021년 5월 11일
·
0개의 댓글
post-thumbnail

Sass_1. 개념

Sass는 CSS Preprocessor(전처리기)로, CSS 작성의 편의를 위해 사용된다.

2021년 5월 9일
·
0개의 댓글
post-thumbnail

[TIL] SCSS 문법 정리 🍎

일단 배우긴 배웠는데 SASS는 뭐고 SCSS는 뭐지? 하다가 해보는 정리!

2021년 4월 30일
·
0개의 댓글
post-thumbnail

새 프로젝트에 sass (scss) 실행시키기

표준의 css 전처리기인 sass(scss) / less /stylus 중 sass-> scss를 사용할것이다.새 프로젝트를 할때마다 vscode를 실행시키려면 초기에 설정을 해줘야하는데, (본인은 이글을 쓰면서도 사실 좀 헷갈림.. 그래도 정리용이니까!) 그 방법을

2021년 4월 22일
·
0개의 댓글
post-thumbnail

SCSS(Sass) 컴팩트 가이드 | protect-me

\_\_SASS(Synthetically Awesome StyleSheets)스타일시트 언어의 한 종류 CSS의 전처리기(변수, 상속, 혼합 및 중첩 등)CSS의 확장 버전이라고 생각하면 쉽다브라우저에서 직접 실행할 수 없고 컴파일이 필요함.SASS 코딩 ➤ Compi

2021년 4월 20일
·
0개의 댓글
post-thumbnail

SCSS 중첩된 속성

:(colon) 기호로 시작하여 중첩된 속성을 나타낼 수 있습니다. 주의할 사항은 반드시 중괄호가 끝나는 부분에는 ;(semi-colon)을 표시해주어야 합니다.

2021년 4월 14일
·
0개의 댓글
post-thumbnail

SASS 상위(부모) 선택자 참조

&(ampersand) 기호를 통하여 상위 선택자를 참조할 수 있습니다. 결국 &는 &가 있는 범위에 해당하는 선택자라고 보시면 됩니다. 아래 예시를 보시면 더욱 쉽게 이해할 수 있습니다.

2021년 4월 14일
·
0개의 댓글