달밤에 코딩하기/Sass & SCSS (25) 썸네일형 리스트형 #9 - SCSS 변수 - 전역(!global) / 순위 변수 전역 설정 플래그(!global)를 사용하여 변수를 전역으로 설정할 수 있다. SCSS .class1 { $per100: 100% !global; $per50: 50% !global; width: $per100; height: $per50; } .class2 { width: $per100; height: $per50; } Compile 된 CSS .class1 { width : 100%; height : 50%; } .class2 { width : 100%; height : 50%; } 변수 적용 우선 순위 변수는 선언 위치와 순서에 따라 적용 우선순위가 다르다. SCSS /* 전역 영역에 변수를 선언했을 경우 우선순위 3위 */ $size : 100px; /* 전역 변수를 설정했을 경우 우선순위 .. #8 - SCSS 변수 - 사용법 / 적용 범위 / 재할당 변수 사용 반복 사용되는 값을 지정하여 사용할 수 있다. SCSS /* $속성이름 : 속성값; */ $color-primary: #000000; $url: "./image/"; .bg{ background: $color-primary url($url + "bg.png"); } Compile 된 CSS .bg{ background : #000000 url("./image/bg.png"); } 변수 적용 범위 변수($)는 선언된 영역( { } 대괄호 영역)에서만 동작한다. SCSS /* 전역에 사용하는 변수 */ $color: red; /* class1에서만 사용하는 변수 */ .class1 { $per100: 100%; $per50: 50%; width: $per100; height: $per50; bac.. #7 - SCSS 중첩 - 상위 선택 (&) 상위 선택자 참조 (&) SCSS 태그 중첩 시, 상위 선택자를 선택하여 중복 입력을 방지한다. .btn{ width : 100px; height : 36px; background-color : black; &:hover{ background-color : red; } } Compile 된 CSS .btn { width: 100px; height: 36px; background-color: black; } .btn:hover { background-color: red; } 상위 선택자 활용 여러 클래스를 사용하는 경우, 아래와 같이 활용할 수 있다. SCSS .class { &-small { height : 36px; } &-large { height : 26px; } } Compile 된 CSS .cl.. #6 - SCSS 중첩 - 벗어나기 (@at-root) 중첩 벗어나기 (@at-root) 변수($)는 선언된 영역( { } 대괄호 영역)에서만 동작한다. 때문에 동일 속성을 사용하고 싶으나 컨텐츠가 외부에 존재할 경우, 중첩 벗어나기를 사용한다. SCSS .class-top { $per100 : 100%; $per50 : 50%; width : $per100; height : $per50; .class-in { width : $per100; height : $per50; } @at-root .class-out { width : $per100; height : $per50; } } Compile 된 CSS .class-top { width: 100%; height: 50%; } .class-top .class-in{ width: 100%; height: 50%.. #5 - SCSS 중첩 - Nesting SCSS 태그 중첩 ( Nesting ) SCSS에서는 스타일 안에 스타일을 넣어 태그 반복 사용을 줄일 수 있다. SCSS ul { width : 100%; height : 100%; li { width : 50%; height : 50%; } } Compile 된 CSS ul { width: 100%; height: 100%; } ul li { width: 50%; height: 50%; } SCSS 속성 중첩 ( Nesting ) font / margin / padding 같은 개별 속성이 있는 경우, 아래와 같이 속성을 중첩하여 사용할 수 있다. SCSS .class { font: { size: 4px; weight: bold; } margin: { top: 10px; bottom: 20px; }.. #4 - SCSS 삽입 - Import SCSS 가져오기 HTML에 SCSS 삽입하기 SCSS에 SCSS 삽입하기 /* @import "경로" */ @import "./main.scss"; 가져오기 파일 @Import를 사용할 시, 파일 확장자를 생략했을 경우 아래 4가지 파일을 검색하여 파일을 적용한다. 파일이 여러개 검색 되는 경우 에러가 발생한다. /* 확장자를 생략했을 경우 아래 4가지 파일을 검색하여 적용 */ @import "main"; @import "main.scss"; @import "main.sass"; @import "_main.scss"; @import "_main.sass"; SCSS 여러개 가져오기 @import "main", "sub"; SCSS 파일 분할 및 CSS 병합 파일 이름 앞에 _를 붙이면 기준 문서에 병.. #3 - Sass & SCSS 주석과 데이터의 종류 주석 ( Comment ) Sass와 SCSS는 주석 사용법에서 차이가 있다. Sass 주석 /* 각 줄에 별표를 붙여야 하며 * 별의 라인을 맞춰주어야 * 정상 동작 합니다. */ SCSS 주석 //해당 주석은 컴파일 되지 않습니다. /* 해당 주석은 컴파일 됩니다. */ 데이터 종류 Sass와 SCSS에서는 아래와 같은 데이터를 사용한다. 데이터 종류 설명 예시 Numbers 숫자 데이터 숫자, 숫자+단위 Strings 문자 데이터. 큰 따옴표 사용은 옵션. string1, "string2" Colors 색 데이터. 함수(컬러 명), #헥사, rgba 등의 색상 데이터 사용 가능. red, #FFFFFF Booleans 논리 데이터. true, false Nulls 없음을 표시. 속성값으로 사용하면,.. #2 - SCSS Compile 방법 Compiler Parcel 설치하기 html에서 scss를 사용하면 웹에서 읽지 못하기 때문에 compile 단계를 진행해야 한다. 이 compile 단계를 도와주는 것이 parcel이라는 bundler다. 아래 단계를 통해 parcel을 설치해보자. 파일 준비하기 linked 된 index.html 파일과 scss 파일을 제작한다. 터미널 열기 터미널 > 새 터미널을 연다. package.json 파일 만들기 'package.json'파일은 설치한 패키지들을 관리해준다. 즉, parcel을 설치하면 'package.json'파일에 기록이 되는 것이다. 때문에 parcel 설치 전, 'package.json'파일을 먼저 생성한다. package.json 생성 'npm init -y' 명령어를 터미널에 .. 이전 1 2 3 4 다음
