CSS SASS 스타일 프로그래밍 가이드_HTML/Xhtml_웹페이지 제작

SASS를 사용하는 개발자가 많아질수록 SASS 코드 개수에 주목할 필요가 있습니다. CSS(Cascading Style Sheet) 구문부터 시작하여 SASS 구문의 일부 특수 기능을 설명할 수 있습니다. 결국 CSS 스타일 가이드는 매우 일반적입니다.

이 기사에서는 개인적으로 관심이 있는 몇 가지 기능을 주로 소개합니다. 이러한 기능을 활용하여 자신만의 SASS 사용 가이드 세트를 구성할 수 있습니다.
일반적인 CSS 형식 지정 규칙과 스타일 가이드를 계속 유지하세요

이 기사에서는 SASS의 일부 측면에 중점을 두지만 이를 기반으로 개발자는 기존의 올바른 형식 지정 규칙을 유지해야 합니다. 아직 자신만의 서식 규칙 세트를 개발하지 않았다면 여기에서 자신만의 CSS 작성 습관을 개발하는 데 도움이 되는 몇 가지 스타일 가이드를 검토해 보세요. 포함된 내용은 다음과 같습니다.

1. 줄 들여쓰기를 일관되게 유지하세요
2. 콜론/중괄호 앞뒤의 공백 수를 일관되게 유지하세요
3. 한 줄에 하나의 선택기와 한 줄에 하나의 규칙을 유지하세요
4. 다음을 시도해 보세요. Together에 관련 속성을 작성합니다
5. 클래스 이름 명명 규칙에 대한 계획을 세웁니다
6. CSS ID 선택기 사용을 피합니다
7. 잠시 기다립니다

다음으로 .weather 클래스의 속성 작성을 예로 들어 아름다운 SASS 코드를 작성하는 방법을 살펴보겠습니다.
첫 번째 목록 @extend(s)

CSS 코드클립보드에 콘텐츠 복사

1. .weather {
2. @extends %module
3. ...
4. }

이를 통해 개발자는 명확한 아이디어를 유지할 수 있고, 이 클래스와 해당 속성, 다른 클래스와 해당 속성 간의 관계를 즉시 알 수 있으며, 속성 일관성 및 속성 재사용에 대한 명확한 아이디어를 유지할 수 있습니다.
노멀 스타일

CSS 코드클립보드에 콘텐츠 복사

1. .weather {
2. @extends %module
3. 배경: LightCyan
4. ..
5. }
6. @include
8. .weather {
9. @extends %module
10. 배경: LightCyan
11. @include 전환(모두 0.3초 완화)
12. ...
13. }

이를 통해 개발자는 @extend(s) 및 @include(s)의 배포를 한 눈에 볼 수 있으므로 자신과 다른 개발자가 코드를 더 쉽게 해석할 수 있습니다. 경우에 따라 사용자 정의 @includes와 공개 소스 @includes를 구별할지 여부를 결정할 수도 있습니다(특히 코드 재사용성과 적시성을 고려하여)
선택기 중첩

CSS 코드클립보드에 콘텐츠 복사

1. .weather {
2. @extends %module
3. 배경: LightCyan
4. @include 전환(모두 0.3초 용이함);
>h3 {
6. 테두리-하단: 1px 단색 흰색
@include 변환(회전(90도))
}
｝

중첩된 섹션 내에서는 위의 스타일 규칙을 계속 사용하세요. 중첩된 부분은 항상 마지막에 와야 합니다.

모든 공급업체 접두사는 @mixins를 사용합니다
공급업체 접두사(CSS 접두사)는 시간에 매우 민감합니다. 최신 브라우저의 업데이트로 인해 이러한 접두어는 점점 더 적게 사용됩니다. 믹스인의 콘텐츠를 업데이트하여 이러한 변경 사항에 적응할 수 있습니다(또는 믹스인에 사용되는 일부 라이브러리가 자동으로 업데이트됩니다). 믹스인이 한 줄만 되어도 상관없습니다.

그러나 일부 공급업체 접두사의 민영화가 매우 심각한 경우 이러한 접두사는 표준화하기가 매우 어려우며 다른 접두사 또는 접두사가 없는 버전을 적용하는 것은 이득을 얻을 가치가 없습니다. 이러한 공급업체 접두사를 @mixin에서 버리기로 결정합니다. 예를 들어 -webkit-line-clamp, -mscontent-zoom-chaining 또는 유사한 상황입니다.

3레벨 이상 중첩하지 마세요

CSS 코드

클립보드에 콘텐츠 복사

1. .weather {
."너비: 자동; 높이: 자동; 부동: 없음;" id="14_nwp">"text-장식: 없음;" mpid="14" 대상 ="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf =1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=cities&k0=cities&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf 9e be&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www. admin10000 .com/document/2137.html&urlid=0" id="14_nwl">"color : #0000ff;font-size:14px;width:auto;height:auto;float:none;">도시 {  리 {
// 더 이상은 안 돼요
}
}
}

3번 이상 중첩하면 부정행위(나쁜?) 선택자를 작성할 가능성이 높습니다. 부정행위를 하는 이유는 이 선택기가 HTML의 구조에 너무 많이 의존하거나(불안정), 너무 상세하거나(함수가 너무 강력하고 유연성이 없음), 재사용성이 너무 낮기 때문입니다(그다지 유용하지 않음). 동시에 중첩 수준이 너무 많으면 코드가 모호하고 이해하기 어려워지기 쉽습니다.

때로는 클래스와 관련된 코드가 너무 많아 태그 선택기를 사용해야 하는 경우도 있습니다. 불필요한 계단식 연결을 방지하려면 클래스에 대해 매우 구체적으로 설명해야 할 수도 있습니다. 가능하더라도 확장을 사용하여 CSS의 일부 재사용성 기능을 활용하세요.

CSS 코드

클립보드에 콘텐츠 복사

1. .weather
2. >h3 {
3. @extend %line-under
4. }
5. }

