본문 바로가기

What would life be If we had no courage to attemp anything?

Development/CSS3

[Sass] Scss 문법 정리 링크 모음 https://velog.io/@dosilv/TIL-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC#-nesting [TIL] SCSS 문법 정리 🍎 일단 배우긴 배웠는데 SASS는 뭐고 SCSS는 뭐지? 하다가 해보는 정리! velog.io https://nykim.work/97 [아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치 프롤로그 "CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다" ......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다. 신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지, Sass에 대 nykim.work 이전에 보았던 블로그 보다 더 가독성 있게 정리된 블로그 글. 프로젝트 시작하면 참고할 예정 2022. 9. 12.

[Sass]Sass 기본 문법 정리 Sass 기본 문법 정리 1) 변수에 데이터 저장해서 사용하기 $변수명 : 변수에 넣을 값; $mainColor : #ff0000; .red { color: $mainColor; } 2) 파일 import 하기 @import '파일 경로'; \- 주로 모든 페이지에 필요한 CSS reset을 파일을 새로 생성하여 작성하고 import //src/reset.scss body { margin: 0; } div { box-sizing: border-box; } \- Detail.scss에 reset.scss 파일을 import 합니다. @import './reset.scss'; 3) Nesting - 셀렉터 대신 사용 가능 // Selector div.container h4 { color: blue; } di.. 2022. 9. 7.

[Sass]Sass를 왜 사용할 까?/ Next.js에 Sass설치하기 Sass 기초 🎈왜 Sass를 사용할 까? CSS에는 치명적인 단점이 존재 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편 Sass는 코드를 수정하거나, 코드 조각을 재사용하기 편리! Sass의 의미 CSS의 단점을 메워 더 빠르고 효율적으로 스타일을 작성할 수 있는 구문 CSS전처리기 컴파일 과정 🎈Sass? SCSS? Sass 구문을 이용해 코드를 작성하면, Sass 전처리기가 이를 css로 변환 Sass 구문과 동일한 기능을 제공함과 동시에 좀 더 CSS 친화적인 구문인 SCSS라는 구문도 존재 SCSS 구문을 이용해 코드를 작성하면,Sass 전처리기는 이 또한 CSS로 변환 사람들이 Sass 구문보다 SCSS구문을 선호하는 경향이 있음 SCSS구문은 Sass 언어의 하위 개념 🎈Next.js에.. 2022. 9. 6.

이전 1 다음

티스토리툴바