Front end/Sass3 [SCSS] 파일 구조와 모듈화 서론SCSS를 사용하는 가장 큰 이유이자 핵심이다. 컴포넌트를 재사용하고 컴포넌트끼리의 결합을 통해 하나의 큰 시스템을 구축한다. html과 css만으로는 그런 방법을 사용할 수 없는줄 알았는데 SCSS를 이용하면 객체지향적으로 코드 작성이 가능하다.파일 구조base/components/layout/pages/themes/abstracts/vendors/main.scss이 형식은 SCSS 뿐만이 아니라 리액트나 뷰와 같은 다른 라이브러리에서도 일반적으로 사용한다. 반드시 이 구조를 사용해야 한다는 것은 아니지만 일반적으로 많이 사용하는 구조이니 SCSS에서도 사용하면 쉽게 적용 가능하다. 폴더별 예시 파일 @use이제 해당 폴더에서 컴포넌트를 만든 후 다른 컴포넌트에서 사용하기 위한 키워드는 @use .. 2024. 10. 23. [SCSS] mixin 사용법 서론mixin과 function은 SCSS를 모듈화 하기 위한 가장 큰 요소라고 생각된다. 잘못 사용하면 정말 가독성이 떨어지고 어려울 수 있지만, 잘만 사용한다면 코드를 훨씬 간결하게 유지할 수 있을 것 같다. 유지 보수 면에서도 훨씬 이점이 많을 거라 생각된다. mixin이란?: 함수와 유사한 개념 단, 함수와 동일하지 않음 (리턴값이 존재 X) 사용법mixin 을 선언할 때에는 @mixin 키워드를 사용한다.사용할 때에는 @include 키워드를 사용한다. 예제 (매개변수가 없는 믹스인)// 매개변수가 없는 믹스인// 선언부@mixin resetList() { margin: 0; padding: 0; list-style: none;}// 사용부ul { background-color: yell.. 2024. 10. 22. [SCSS] 주석, 변수, 보간법 국비 교육을 들으며 Saas를 처음 배워보았다. 처음 SCSS를 사용해보고 나서 든 생각은 정말 프로그래밍 언어와 다를게 없다고 생각했다. 파일 관리를 모듈 단위로 한다는 점에서 리액트와 뷰랑 사용법이 유사하다고 생각이 드는데 이렇게 코드를 작성하면 바닐라 JS에서도 라이브러리를 쓰듯 코드를 작성하는게 가능할 것 같다는 생각이 들었다. 다음으로는 코드의 가독성이 너무 좋다. 또 if 의 사용으로 인해 정말 프로그래밍 언어처럼 코드를 작성할 수도 있다. CSS에서 해당 기능을 사용할 수 있다는게 신기했다. 그런데 해외 코드를 읽으며 SCSS는 정말 많이 봤지만 국내에서는 인지도가 조금 떨어지는 것 같기도 하다. 리액트나 뷰는 JS 를 쓰는 거의 모든 기업들이 사용을 하고 있지만, SCSS는 지원 자격에.. 2024. 10. 22. 이전 1 다음
