SCS에서 블렌드를 확장하지 않도록 옵션 추가

3752 단어 csscss

묘사

SCSS 모드에서 실행할 때 CSSCSS는 중복 검사를 실행하기 전에 혼합을 펼칩니다.예를 들어, 나의 두 선택기는 모두 세 개의 같은mixin을 포함하고, 최종적으로 23개의 규칙으로 확장되었고, CSSCS는 그들 사이의 25개의 공유 규칙을 보고했다.
나는 믹스를 사용하는 것도 군더더기를 없애는 셈이라고 생각한다.간단한 해결 방안은 그것들을 무시하거나, 더 이상적인 것은, 불필요한 검사는 정상적인 규칙처럼 혼합을 대할 수 있다는 것이다. 그러면 여러 위치에서 같은 그룹의 혼합을 불필요한 것으로 사용할 수 있다.
zmoazeni on HN :

My initial opinion is that even though your SCSS code is consolidated, the resulting CSS code is still duplicated all over the place. To me, that is a code smell. Particularly when I need to debug from the web developer tools.


비록 SCSS mixin은 최종적으로 컴파일된 CSS 파일로 복사되지만, 나는 더욱 중요한 것은 원본 코드를 더욱 가독성과 대상성을 가지게 하는 것이라고 생각한다.CSS를 고려하여 텍스트를 선택할 수 없습니다.공급업체의 접두사 때문에, 이것은 최종적으로 일곱 가지 규칙이다.이러한 스타일을 처리하는 세 가지 옵션은 다음과 같습니다.
1. 클래스 '선택 불가' 를 추가합니다.이것은 좋은 해결 방안이지만, 의미인 CSS를 깨뜨렸고, 'unselectable' 종류는 결국 모든 표시로 확산될 것이다.
2. 클래스나 ID를 통해 선택할 수 없는 모든 내용을 선택할 수 있는 커다란 CSS 선택기를 만듭니다. 이것은 대형 프로젝트에서 분명히 자리를 잡을 수 없습니다.
3. 선택할 수 없는 모든 요소 스타일에 포함된 '선택할 수 없음' mixin을 추가합니다.이것은 가장 좋은 해결 방안이다. 왜냐하면 그것이 속한 CSS 파일에서 스타일을 유지하고 모듈화를 추진하며, 주 단추를 혼합하여 선택할 수 없는 혼합을 자동으로 포함하도록 허용하기 때문이다.
확실히 최종적으로 생성된 CSS 코드는 중복됩니다.나는 이것이 코드 맛이라고 생각하지 않는다. 왜냐하면 나는SCS의 CSS 출력이 C컴파일러의 출력과 유사하다고 생각한다. 이것은 작업에 필요한 것이지만 반드시 아름답게 해야 하는 것은 아니다.나는 이것이 성능에 영향을 미칠 것이라고 인정하지만 CSSO 같은 보충 도구는 이 문제를 해결할 수 있을 것이다.
나는 왜 중복된 규칙이 웹 디버거의 문제가 되는지 확실하지 않다.개별 요소의 스타일을 보다 쉽게 조정할 수 있으므로 데이터 중복 제거 설정에서 요소를 조정하면 스타일을 공유하는 다른 요소에 영향을 줄 수 있으므로 실질적으로 유용하다고 생각합니다.

토론 #1

나는 @mlharvest@bkeepers@danielmorrison@mattslack과 @janson에게 이 일에 대한 그들의 견해를 듣고 싶다.

토론 #2

와 @bryckbost 저도 당신의 의견을 매우 중시합니다.

토론 #셋

기본적으로 작업이 정확합니다.산출이 중요하다.불필요한 검사를 왜 하는지는 몇 가지 이유가 있다.1) 최소한의 출력만으로도 브라우저 디버깅과 성능이 향상됩니다.2) 코드 유지보수성
만약 원인이 후자라면 원본 코드를 바탕으로 하는 분석은 정말 유용하다.이 프로젝트는 루비이기 때문에, Sass 해상도와 구축된AST에 접근할 수 있습니다.이론적으로, 이것은sass를 사용자가 사용하는 모든 내부 표현 형식으로 해석할 수 있습니다.
저는 항상compass에 짧은 벨벳/분석기를 설치하고 싶었습니다. 만약에sass의 독특한 기능을 함께 이용하고 싶다면 저에게 알려주세요.

토론 #4

2) Code maintainability... ... If the reason is the latter, then a source-based analysis is really useful.


사실 이것이 바로 내가 CSSCS를 만든 이유 중의 하나이다.

I've always wanted to get a linter/analyzer into compass, let me know if you'd like to work together to take advantage of sass's unique features.


듣기에 매우 재미있다.꼭 기억할게요.

토론 #5

It is true that the resulting CSS code ends up duplicated. I don't think it's a code smell because I consider the CSS output from SCSS to be akin to the output from a C compiler: necessary for things to work, but it doesn't have to be pretty.


CSSCSS는 CSS 출력의 불필요한 코드를 분석하기 위해 만들어진 것입니다. 이것은 사용자에게 보내는 실제 코드이기 때문입니다.그것은 보기 싫을수록, 존재하는 불필요한 코드가 많을수록, 오류와 문제를 읽고, 발견하고, 복구하는 데 어려움을 겪는다. (같은 일 @chrisepstein이 말했다.)
mixin, @include, @extend, SCS 또는 Sass의 모든 다른 기능을 사용할 수 있습니다.만약 적절하게 사용한다면, 그것들은 실제적으로 CSS 출력을 현저하게 줄이고 코드의 청결성과 유지보수성을 유지하는 데 도움이 될 것이다.CSSCS를 사용하여 불필요한 코드를 찾으면 실제적으로 SCSS 파일로 돌아가 "내가 어떻게 하면 더 잘할 수 있습니까?"라고 물어보는 데 도움이 될 것입니다.
그럼에도 불구하고, 나는 @zmoazeni에게 Compass includes가 3-5개의 공급업체 접두사가 아닌 하나의 스타일로 통합된다면 다행이지만, 나는 그가 왜 그와 같은 방식으로 그것을 구축했는지 이해할 수 있다. 이것은 모든 것을 매우 좋고 간단하게 한다.

토론 #6

@pindia@chrisepstein@mlharvest-Ok 저는 포기하고 --ignore-sass-mixins로고를 실현했습니다.이게 돌아와서 날 물지 않을지 보여줘.그것은 곧 v1과 함께 발표될 것이다.3.0.

좋은 웹페이지 즐겨찾기