728x90 300x250 SMALL Front-end/SASS10 Sacc에서 변수 (_variables.scss)와 mixin(_mixins.scss) 자원 관리하기 1. 파일 구조 예시scss/ _variables.scss // 변수 모음 _mixins.scss // 믹스인 모음 _reset.scss // reset 스타일 main.scss // 실제 빌드되는 진입 파일 2. _variables.scss// 색상 변수$color-primary: #007bff;$color-secondary: #6c757d;// 폰트 사이즈$font-size-base: 16px;$font-size-lg: 20px; 3. _mixins.scss// 반응형 breakpoint 믹스인@mixin respond($breakpoint) { @if $breakpoint == sm { @media (max-width: 576px) { @con.. 2025. 9. 13. Gulp 설치하고 scss -> css 자동 변환 Gulp란?Gulp는 자동화 빌드 도구 이다.SCSS -> CSS 변환JS압축 / 번들링이미지 최적화브라우저 리로드기타 반복되는 웹 개발 작업쉽게 말하면 : 개발자가 반복적으로 해야 하는 일을 자동으로 처리해주는 도구 Gulp 특징특징설명Node.js기반자바스크립트 환경에서 실행스트림 처리파일을 읽고, 변환하고, 출력하는 과정을 빠르게 처리플러그인 많은gulp-sass, gulp-uglify, gulp-imagemin 등 거의 모든 작업용 플러그인 존재watch 기능파일 변경 감지 -> 자동 빌드 가능코드 기반설정을 GUI가 아니라 코드(gulpfile.js)로 작성 1. Node.js 설치 확인Gulp는 Node.js 기반이므로 먼저 Node.js가 설치되어 있어야 한다.node -vnpm -v버전.. 2025. 9. 7. scss !global variable 변수선언 지역 범위에서 전역 변수의 값을 변경하려면? !global 플래그를 사용해서 변수에 값을 할당하면 해당 값은 지역변수에 선언했지만 전역 범위에 할당이 된다. SASS(SCSS) $color: green; $font-size: 30px; .content2 { $color : blue !global; color: $color; font-size: $font-size; } .footer { color: $color; font-size: $font-size; } CSS .content2 { color: blue; font-size: 30px; } .footer { color: blue; font-size: 30px; } 2022. 1. 11. !default scss 변수 정의 !default는 기존의 정의된 값이 있다면 기존 값을 그대로 유지하고 없다면 새로운 값을 적용시킬때 사용한다. SCSS /* 변수선언 */ $color: green; $font-size: 30px; $font-size: 20px !default; .content { color: $color; font-size: $font-size; //30px 출력 } 원래는 마지막에 선언한 font-size:20px이 적용 되어야 하지만 !default를 같이 선언 했기 때문에 기존에 있던 30px이 적용 된다. 만약 기존 변수에 'null' 값이 있었고 !default를 선언한다면 !default를 선언한 변수값이 적용 된다. /* 변수선언 */ $color: null; $color: green !default; .. 2022. 1. 7. 이전 1 2 3 다음 728x90 반응형 LIST