Sass지도 대 중첩 목록-CSS 튜토리얼-php.cn

Sass Maps vs. Nested Lists

코어 포인트

SASS 맵과 중첩 목록은 SASS의 데이터 구조이며 Mapping은 SASS 3.3에 도입되었습니다. 매핑은 더 복잡한 데이터 저장을 허용하는 키 값 쌍을 제공하는 반면 중첩 목록은 복잡한 데이터를 저장할 수 있지만 키 값 페어링이 부족한 간단한 구조입니다.

맵핑의 복잡성이 추가 되었음에도 불구하고 다양한 데이터 (예 : 브레이크 포인트 폭, 색상 값, 그리드 레이아웃, 유형 비율 및 기타 응답 형 타이포그래피 세부 정보와 같은 다양한 데이터를 저장하는 능력 때문에 인기가 있습니다. 반면, 중첩 목록은 단순성과 입력이 적기 때문에 더 실용적입니다.

SASS 매핑을 사용하는 주요 장점 중 하나는 특정 값을 직접 액세스 할 수있는 기능으로 코드를보다 효율적이고 읽기 쉽게 만듭니다. 그러나 중첩 목록은 쓰기 및 유지 관리가 더 빠를 수 있지만 매핑의 오류 확인 및 자세한 쿼리 기능이 부족합니다.

중첩 목록은 입력 측면에서 더 효율적일 수 있지만 각 목록에 포함 할 항목 수와 해당 주문의 절대적인 확실성이 필요합니다. 중첩 목록의 결 측값은 SASS가보고하지 않는 오류를 일으킬 수 있지만 매핑의 경우 기능은 하나의 값이 누락 된 경우에도 원하는 값을 여전히 제공 할 수 있습니다.

이 기사의 제목은 일부 사람들을 놀라게 할 수 있습니다. SASS 베테랑 인 경우 목록 목록을 사용하여 중첩 된 데이터 배열 (루비 -Sass-3.3 이전)을 시뮬레이션해야합니다. (Ruby) Sass 3.3은 매핑이라는 새로운 데이터 유형을 추가합니다. 목록 목록은 복잡한 데이터를 중첩 형식으로 저장할 수 있지만 키 값 페어링은 없습니다. 맵은 키 값 쌍을 추가하고 다양한 데이터를 생성 할 수 있습니다.

매핑의 출현으로 많은 SASS 사용자가 모든 것을 매핑에 넣기 시작했습니다 (그리고 좋은 이유가 있습니다!). 모든 중단 점 너비, 색상 값, 그리드 레이아웃, 유형 비율 및 기타 반응 형 타이포그래피 세부 정보를 맵에 넣을 수 있습니다!

이제 Sass가 키 값 쌍 매핑을 가지고 있으므로 목록 목록을 사용해야할만한 이유가 있습니까? 이론적 인 이유 중 하나는 후진 호환성입니다. 이전 버전이 설치된 개발자가 SASS를 유지 관리하면 목록이 도움이됩니다. 그러나 실제로 SASS 버전은 일반적으로

또는 다른 프로젝트 구성으로 제어되며 루비 보석은 하나의 명령 ()으로 만 업데이트 될 수 있습니다.

매핑 대신 중첩 목록을 사용하도록 선택할 수있는 더 실용적인 이유는 입력이 적다는 것입니다. 지도와 중첩 목록을 비교하여 각 구문 및 루프 트래버스에서 비교하는 방법을 확인해 봅시다. map-get() 문법 비교

이 예에서는 반응 형 타이포그래피를 제어하는 데이터 구조를 만들어 봅시다. 4 개의 중단 점을 저장합니다 (하나는 가장 작은 기본보기). 각 중단 점에 대해 최소 너비, 최대 너비,베이스 글꼴 크기 및 기본 선 높이를 저장합니다.

복합 매핑 구문 다음은 맵에 데이터를 저장하는 방법입니다. 큰 맵에는 저장하고 사용하는 데 필요한 변수의 값 인 값이있는 4 개의 키 (브레이크 포인트 레이블)가 포함됩니다. 이 읽기 쉬운 형식에서는 450 개의 문자와 26 줄이 있습니다.

중첩 된 목록 구문 동일한 데이터를 저장하는 중첩 목록이 훨씬 짧습니다. 그러나 우리는 더 이상 데이터의 키를 추가하지 않으므로 데이터를 통과하거나 함수로 호출하는 데 의존해야합니다. 즉,지도보다 훨씬 짧습니다. 180 자 미만, 6 줄에 불과합니다.

사이클 비교

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

로그인 후 복사

데이터 구조를 작성할 때 목록을 작성하면 매핑 시간의 3 분의 1 만 쓰면됩니다. 그러나이 값을 살펴볼 필요가 있다면 어떻게 비교합니까?

복잡한 매핑 루프

우리는 다음 코드를 사용 하여이 맵의 상단 항목을 반복 할 수 있습니다.

이 줄의 시작 부분에서 두 변수 ( 및 )는 루프의 맵에서 데이터를 반복 할 때 동적으로 할당됩니다. 각 최상위 데이터 블록에는 키와 값의 두 가지 구성 요소가 있습니다. 키를 및 값 (중첩지도)에 할당합니다. 이 루프에서 우리는 변수 nth() 및

를 사용할 수 있으며, 이는 현재 항목의 키와 값을 자동으로 나타냅니다.

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

로그인 후 복사

루프는 4 번 반복되며, 하나는 반복됩니다. 그러나 중첩 맵에서 유용한 데이터를 얻으려면

기능을 사용해야합니다. 이 함수는 맵의 이름과 필요한 키의 이름 인 두 가지 매개 변수를 사용하고 키와 관련된 값을 반환합니다. 그것은 sass에서 php의 및 또는 JavaScript의 구문과 동일합니다.

를 사용하여 모든 서브 맵을 반복하고 를 사용하여 유용한 변수에 값을 할당하려면 6 라인, 220 자리 루프로 끝납니다.

중첩 된 목록 루프

중첩 목록은 루프를보다 효율적으로 만듭니다. 맵의 경우 맵을 동적 루프 변수에 할당 한 다음 를 사용하여 모든 값을 변수에 할당해야하지만 목록의 경우 모든 값을 변수에 빠르게 할당 할 수 있습니다.

최상위 목록의 각 항목은 동일한 순서로 동일한 5 개의 값을 갖기 때문에 루프에서 사용하기 위해 각 값을 동적 변수에 즉시 할당 할 수 있습니다. 이러한 변수를 사용하면 를 사용하여 사용 가능한 변수에 하위 값을 할당 할 필요가 없습니다. 우리가 필요한 중첩 된 목록 루프는 100 자 미만의 두 줄에 불과합니다.

<code>@each $label, $map in $breakpoint-map {}</code>

로그인 후 복사

$label 중첩 된 목록 경고 $map $label 중첩 목록은 주요 개발자 성능 장점입니다. 전반적으로 매핑을 사용할 때와 같이 절반 미만을 입력 할 수 있습니다. 그러나 SASS에 맵을 추가 할 이유가 있습니다. 목록에는 다음과 같은 함수를 제공합니다. 키-값 매핑. $map

누락 된 값 중첩 된 목록에 의존하는 경우 각 목록에 포함 된 항목 수와 주문 순서를 절대적으로 알고 있어야합니다. 목록에서 항목을 놓치면 어떻게되는지 보자.

코드를 실행하려고하면 마지막 목록이 중단됩니다. "xlarge"에 "xlarge"가
및 "1100px"에 "1100px"가 에 올바르게 할당되지만 "21px"는 및 "1.618"에
를 할당하고
<code>$breakpoint-map: ( small: ( min-width: null, max-width: 479px, base-font: 16px, vertical-rhythm: 1.3 ), medium: ( min-width: 480px, max-width: 959px, base-font: 18px, vertical-rhythm: 1.414 ), large: ( min-width: 960px, max-width: 1099px, base-font: 18px, vertical-rhythm: 1.5 ), xlarge: ( min-width: 1100px, max-width: null, base-font: 21px, vertical-rhythm: 1.618 ) );</code>
로그인 후 복사
로그인 후 복사
가 비어 있습니다. 결과적으로, 우리는 마지막 중단 점에서 유효하지 않은 글꼴 크기 선언과 누락 된 라인 높이 속성을 얻습니다. 또한 Sass는 이에 대한 오류를보고하지 않으므로 상황이 성공했는지 알 수 없습니다. 미디어 쿼리의 최대 너비를 사용하려고하면 글꼴 크기 값 (21px)으로 끝날 것입니다. 이것이 매우 쓸모없는 최대 너비라고 생각합니다!
대신 맵을 사용하면 값이 누락 되더라도 함수는 우리에게 필요한 것을 제공합니다. 이것이 우리의 트레이드 오프입니다 : 우리가 목록에 들어가는 단순성과 속도, 우리는 매핑의 특이성과 오류 방지를 잃습니다. $label 쿼리 특정 목록 $min-width 중첩 목록을 사용하는 데있어 다른 관련 문제는 특정 목록을 쿼리하는 것입니다. 맵에는 키가 있으므로 $max-width : $base-font를 사용하여 모든 서브 맵에 빠르게 액세스 할 수 있습니다. $vertical-rhythm 중첩 된 목록에서 중간 목록에 대한 데이터를 가져 오려면보다 복잡한 기능이 필요합니다.
이 함수는 의 모든 목록을 통해 루프하고 원하는 레이블의 첫 번째 값을 확인하고 일치를 찾은 경우 목록을 반환합니다. 루프의 끝이 경기를 찾지 않고 도달하면 NULL을 반환합니다. 기본적으로 첫 번째 값을 의사 키로 사용하는 목록의
에 대한 빠른 수제 해석입니다. map-get() 누락 된 매핑 함수
Sass에는 매핑을 처리하는 데 많은 유용한 기능이 있습니다. 중첩 목록은 동일한 함수에 존재하지 않습니다. 예를 들어
를 사용하여 맵에 키 값 쌍을 추가 할 수 있습니다. 공유 키와 함께
를 사용하여 공유 키의 값을 업데이트하십시오.
또는 를 사용하여 새 목록을 추가 할 수 있지만 map-get()를 시뮬레이션하는 업데이트 기능에는 다른 사용자 정의 SASS 기능이 필요합니다.
또 다른 유용한 매핑 함수는
<code>$breakpoint-list: ( (small, null, 479px, 16px, 1.3), (medium, 480px, 959px, 18px, 1.414), (large, 960px, 1099px, 18px, 1.5), (xlarge, 1100px, null, 21px, 1.618) );</code>
로그인 후 복사
로그인 후 복사
입니다. 이 함수는
에 의존하는 모든 사용자 정의 함수를 검증하는 데 유용합니다. 그러나 목록에는 비슷한 기능이 없습니다.
사실리스트를 사용하여 목록의 매핑 함수를 시뮬레이션 할 수 있습니다. (이 라이브러리는 SASS가 추가 된 매핑 지지대를 추가하기 전에 이러한 기능을 제공했습니다.)
<code>@each $label, $map in $breakpoint-map {}</code>
로그인 후 복사
로그인 후 복사
결론
$breakpoint-list 지도는 키 값 쌍을 사용하기 때문에 목록보다 강력합니다. 추가 SASS 매핑 기능은 데이터를 찾고 매핑 된 값을 확인하는 실질적인 방법을 제공합니다. @each 중첩 된 SASS 목록은 쓰기 및 유지 관리가 더 빠를 수 있지만 오류 확인 또는 상세한 쿼리를위한 매핑만큼 적합하지 않을 수 있습니다. 대부분의 경우, 매핑이 더 나은 옵션이라고 생각하지만, 동점이 증가합니다. 더 작은 코드 블록 및 단일 사용 루프의 경우 때때로 중첩 목록을 사용하지만 매핑은 프로젝트 전체 설정 및 데이터 저장에 더 적합합니다.
작업에서 맵과 중첩 목록을 비교했거나 다른 사람보다 우선 순위를 정하기 위해 코드를 리팩토링 했습니까? 의견에 경험을 공유하십시오!
이 튜토리얼 에서이 Sassmeister Gist에서 사용 된 코드를 볼 수 있습니다.
Sass 매핑 및 중첩 목록의 FAQ (FAQ)

Sass지도와 중첩 목록의 주요 차이점은 무엇입니까?
Sass 매핑 및 중첩 목록은 Sass Preprocessors의 강력한 도구이지만 명백한 차이점이 있습니다. SASS 맵은 각 값이 고유 키와 관련된 다른 프로그래밍 언어의 연관 배열과 유사합니다. 이를 통해 데이터를 쉽게 검색, 업데이트 및 조작 할 수 있습니다. 반면에 중첩 목록은 JavaScript의 배열과 유사한 일련의 값입니다. 다양한 값을 보관하고 반복해야 할 때 가장 적합하지만 매핑에서 제공하는 특정 값에 직접 액세스 할 수있는 능력이 부족합니다.
~~Sass 매핑을 사용하는 방법은 무엇입니까?~~
SASS 맵을 사용하려면 먼저 한 쌍의 괄호가있는 맵을 정의해야합니다. 각 키 가치 쌍은 결장으로 분리됩니다. 예를 들어, . 그런 다음 함수를 사용하여 다음과 같이 맵의 값에 액세스 할 수 있습니다. ~~중첩 된 목록처럼 Sass지도를 중첩 할 수 있습니까?~~
예, 중첩 된 목록처럼 Sass지도를 중첩 할 수 있습니다. 이것은 관련 데이터를 함께 결합하려고 할 때 특히 유용합니다. 중첩 된 맵의 값에 액세스하려면
함수를 두 번 사용해야합니다.
Sass지도를 반복하는 방법은 무엇입니까?

지시문을 사용하여 Sass지도를 반복 할 수 있습니다.
지시문은 키와 값의 두 가지 변수를 취합니다. 예는 다음과 같습니다. .
중첩 된 목록 대신 SASS 매핑을 사용하는 장점은 무엇입니까?
Sass 매핑은 중첩 된 목록에 비해 몇 가지 장점이 있습니다. 특정 값에 직접 액세스 할 수 있으므로 코드를보다 효율적이고 읽기 쉽습니다. 또한 키 값 쌍을 추가, 삭제 및 업데이트하는 등 매핑 조작을위한 내장 기능을 제공합니다. $map: (key1: value1, key2: value2) 중첩 목록을 Sass지도로 변환 할 수 있습니까? map-get 예, map-get($map, key1) 함수를 사용하여 중첩 목록을 SASS 맵으로 변환 할 수 있습니다. 이 함수는 쌍 목록을 가져 와서 각 쌍이 맵의 키 값 쌍 인 맵을 반환합니다.
Sass에서 중첩 목록을 사용하는 방법은 무엇입니까?
Sass에서 중첩 목록을 사용하려면 먼저 한 쌍의 괄호가있는 목록을 정의해야합니다. 각 값은 공간이나 쉼표로 분리됩니다. 예를 들어,
. 그런 다음 함수를 사용하여 다음과 같이 목록의 값에 액세스 할 수 있습니다.
SASS 맵과 중첩 목록을 동시에 사용할 수 있습니까? $list: (value1, value2, value3) 예, Sass 매핑과 중첩 목록을 모두 사용할 수 있습니다. 예를 들어, 매핑을 사용하여 일련의 목록을 저장하고 그 반대도 마찬가지입니다. 이것은 복잡한 데이터 구조를 구성하는 데 유용합니다. nth Sass 매핑 또는 중첩 목록을 사용하는 제한 사항은 무엇입니까? nth($list, 1) Sass 매핑 및 중첩 된 목록은 강력한 도구이지만 몇 가지 제한 사항이 있습니다. 예를 들어, SASS 맵에는 중복 키가 없으며 맵의 키 순서를 보장 할 수 없습니다. 마찬가지로, 중첩 된 목록이 너무 커지거나 너무 복잡해지면 관리하기 어려울 수 있습니다.
Sass 맵 또는 중첩 목록을 사용하는 방법을 선택하는 방법은 무엇입니까?
Sass 맵 또는 중첩 목록을 사용하는 선택은 특정 요구에 따라 다릅니다. 특정 값에 직접 액세스하고 데이터를 조작 해야하는 경우 SASS 매핑이 최선의 선택 일 수 있습니다. 일련의 값을 보관하고 반복 해야하는 경우 중첩 목록으로 충분합니다.

위 내용은 Sass지도 대 중첩 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!