Front-end/SCSS (7) 썸네일형 리스트형 7. 산술연산 CSS에서는 calc()함수를 통해 연산이 가능했지만 calc()함수 없이도 SCSS에서는 사칙 연산이 가능하다. 물론 calc()함수도 사용가능하다. /* SCSS */ @use "sass:math"; div { $size: 2; width: 20px + 20px; height: 40px - 10px; font-size: 10px * 2; // margin: 30px / 2; margin: math.div(12px, 2); padding: 20px % 7; } span { font-size: 10px; line-height: 10px; font-family: serif; font: 10px / 10px serif; } div { // 산술 연산을 할땐 단위가 동일해야함 // width: 100% - 2.. 6. 변수 SCSS에는 자바스크립트처럼 변수를 선언할 수 있는 기능이 존재한다. 다음과 같이 사용한다. $size: 200px; .container { position: fixed; top: $size; .item { $size: 100px; width: $size; height: $size; transform: translateX($size); } } .box { width: $size; } 선언할 변수 이름 앞에 $기호를 붙히고 = 기호 대신 :기호를 사용한다. 이 변수또한 전역변수 지역변수가 있으므로 요소 안에서 선언할 시 지역변수 밖에서 선언할 시 전역변수로 사용된다. 선언 된 범위 안에서 우선적으로 적용된다. CSS로 변환하면 다음과 같다. .container { position: fixed; top: 2.. 5. 중첩되는 속성 CSS에서는 앞글자가 중첩되는 속성들이 있다. 예를 들면 margin-top, margin-bottom, margin-left, font-weight, font-size ... 등등 앞 부분이 모두 중복 된다. SCSS에서는 이러한 중복되는 부분을 생략하여 속성을 정의할 수 있다. .box { font: { weight: bold; size: 10px; family: sans-serif; }; margin: { top: 10px; left: 20px; }; padding: { top: 10px; bottom: 40px; left: 20px; right: 30px; }; } box라는 요소를 꾸며줄 때 font, margin, padding이라는 속성을 괄호를 열어 위와 같이 설정해줄 수 있다. 설정한 후.. 4. 상위 선택자 참조 CSS에선 상위 선택자 참조를 위해 다음과 같이 표현했었다. .btn { position: absolute; } .btn.active { color: red; } 하지만 SCSS에서 중첩과 & 기호를 사용하여 상위 선택자를 다음과 같이 참조할 수 있다. .btn { position: absolute; &.active { color: red; } } .list { li { &:last-child { margin-right: 0; } } } .fs { &-small { font-size: 12px; } &-medium { font-size: 14px; } &-large { font-size: 16px; } } 위와 같이 &기호를 사용하여 표현한 것을 알 수 있다. 이를 CSS로 변환하면 다음과 같다. .bt.. 3. 중첩 기존 CSS에서 부모요소 안에 있는 자식요소를 꾸며주기 위해선 아래와 같이 코드를 작성해야했다. header .sub-menu ul.menu { } header .sub-menu ul.menu li { } header .sub-menu ul.menu li::before { } 이렇게 작성하게 되면 자식요소를 추가하여 꾸밀때 마다 앞부분을 중복하여 작성해야한다. 하지만 SCSS에서는 중첩을 통해 번거로움을 해결할 수 있다. /* SCSS */ .container2 { > ul { li { font-size: 40px; .name { color: blue; } .age { color: orange; } } } } /* CSS */ .container2 > ul li { font-size: 40px; } .c.. 2. 주석 SCSS 주석을 표현할 때는 // 또는 /* */로 표현할 수 있다. 두 가지 방법이 있지만 차이점이 있다. 1. // /* SCSS */ .container { h1 { //color: red; } } /* CSS */ .container { h1 { } } // 주석을 사용할 경우 SCSS에서는 정상적으로 주석처리가 되어 나타나지만 SCSS를 CSS로 변환하면 주석 부분이 사라지게된다. 2. /* */ /* SCSS */ .container { h1 { /*color: red;*/ } } /* CSS */ .container { h1 { /*color: red;*/ } } /* */ 주석을 사용하면 // 주석과 달리 CSS로 변환되어도 주석 부분이 사라지지 않는다. 1. SCSS에 대해서 CSS Preprocessor 란? HTML, CSS를 다루는 분이라면 한 번은 들어봤을 Sass, Less 등이 있습니다. 이 친구들은 CSS 전(예비)처리기 입니다. 보통 CSS Preprocessor 라고 부릅니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다. 사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다. 어떻게 사용하나요? 위에서 언급한 것처럼 웹에서는 CSS만 동작합니다. Sass, Less, Stylus 같은 전처리기(이하 ‘전처리기’로 표기)는 직접 동작시킬 수 없습니다. 그렇다면 어떻게 사용할 수 있을까요? CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다. 전.. 이전 1 다음
