# Sass
Sass
문법적으로 매우 멋진 스타일시트CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해준다. Sass에서는 두 가지 확장자 .scss와 .sass를 지원한다. 이 두가
컴포넌트 스타일링
일반 CSS : component를 스타일하는 가장 기본적인 방식Sass : 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있게 해준다.CSS module : 스타일을 작성할 때 CSS클래스가 다른 CSS 클
[TIL] Sass, React-router
CSS Pre-processorCSS에 변수, Nesting, 연산자 등 CSS에서 기본적으로 제공되지 않는 문법들을 사용해서 CSS를 편리하게 작성하게 해줄 수 있게 해주는 툴작성 후 최종적으로 Sass 패키지에 의해서 CSS로 컴파일되어서 실행 됨반복되는 작성을 최
TIL. Sass, Router, Git 초기세팅 - 8/5
Sass는 css의 상위에 있는 메타언어로, 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 일종의 CSS 전처리기(pre-processor)이다
styled-components
컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언 하는 방식이다. 이 방식을 css-in-Js라고 부른다. css-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 styled-components를 알아보자! styled-component
Sass
css와 같은 스타일을 파일이나 css에서 조금 더 확장된 기능을 추가한다고 생각할 수 있다.자주 사용되거나 value가 복잡하다던지 등을 변수로 저장하여 원하는 곳에서 하나의 값으로 사용할 수 있다.스타일도 스크립트나 html처럼 부모자식관계로 묶어 관리할 수 있다.
Sass 기초
Sass를 사용하면, 변수, 중첩, 미스 인, 상속 등의 다양한 스타일의 유지 보수화 할수 있는 기능들로 css파일을 작성 할 수 있다. 공식 문서를 쭉 읽어보면서, 해석하고 이해한 내용을 적었다.우선 다음과 같은 명령어를 통해서, sass를 설치했다.그리고 공식문서에
Sapper - Svelte의 SSR 버전인가?
바로 전 Svelte를 설치하고 ie지원이 안되서 중도포기했었다.새로운 자바스크립트 프레임워크를 찾던 중 시간이 얼마 지나지않아React.js에서 Webpack의 조잡한 설정으로 구현했던 SSR(Server Side Rendering)이기본지원되는 Svelte에서 만든
sass, @MIXIN 모음
SASS에 대해 다른 프로젝트들을 뜯어보니, 대개 사용하는 MIXIN도 정해져있는 것 같다. 앞으로 사용할 만한것, 쓸만한 MIXIN들을 모아 두자
SASS 연산(Operations)
SASS는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다. 아래는 SASS에서 사용 가능한 연산자 종류이다.일반적으로 절대값을 나타내는 px단위로 연산을 하지만, 상대적 단위(%, em, vw 등
SASS 중첩(Nesting), 변수(Variables), 가져오기(Import)
SASS는 중첩기능을 사용할 수 있다. 상위 선택자의 반복을 피할수 있어 좀 더 편리하게 복잡한 구조를 작성할 수 있다.SCSSCompiled to중첩 안에서 &키워드는 상위(부모) 선택자를 참조한다.SCSSCompiled to& 키워드는 상위 선택자를 참조했기 때문에
SASS 설치 및 기본 사용
CSS전처리기(CSS pre-processor)라 불리는 SASS(Syntactically Awesome StyleSheet)는 CSS의 단점을 보완한 CSS의 확장형이다. 전처리기란 자신만의 특별한 구문을 가지고 CSS를 생성하도록 하는 프로그램이다.SASS LES
포트폴리오(05 : Sass와 styled-components)
반응형 레이아웃을 만들기 위해서는 미디어쿼리를 활용한 css, flexbox를 활용한 css 등 css의 활용이 여러모로 필요하다.이번 포트폴리오에서는 material ui 디자인 프레임 워크를 사용하기로 했는데 예시에서 아래 코드처럼 스타일링 해주는걸 볼 수 있었다.
SassScript
Sass는 css를 javascript처럼 변수를 사용할 수 있고, 변수의 scope가 존재하며, 연산자란 개념도 있으며, 7가지 데이터 타입을 제공한다.Sass에 대해서 공부할수록 Javascript와 사용하는 방식이 동일하다고 생각을 많이하였다.이처럼 변수를 선언하
Sass?
Syntactically Awesome Style Sheets, Css의 pre processor로써 코드의 가독성과 재 활용성을 높여주고 복잡한 작업을 쉽게 할 수 있게 해줍니다.😳sass 인터프리터는 .sass, scss 파일을 모니터링 하다가 파일이 저장될 때마
CSS & SCSS & SASS
CSS를 익히며 SCSS, 그리고 SASS라는 것에 대해 들어봤지만 왜 쓰는지 어떻게 쓰는지 차이는 무엇인지에 대해 정확히 알고 있지 않다가 이번에 정리를 해보려고 한다.결론은 SCSS와 SASS는 CSS를 쉽고 추가 기능도 있는 확장판정도로 생각하면 좋을 것 같다.그
