Sass
-
[CSS/Lang] LESSFront-End(Web)/HTML, CSS 2021. 8. 12. 02:10
😃 서론 오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다. Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다. 리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다. 또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다. 앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다. 🔵 Less 란? LESS는 CSS에 script의 능력(변수, 함수, 연산, 중첩, 스코프 등) 을 덧붙여 확장한 언어이다. LESS는 C..
-
[CSS/Side Lib.] SASS, SCSSFront-End(Web)/HTML, CSS 2020. 12. 29. 15:40
오늘은 React-router 와 SASS 세션이 진행되었다. SASS를 처음 접하다보니, 구글링을 병행하면서 별도 포스팅을 진행하겠다. 🧑💻 Session : Sass - Sass 란? Sass(Syntactically Awesome style sheets)는 CSS Pre-Processor(전처리기, 스크립트 확장 언어) 라고 정의한다. Sass에서 추가적인 기능들을 구현한 뒤, 컴파일러가 브라우저에서 인식하는 CSS 언어로 전환해준다. (파일 확장자는 .css -> .scss) 스타일들의 네스팅을 통해 불필요한 클래스명을 줄임으로서 복잡한 코드를 간결하게 만들고, 코드 가독성을 높인다. 속성과 값에 대한 변수 저장을 통해 코드의 재활용으로 효율적인 마크업이 가능하다. * CSS 전처리기 3대장 :..