Sass(SCSS) 완전 정복! | HEROPY Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog Sass: Built-In Modules (sass-lang.com) Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call f..

@while 은 조건이 false로 평가될때까지 무한 반복하기 때문에 빠져나갈 조건을 만들어야한다. @while 조건 { // 반복 내용 } $i가 원래 6이었는데 while문에서 $i를 재정의한다. 그래서 while문의 조건에서 false가 될때까지 루프를 돈다. 다른 반복문으로 대체가 가능하기 때문에 권장하지는 않는다.

@each 는 List , Map 데이터를 반복할 때 사용한다. for in 문과 비슷하다. @each $변수 in 데이터 { // 반복 내용 } 리스트에 있는 것들이 순서대로 $fruit에 들어간다. 혹시 매번 반복마다 Index 값이 필요하다면 index() 내장 함수를 사용할 수 있다. Map 데이터 사용 map데이터는 key: value로 값이 저장된다. 위의 코드의 뜻은 .box- 뒤에 key (apple, orange, banana) 가 순서대로 오는 이름을 가진 클래스에 background 이미지명이 value( korea, china, japan) 순서대로 온다는 뜻이다. map에서는 위에 사용한 것 처럼 index()를 사용할 수 없다. 따라서 map을 key와 value따로 따로 리스트..

@for는 스타일을 반복적으로 출력한다. @for $변수 from 시작 through 종료 { } 관례적으로 숫자가 증가하는 변수 이름은 i나 index를 사용한다. from ~through i가 1부터 시작해서 3까지 반복을 한다. 그러면 3번 반복을 한다. through의 1번째 자식은 20px, 2번째 자식은 40px, 3번째 자식은 60px이다 from~to 두번째 코드는 1에서 3 전까지니까 2번반복한다. 주의할 점은 nth-child() 이 안에 괄호에 바로 $i를 넣는게 아니라 문자보관을 하는 표시인 #{}를 사용하여 넣어주어야한다.

if(함수) 조건의 값 (true, false)에 따라 두 개의 표현식 중 하나만 반환한다. 조건부 삼항 연산자와 비슷하다. 조건? 맞으면 : 틀리면; ↑이게 삼항 연산자이다. if(조건, 표현식1, 표현식2) if에서 함수로 $width가 300px보다 크다면 , width: $width로 들어가고, 아니면 null로 넣겠다. null은 속성을 사용하지 않는다는 뜻이다. @if(지시어) 같이 사용할 수 있는 지시어는 @else , if가 있다. // @if @if (조건) { /* 조건이 참일 때 구문 */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이..