중첩 코드는 50줄을 초과할 수 없습니다.

SASS에 50줄 이상의 중첩이 있는 경우 컴파일러의 한 페이지에 완전히 표시되지 않아 코드를 읽고 이해하기 어려울 가능성이 높습니다. 중첩은 원래 사고와 코드 구성을 촉진하고 단순화하기 위한 것입니다. 가독성을 침해하는 경우 중첩하지 마십시오.
글로벌 및 지역 SASS 파일 시퀀스는 테이블 콘텐츠와 동일합니다.

즉, 정해진 스타일이 없다는 거죠. 개발자는 모든 부분의 스타일을 일관되고 질서 있게 유지해야 함을 스스로 상기해야 합니다.

먼저 공급업체/전역 라이브러리를 나열한 다음 사용자 정의 라이브러리, 모드, 마지막으로 각 부서에서 사용하는 라이브러리를 나열합니다.

이렇게 하면 '디렉토리'는 다음 예와 같이 한눈에 알 수 있습니다.

CSS 코드클립보드에 콘텐츠 복사

1. /* 공급업체 종속성 */
2. @import "나침반"
4. /* 작성된 종속성 */
5. @import "너비: 자동 높이: 자동 부동: 없음;" id="10_nwp">텍스트 장식: 없음;" mpid="10" target=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app =0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_h c& tu=u1922429&u=http://www.admin10000.com/document/2137. html&urlid =0" id="10_nwl">color:#0000ff;글꼴 크기:14px; 너비 :자동;높이:자동; 부동:없음;">전역;
6. @import "전역/믹스인"
8. /* 패턴 */
9. @import "전역/탭"
10. @import "전역/모달"
12. /* 섹션 */
13. @import "전역/헤더"
14. @import "전역/바닥글"

이 파일은 나침반과 같습니다. 색상과 믹스인은 컴파일된 CSS 코드를 생성하지 않으며 순전히 독립형 라이브러리입니다. 이후에 특정성 충돌 없이 더 안전하게 다시 작성할 수 있도록 패턴이 도입되었습니다.
SASS를 여러 개의 작은 파일로 합리적으로 분할

이렇게 해도 아무런 문제가 없습니다. 상황이 허락한다면 작고 ​​정확한 여러 파일을 사용하십시오. 그러면 개발자는 코드가 긴 여러 개의 큰 파일에서 건초 더미에서 바늘을 찾는 대신 특정 파일을 찾을 수 있습니다.

...

CSS 코드클립보드에 콘텐츠 복사

1. @import "너비: 자동; 높이: 자동 부동산 없음;" id="9_nwp">텍스트 장식: 없음;" mpid="9" target=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid =0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 2137.html&urlid=0" id="9_nwl">색상 :#0000ff;글꼴 크기:14px;너비:자동;높이:자동>부동:없음;">전역< ;/span>/header/header/";
@import
2. "전역/헤더/로고/"; @import
"global/header/dropdowns/"
3. @import
"global/header/nav/"
4. ; @import "global/header/really-special-thingy/"

