프론트엔드/SCSS (2) 썸네일형 리스트형 SCSS(Sass) - (2) - 기본 사용법 반복문 @for $변수 from 숫자 through 숫자 { } zero base가 아니고 1부터 시작됩니다. nth-child뒤에는 보간으로 변수를 넣어야 합니다. SCSS에서 보간은 #{ } 방식으로 진행됩니다. 함수 JS문법과 비슷합니다. 다만 @를 붙여줘야 합니다. 색상 내장 함수 mix(기존 색상, 새로운 색상) --> 두 색상의 혼합색을 출력합니다. lighten(기존 색상, a%) --> 해당 색상을 a%를 밝게 출력합니다. darken(기존 색상, a%) --> 해당 색상을 a%를 어둡게 출력합니다. saturate(기존 색상, a%) --> 해당 색상의 채도를 a%를 올려서 출력합니다. desaturate(기존 색상, a%) --> 해당 색상의 채도를 a%를 낮춰서 출력합니다. grays.. SCSS(Sass) - (1) - 개요 및 기본 사용법 SCSS(Sass)는 CSS 전처리 도구입니다. Sass는 css와 호환이 안 될 경우가 있어, SCSS를 개발했습니다. 하나의 도구에 두 가지 문법으로 보면 됩니다. Sass 홈페이지 스타벅스 클론 예제에서 css 파일보시면 어떤 요소를 찾을려는게 너무 길게 써여졌습니다. Sass를 통해 좀 더 손쉽게 요소를 찾을 수 있고 처리할 수 있습니다. Sass는 표준 css문법보다 훨씬 쉽고 강력한 기능들을 가지고 있습니다. 실제로 브라우저에서 동작한 것은 표준css뿐입니다. Sass에서 css로 컴파일(변환)해야 합니다. SCSS 파일생성 css파일과 유사하게 .scss로 끝나는 파일을 만들고 html파일에 link로 연결하면 됩니다. SCSS 주석 /* */ 과 // 둘 다 가능합니다. /* */ 주석은 .. 이전 1 다음
