CSS와 Sass 정밀도의 이야기

백분율 레이아웃의 도전 : 브라우저 차이 및 부동 소수점 정밀 문제 백분율 레이아웃은 브라우저 불일치와 플로팅 포인트 정밀도의 사양 부족으로 인해 매우 어려운 일이며, 이는 정렬 및 정밀 문제로 이어질 수 있습니다.

SASS의 장점 : 정확도 및 코드 가독성 향상 Sass는 복잡한 계산을 처리하여 정밀도를 향상시키고 스타일 시트를보다 쉽게 ​​읽고 업데이트 할 수있는 사전 처리기 스크립팅 언어입니다. 그러나 Sass의 기본 정밀 옵션은 5이므로 일부 경우에도 여전히 너무 낮을 수 있습니다.

기능 : 브라우저 계산 및 반올림

CSS 기능을 사용하면 브라우저가 계산 및 반올림을 처리 할 수 ​​있으므로 더 나은 결과를 얻을 수 있습니다. 이 기능은 Sass Operation과 결합하여 CSS 정밀도를위한 두 세계의 최고를 제공합니다.

Edenspiekermann에서 우리는 코드 검토에 의존하여 제출 한 작업이 충분히 좋은지 확인합니다. 내가 종종 겪는 한 가지는 숫자 (특히 소수점이있는 숫자) 주변의 모호성입니다. 따라서 이것은이 문제를 명확히하는 것을 목표로하는 짧은 기사입니다.

초기 설정 시작하기 전에 전체 설명을 명확하게하기 위해, 우리는 작은 코드를 작업 할 것입니다. 이는 우리의 경우와 매우 관련이 있습니다. calc()

문제는 무엇입니까?

이 코드에 무엇이 잘못되었는지 궁금 할 것입니다. 외관에서 큰 문제는 없습니다. 이것은 3 열 그리드 레이아웃으로 매우 일반적입니다. calc(..) 그러나 그러나 33% 33%는 100%가 아닌 99%와 같습니다. 대부분의 경우 차이가 없지만 직선 정렬을 다룰 때 - 1%가 큰 영향을 줄 수 있습니다. 폭 14 픽셀 인 컨테이너의 1%는 14 픽셀입니다. 이것은 상당한 거리입니다.

왜 우리는 소수점을 더 정확하게 만들기 위해 소수점을 움직일 수 없습니까? 우리는 격차를 1.4 픽셀 또는 0.14 픽셀로 줄일 수 있습니다. 이는 더 이상 문제가되지 않는다고 생각합니다! 그런 다음 여기에서 시작하십시오.

는 더 잘 작동하지만 여전히 완벽하지는 않습니다. 존 알빈 윌킨스 (John Albin Wilkins)는이 기사에서“더러운 리틀 비밀의 반응 형 디자인”에서이 문제에 대해 광범위하게 논의합니다. 아직 읽지 않았다면 읽으십시오.

브라우저가 이것을 처리 할 수 ​​없습니까?

이 시점에서 브라우저가 왜 작동 할 수 없는지 궁금 할 것입니다. 문제는 CSS 사양이 브라우저 공급 업체에게 (아이러니하게도) 비율 수의 부동 소수점 정밀도로 무엇을 해야하는지 (아이러니하게도) 지정하지 않는다는 것입니다. CSS 사양이 세부 사항을 생략하면 각 브라우저가 자체 방식으로 처리 할 수 ​​있는지 확인할 수 있습니다.

위의 기사에서 다음 예제 :

[…] 열당 100% 너비의 6 열 그리드를 사용하십시오 ÷ 6 = 16.666667%. 너비의 1000 픽셀 인 뷰포트 (수학을보다 쉽게하기 위해 편리하게 선택했습니다)에서 각 열은 166.66667 픽셀로 계산됩니다. 사양은 지침을 제공하지 않기 때문에 브라우저 제조업체는 자체 규칙을 자유롭게 공식화 할 수 있습니다. 브라우저가 가장 가까운 픽셀로 반올림하면이 예에서는 167 픽셀을 얻게됩니다. 그러나 167 x 6 = 1002 픽셀 이후, 우리는 더 이상 뷰포트의 6 개의 열을 모두 수용 할 공간이 없습니다. 또는 브라우저가 열당 166 픽셀로 반올림하면 모든 열을 뷰포트에 완벽하게 넣는 것보다 4 픽셀이 작습니다. —— 존 앨빈 윌킨스

