뇌 채우기 공간

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이..

함수 자신의 함수를 정의하여 사용 할 수 있따. mixin과 약간 비슷하다 차이점은 mixin은 지정한 스타일을 반환하는 반면 함수는 연산된 특정 값 @return 지시어를 통해 반환한다. box1에서는 함수를 그대로 썻으므로 기본 값 정의 그대로 들어간다. box2와 3에서는 첫번째 인수를 정의해주었으므로 number가 각각 8과 3인 상태이다 함수는 내장함수가 있는데 내가 만든 함수랑 충돌할 수가 있다. 그래서 내가 만든 것은 별도의 접두어를 붙인다. my-custom-func-red() 이런식으로

@extend 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용한다. 하지만 원치않은 부작용이 초래할 수 있으므로 사용 권장하지 않는다. 엄청나게 확장됨

때때로 입력할 인수의 개수가 불확실한 경우가 있다. 그럴 경우 매개변수 뒤에 ...을 붙인다. 순서대로 인수가 들어가는데 3개를 받겠다고 했는데 5개를 넣었다. 원래는 오류가 나는데 bg옆에 ...을 붙였으니 bg라는 변수가 그 다음 것들을 다 받는다. // 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음 @mixin bg($width, $height, $bg-values...) { width: $width; height: $height; background: $bg-values; } div { // 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달 @include bg( 100px, 200px,..

재활용이라는 것은 같은 코드를 a부분에서도 사용하고 b부분에서도 사용하고 c부분에서도 사용하는 것이다. 그 내용을 정의 하는 것이 @mixin이고 사용하는 것이 @include이다. @mixin으로 size라는 재활용 코드를 정의했다. 그리고 인수로 값을 넣으면 되는데 매번 같은 값을 가질라면 어떻게 해야하는가 기본값을 mixin에서 설정해주고 다음에 그 값을 쓸 때는 인수 없이 그냥 mixin명만 써주면 된다. 그리고 값을 변경하고 싶을때는 값을 적어주면 된다.

and : 그리고 or: 또는 not: 부정(반대) 변수w가 50px보다 크고 150px보다 작으면 width를 400px로 적용하겠다. 참이므로 item의 width는 400px이다. 이 참인 조건 앞에 not을 붙이면 false가 된다. 그러면 item의 width는 400px이 아니다.