Study/Sass,SCSS (6) 썸네일형 리스트형 [Sass/SCSS] mixin 사용하기 #1-1. argument 사용하지 않음 1. mixin을 사용하고자하는 scss 파일에서 mixin 작성 @mixin mixin-name() { // 추가하고싶은 css 코드를 넣는다. color: red; .ic-cloe { width: 40px; } } 2. mixin을 사용하고자하는 scss 파일에서 mixin 사용 p { @include mixin-name(); } 3. 연결된 css에서는 다음과 같이 랜더링된다. 1-2. argument 사용 1. mixin을 사용하고자하는 scss 파일에서 mixin 작성 @mixin mixin-name($color) { // css 코드 color: $color; .ic-cloe { width: 40px; } } // 다음과 같은 방식으로 argument에.. [Sass/SCSS] 반복문 사용하기 (@for $변수 from 시작점 through 끝점) #작성법 - 반복문은 다음과 같은 형식으로 사용할 수 있다. @for $변수 from 시작점 through 끝점 { ... } @for $i from 1 through 4 { // i는 변수명, 변수명은 뭘 쓰던 상관 없다. // 1부터 4까지 반복 // @debug $i; // @debug 사용시, 터미널에서 디버그 결과를 확인할 수 있음 .col-sm-#{$i} { // 클래스이름에 변수 사용시, #{}에 변수명을 감싸줘야한다. width: 100% / $i; } } - scss에서 위 코드와 같이 작성 시, css에서는 다음과 같이 랜더링 된다. .col-sm-1 { width: 100%; } .col-sm-2 { width: 50%; } .col-sm-3 { width: 33.33333%; } ... [Sass/SCSS] 변수 만들기 #1. 사용법 1. scss 파일에서 다음과 같은 형태로 넣어준다. $name: value; // $변수명: 값; * 이름지을때 유의사항 - 알파벳,-,_ ,숫자 사용가능 - 대소문자 구분함 - 변수명 숫자로 시작하지 말아야함. - 보통 아래 두가지 조합 많이 사용함 (강요적인건 아니니까, 회사에서 쓰는 방식에 따라 사용하는게 좋음) 1) sass에서는 보통 소문자로,- 조합 2) 대문자로 _ 조합 $color-red: red; // 1. 소문자 - 조합 $COLOR_BLUE: #0000ff; // 2. 대문자 _ 조합 2. scss 에서 변수가 필요한 곳에 그대로 사용하면 된다. $color-red: red; // 1. 소문자 - 조합 $COLOR_BLUE: #0000ff; // 2. 대문자 _ 조합 .. [Sass/SCSS] Sass/SCSS style 쉽게 추적하기 Sass/SCSS 를 사용하는경우, 별다른 셋팅이 없으면 모든 style이 연결된 css로만 추적이된다.. 오늘은 개발의 편의를위해, 이를 scss파일로 추적 가능하게 만들어보도록 하자. 1. package.json 열기 2. "scripts" sass 를 정의한 라인에 하단 옵션 추가 --source-map true * node-sass option에 해당 옵션을 추가한거예요. 3. 터미널에서 npm run sass 4. 연결된 scss다시 저장 하면, 다음과 같이 css가 아닌, scss로 스타일을 추적할 수 있다. [Sass/SCSS] Sass/SCSS 시작하기 - css 랜더링 자동화 앞서 npm run sass라는 명령어를 통해 scss파일을 css파일로 수동으로 랜더링하는 방법까지 알아봤다. scss의 기본적인 셋팅에 대해 알고싶다면 이전글을 참고하기 이번 포스팅에서는 매번 명령어를 통해 수동으로 파일을 랜더하기 어려우므로 이를 자동화 하는 방법을 메모하고자 한다. 1. package.json 열기 2. "scripts"의 "sass" 를 정의해놓은 영역에 -wr추가 "sass": "node-sass -wr styles/main.scss ./style.css" * -wr 뭔데 추가함? -w, --watch : 파일의 변화를 감지하여 작동하겟다는 뜻. -r, --recursive : 재귀적인 디렉토리나 파일도 감시하겠다는 뜻 3. 터미널에서 npm run sass 입력. 4. 이제 .. [Sass/SCSS] Sass/SCSS 시작하기 - 셋팅 #1. node 설치 1. node 는 하단 링크에서 각자의 컴퓨터 사양에 맞게 설치하자. - LTS(Long Term Support, 장기 지원 버전) 설치 권장 : 큰 버그 없이 안정적으로 사용가능한 버전 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 터미널에서 하단 키워드를 입력후 버전 정보가 잘 나온다면 설치가 잘 된 것이다. node -v 3. 터미널에서 하단 키워드 입력하여 package.json 생성하기 - 생성된 package.json 에서는 node module을 사용하기 위한 여러가지 셋팅을 설정.. 이전 1 다음