5. 제가 자주 하는 일은 _header.scss 파일을 참조하는 대신 이 파일들을 전역 scss 파일에서 하나씩 참조한 후 _header.scss 파일에서 하나씩 참조하는 것입니다. 이렇게 하면 색인 생성 시간이 줄어들고 읽기 효율성이 향상될 수 있습니다.

   파일이 너무 많고 가져오기 순서가 너무 길면 globbing을 사용할 수 있습니다.
   부분 이름을 _partial.scss로 지정하는 것을 잊지 마세요

   자체적으로 컴파일할 수 없는 파일에 대한 일반적인 명명입니다. 이러한 파일은 어느 정도 다른 파일에 의존하므로 독립적으로 컴파일을 완료하는 것이 불가능합니다. 저는 개인적으로 로컬에서 컴파일할 때 _dropdown-menu.scss
   줄 매핑 추가

   와 같이 파일 이름 앞에 밑줄을 추가하는 것을 좋아합니다.

   여기를 보면 이는 가져온 부분 파일이더라도 개발 도구가 모든 규칙의 소스를 알려줄 수 있음을 의미합니다.
   배포 시 간소화된 파일을 컴파일하는 것을 잊지 마세요

   실행 중인 웹페이지는 항상 최소한의 CSS를 사용해야 합니다.
   .css 파일을 제출하지 않아도 됩니다

   시간이 좀 걸릴 수 있지만 저장소에 .css 파일이 없으면 배포 시 파일 컴파일이 완료됩니다. 따라서 당신이 볼 수 있는 유일한 것은 간소화된 아름다운 형식의 sass 파일뿐입니다. 이는 파일 설명을 매우 유용하게 만듭니다. 파일 설명은 버전 게시자가 변경한 일부 내용을 비교하는 데 사용됩니다. 이미 간소화된 .css 파일의 경우 기본적으로 파일 설명이 필요하지 않습니다.
   넉넉한 사용법 참고사항

   코드에 코멘트를 남긴 것을 후회하는 사람은 거의 없습니다. 유용한 주석이든 눈에 띄지 않는 주석이든, 간소화된 CSS 파일로 컴파일되면 개발자에게 추가 비용 없이 결국 삭제됩니다.
   
   .overlay {
   /* 모달은 6000, 메시지 저장은 5500, 헤더는 2000 */
   z-index: 5000
   }

   특수효과에 관해 표준화된 조정이 필요할 수도 있습니다. SASS에서 '//'는 주석 추가에 적합하고, '//'는 주석 달기와 주석 해제를 매우 편리하게 해줍니다.
   　일반적으로 사용되는 일부 값과 특별한 의미를 갖는 값을 변수로 변환

   프런트 엔드 디자인에서 매우 일반적인 값을 재사용하는 경우 해당 값을 변수로 변환하는 것이 좋습니다. 이렇게 하면 값의 이름을 지정하여 값의 의미를 상기시키고 코드를 작성할 때 일관성을 유지할 수 있습니다. 예, 이 값을 변경할 때 한 줄씩 조정할 필요가 없습니다.

   숫자에 명확한 의미가 있으면 변수로 변환하는 것이 필수적입니다.
   
   

   CSS 코드클립보드에 콘텐츠 복사

   1. $z헤더: 2000
   2. $zOverlay: 5000
   3. $z메시지: 5050
   5. .header {
   6. z-색인: $zHeader
   7. }
   8. .overlay {
   9. z-색인: $zOverlay
   10. }
   11. .message {
   12. z-색인: $zMessage
   13. }

   이 번호는 단일 파일에 저장하고 @imported로 가져올 수 있습니다. 이 방법을 사용하면 모든 z-index 또는 기타 변수
   를 통합 관리하고 색상을 변수로 변환

   할 수 있습니다.

   흑백은 제외. 많은 색상은 다시 사용하지 않을 것이라고 생각하더라도 한 번만 사용할 수 없습니다. 그러나 변수로 변환하면 다른 곳에서 사용되는 것을 볼 수 있습니다. 색상 변수의 경우 Sass에는 lighten() 및 darkern()과 같이 이를 처리할 수 있는 색상 함수가 있습니다. 이를 통해 전반적인 색상을 쉽게 제어할 수 있습니다(한 번 변경하면 잊어버리세요).
   미디어 라이브러리 중첩 및 이름 지정

   Sass의 미디어 라이브러리 중첩 기능은 1. 다른 위치에서 선택기를 다시 작성할 필요가 없고 불필요한 오류가 발생하지 않는다는 것을 의미합니다. 2. 다시 작성한 규칙이 명확해지고 이러한 경우 매우 혼란스러울 수 있습니다. 코드가 CSS 코드의 끝이나 다른 파일에 있을 때.
   
   

   CSS 코드클립보드에 콘텐츠 복사

   1. .sidebar {
   2. 플로트: 맞아맞아;
   3. 너비: 33.33%
   @include bp(mama-bear) {
   5. 너비: 25%
   }
   }

   여기에 더 자세한 설명이 있습니다: http://css-tricks.com/naming-media-queries/
   끝에 Shame을 넣으세요

   
   글로벌 스타일 시트의 끝에 _shame.scss 파일을 추가하세요.

   
   
   

   CSS 코드

   클립보드에 콘텐츠 복사

   1. @import "나침반"
   ...
   @import
   5. "부끄러움"

   빠른 변경이 필요한 경우 여기에서 수정할 수 있습니다. 앞으로 적절한 시간과 에너지가 있다면
   _shame.scss에서 전체 아키텍처에 대한 수정 사항을 더 잘 구성하고 구조화할 수 있습니다. 자세한 내용은 다음을 참조하세요: http://csswizardry.com/2013/04/shame-css/

   
   당신은 모든 것을 결정하는 리더입니다
   Sass는 사용자가 지시하지 않은 작업은 수행하지 않으므로 Sass 파일의 최종 출력은 사람마다 다릅니다. Sass를 사용하여 CSS 파일을 작성하는 것은 Sass를 사용하지 않는 것과 같습니다. 여러분이 코드의 리더입니다.