이것은 일어난 일입니다. 이전 버전의 Internet Explorer (주로 6 및 7)는 가장 가까운 정수로 반올림되어 레이아웃 중단을 유발합니다. WebKit 브라우저가 반올림하여 치명적인 레이아웃 결과를 방지하지만 추가 공간이 남습니다. 오페라 (적어도 오래된 렌더링 엔진에서)는 설명하기에는 너무 게으른 이상한 일을합니다. 그러나 사양에는이 동작에 대한 규칙이 없으므로 누구를 비난해야합니까? 물론 서브 픽셀 렌더링을 사용하는 브라우저는 아닙니다. 궁극적으로 이것은 최상의 결과를 얻는 방법이기 때문입니다.

어쨌든, 이것은 단순히 혼란 스럽고이 기사의 결론 에서이 문제를 다시 논의 할 것입니다.

Sass는 어떻습니까?

SASS는 수학 연산을 지원합니다. 이것은 새로운 것이 아닙니다. 실제로 SASS가 처음에 사용한 몇 가지 것 중 하나입니다 (수학 기반 그리드 시스템을 구축하기 위해). 우리는 컨테이너의 너비를 3 개의 동일한 부분으로 나누고 싶다고 Sass에게 알릴 수 있습니다.

우리는 또한 백분율 (..) 함수를 사용하여 동일한 결과를 얻을 수 있습니다.

Ruby와 Libsass에서 Sass의 정확도 옵션은 5입니다. 이것은 매우 낮기 때문에 실제로는 문제가되지만 기본값은 아닙니다 (구성 가능하지만 쉽지는 않습니다).

이 코드는 다음 CSS를 생성합니다

이것은 브라우저 문제를 해결하지는 않지만 스타일을 쉽게 작성할 수 있습니다. 계산과 정밀도를 다룰 필요는 없을뿐만 아니라 실제로 계산을 표시하여 코드를보다 쉽게 ​​읽고 업데이트 할 수 있습니다.

나는 이것이 좋은 것이라고 생각합니다.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

두 세계의 최고 지금까지, 우리는 Sass가 값을 하드 코드하는 대신 우리의 계산을 처리하는 것이 낫다는 것을 배웠습니다. 이제 가장 좋은 방법은 브라우저가 최선의 방법으로이를 처리하도록하는 것입니다. 이를 위해 CSS 함수를 사용할 수 있습니다.

이 코드는 아무것도 컴파일하지 않습니다. 저자가 쓰는대로 브라우저에 나타납니다. 그런 다음 브라우저는 최대한 활용할 책임이 있습니다. 브라우저가 일반 값과 ​​마찬가지로 브라우저가

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

값을 처리하는지 확실하지 않다는 것을 완전히 정직하게 말할 것입니다. 나는 그들이 계산을 한 다음 둥글게 생각합니다. 일부 브라우저는 서브 픽셀 렌더링을 방정식으로 통합하는 것으로 보입니다. 이에 대한 통찰력이 있으면 의견에 공유하십시오.

표현식 (주로 Internet Explorer 8 및 Opera Mini)을 지원하지 않는 브라우저의 경우 정적 값을 SASS 작업으로 표시 할 수 있습니다. 이런 식으로, 우리는 두 세계를 모두 최대한 활용할 수 있습니다. calc(..)

<code>.list-item {
  float: left;
  width: 33%;
}</code>

결론 신속하게 검토합시다. 첫째, 브라우저 불일치와 부동 소수점 정밀도에 대한 사양 부족으로 인해 레이아웃 백분율은 다루기가 어렵습니다.

그러면 복잡한 계산에 의해 생성 된 하드 코드 값은 일반적으로 좋은 생각이 아닙니다. 우리는 Sass가 근사치를 계산할 수 있습니다 (5 자리 자리).

더 나은 방법으로, 우리는 브라우저가 근사치를 계산할 수 있습니다. 이상적인 세상에서 브라우저가 수학 및 렌더링을 담당 할 때 최대한 활용할 수 있어야합니다. 이 방향으로 움직이기 위해

기능에 의존합니다.

이것은 거의 현재 상황입니다. 새로운 것은 없지만 빠른 검토가 도움이 될 것이라고 생각합니다!

CSS 및 SASS 정확도에 대한 FAQ (FAQ) CSS와 SASS의 차이점은 무엇입니까?

CSS (Cascading Style Sheet)는 HTML로 작성된 문서의 외관과 형식을 설명하는 데 사용되는 스타일 시트 언어입니다. SASS (구문의 스마트 스타일 시트)는 CSS로 해석되거나 컴파일되는 전 처리기 스크립팅 언어입니다. 두 가지의 주요 차이점은 SASS가 변수, 중첩, 믹스 인, 상속 등 CSS에 존재하지 않는 기능이 있다는 것입니다. 이러한 기능은 SASS가 CS보다 강력하고 유연하게 만듭니다.

