# Sass
sass란?
우리가 css로 작업을 할 때, 같은 코드를 반복해서 쓰거나 연산을 활용해야 하는 경우 css만으로는 불편함을 느껴보신 적 있으시죠?Sass(Syntactically Awesome Style Sheets)는 css의 전처리기(CSS pre-processor)라고 흔히
SCSS - 색상 내장함수
시작 전 사담sass(scss) 공부도 하기전부터 최고라는 얘기를 많이 들었기에 굉장히 부푼기대를 안고 배우는중이다. 동영상 강의를 듣는데 이거 진짜 누가 정리 잘 해서 책으로 내도 좋겠다는 생각이든다. (이미 있다면 추천 좀)벨로그 게시글을 몇번쓰고 날아가기를 반복해
[WeCode] 3Week - #2 ReactReact Router, Sass
Router > 라우팅(Routing) 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 리액트 자체에는 이러한 기능이 내장되어있지 않다.(React가 Library로 분류되는 이유) React-router 는 리액트의 라우팅 기능을 위해 가장
HTML, CSS 되집어보기
1. sass란? CSS가 동작하기 전에 사용하는 기능인 CSS 전(예비)처리기 중 하나로 보통 CSS Preprocessor라고 부른다. Less, Sass(SCSS), Stylus 등이 있다. 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Uni
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
Sass(SCSS)를 통한 스타일 수정
Sass 파일의 확장자는 .scss 입니다. 설치 시 node-modules 폴더에 node-sass 폴더가 생성됩니다. (package source code)\--save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트기존 css 가 위 와
Toy Project 05 이케아 클론 프로젝트 : Sass에 대해 알아보자
🤠 프로젝트 들어가기 앞서 인스타그램 클론을 하면서 React와 더불어 Sass라는 CSS Preposessor를 알게 되었다. 하지만 nesting외 별다른 기능을 써보지 않았고, 결국 마음 한 구석 짐이 되어버렸다..! 새로운 것을 배울 때 오는 불편함을 이기지
부모 컴포넌트 height 100% 맞추기(Setting height of parent tag 100% of screen)
div 부모태그의 height를 100%로 그냥 주고 자식 태그들의 height를 100%로 주면 스크린 로딩과 함께 자식 컴포넌트가 쭉쭉 자라나게 된다(...)너무 스트레스 받아서 찾아보니 부모태그의 height를 100vh(Viewpoint Height)로 주면 고
연산(operations)
Sass는 기본적인 연산 기능 지원함보통 px단위로 연산을 하지만 상대적 단위(%,em,vw) 연산일 경우 CSS의 calc()로 연산해야함CSS 속성 값을 구분하는 용도로 /를 사용하는 경우가 있기 때문에 나누기 연산이 안되는 경우가 있음. 따라서 /나누기 연산 기능
Sass(SCSS)
Sass(SCSS)란? CSS를 더 편리하게 작성하기 위한 CSS전처리기(preprocessor) 프로젝트의 규모가 클수록 CSS 작업이 복잡해지고 고도화되기 때문에 불편해짐 CSS동작 전에 Sass로 CSS를 편리하게 작성하여 불편함을 줄일 수 있음 CSS문법과
새 프로젝트에 sass (scss) 실행시키기
표준의 css 전처리기인 sass(scss) / less /stylus 중 sass-> scss를 사용할것이다.새 프로젝트를 할때마다 vscode를 실행시키려면 초기에 설정을 해줘야하는데, (본인은 이글을 쓰면서도 사실 좀 헷갈림.. 그래도 정리용이니까!) 그 방법을
SCSS(Sass) 컴팩트 가이드 | protect-me
\_\_SASS(Synthetically Awesome StyleSheets)스타일시트 언어의 한 종류 CSS의 전처리기(변수, 상속, 혼합 및 중첩 등)CSS의 확장 버전이라고 생각하면 쉽다브라우저에서 직접 실행할 수 없고 컴파일이 필요함.SASS 코딩 ➤ Compi
SCSS 중첩된 속성
:(colon) 기호로 시작하여 중첩된 속성을 나타낼 수 있습니다. 주의할 사항은 반드시 중괄호가 끝나는 부분에는 ;(semi-colon)을 표시해주어야 합니다.
SASS 상위(부모) 선택자 참조
&(ampersand) 기호를 통하여 상위 선택자를 참조할 수 있습니다. 결국 &는 &가 있는 범위에 해당하는 선택자라고 보시면 됩니다. 아래 예시를 보시면 더욱 쉽게 이해할 수 있습니다.