CSS와 SASS에서 정밀도는 어떻게 작동합니까? calc(..) CSS와 SASS의 정밀도는 스타일 렌더링의 세부 사항과 정확성을 나타냅니다. CSS에서는 변수와 기능이 부족하여 정밀도가 종종 제한됩니다. 반면 Sass는 고급 기능 덕분에 더 높은 정확도를 허용합니다. 예를 들어, 특정 색상 또는 크기의 변수를 정의하고 스타일 시트 전체에서 일관되게 사용하여 설계의 정확성과 일관성을 보장 할 수 있습니다.

어떤 웹 프로젝트에서 Sass를 사용할 수 있습니까?

예, 모든 웹 프로젝트에서 Sass를 사용할 수 있습니다. SASS는 모든 버전의 CSS와 호환됩니다. 따라서 CSS로 시작하여 필요에 따라 SASS 기능을 추가 할 수 있습니다. 그러나 SASS는 브라우저가 해석 할 수있는 CSS로 전처리해야한다는 점을 기억하십시오.

CSS를 통해 SASS를 사용하면 어떤 이점이 있습니까?

Sass는 CSS보다 몇 가지 이점을 제공합니다. 변수, 중첩, 믹스 인 및 상속을 사용할 수 있으므로 스타일 시트를보다 정리하고 재사용 할 수 있으며 유지 관리하기 쉽습니다. Sass는 또한 수학 작업을 지원하므로 스타일 시트에서 직접 치수와 색상을 계산할 수 있습니다.

CSS 또는 SASS 코드의 정확도를 향상시키는 방법은 무엇입니까?

당신은 변수를 사용하여 일관된 값을 얻고, 수학적 작업을 사용하여 정확한 계산을 수행하고, 기능과 mixins를 사용하여 재사용 가능한 스타일을 얻음으로써 CSS 또는 SASS 코드의 정확도를 향상시킬 수 있습니다. 또한 CSS 재설정을 사용하면 다른 브라우저 간의 일관성을 보장 할 수 있습니다.

CSS 전 처리기 란 무엇이며 Sass가 필요한 이유는 무엇입니까?

CSS Preprocessor는 CSS의 기본 기능을 확장하는 스크립팅 언어입니다. 스타일 시트에서 변수, 중첩 규칙, 믹스 인, 기능 및 수학 작업을 사용할 수 있습니다. Sass는 CSS 전 처리기입니다. 브라우저는 CSS 만 해석 할 수 있기 때문에 필요합니다. 따라서 SASS 코드는 웹 프로젝트에서 사용되기 전에 CSS로 컴파일해야합니다.

Sass는 건조를 쓰는 데 어떻게 도움이됩니까 (자신을 반복하지 마십시오) 코드는 무엇입니까?

SASS는 변수, Mixin 및 상속과 같은 기능을 지원하여 건식 코드를 작성하는 데 도움이됩니다. 변수를 사용하면 한 번에 값을 정의하고 여러 곳에서 사용할 수 있습니다. Mixin을 사용하면 다른 규칙에 포함될 수있는 재사용 가능한 스타일을 작성할 수 있습니다. 상속을 통해 한 선택기에서 다른 선택기로의 CSS 속성 세트를 공유 할 수 있습니다.

Sass를 사용하는 잠재적 인 함정은 무엇입니까?

Sass는 많은 장점을 제공하지만 잠재적 인 함정도 있습니다. 사전 처리기의 필요성은 개발 프로세스의 복잡성을 증가시킬 수 있습니다. 또한, Nesting 및 Mixin과 같은 일부 SASS 기능은 부적절하게 사용하는 경우 CSS 출력 및 비효율에 대한 비효율을 유발할 수 있습니다.

Sass를 배우고 사용하는 방법은 무엇입니까?

Sass Online을 배울 수있는 많은 리소스가 있습니다. 공식 SASS 웹 사이트는 시작하기위한 포괄적 인 가이드를 제공합니다. 웹 개발 웹 사이트 및 온라인 학습 플랫폼에서 자습서를 찾을 수도 있습니다. Sass를 시작하려면 개발 환경에서 Sass Preprocessor를 설정해야합니다.

기존 CSS 코드를 SASS로 변환 할 수 있습니까?

예, 기존 CSS 코드를 SASS로 변환 할 수 있습니다. SASS는 CSS의 슈퍼 세트이므로 유효한 CSS는 유효한 SASS입니다. 먼저 .css 파일을 .scss (sassy css)로 바꾸고 코드에서 SASS 기능을 점차 시작할 수 있습니다.

위 내용은 CSS와 Sass 정밀도의 이야기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!