집 >웹 프론트엔드 >HTML 튜토리얼 >CSS SASS 스타일을 사용하는 방법

CSS SASS 스타일을 사용하는 방법

php中世界最好的语言원래의: 2018-01-25 11:24:132106검색

이번에는 SASS 스타일의 CSS를 사용하는 방법과 SASS 스타일의 CSS를 사용할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

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

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

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

1. 줄 들여쓰기를 일관되게 유지합니다.
2. 콜론/중괄호 전후의 공백 수를 일관되게 유지합니다.
3. 한 줄에 하나의 선택기와 한 줄에 하나의 규칙을 유지합니다. 4. 관련 시도 속성을 함께 작성하세요
5. 클래스 이름 명명 규칙을 계획하세요
6. CSS
id 선택기 사용을 피하세요 7. 기다려주세요

다음으로 아름다운 SASS 코드를 작성하는 방법을 배워보겠습니다. 클래스를 예로 들면 다음과 같습니다.

먼저 @extend(s)를 나열하세요

.weather {   
  @extends %module;    
  ...   
}

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

　일반 스타일

.weather {   
  @extends %module;    
  background: LightCyan;   
  ..   
}   
　　@include(s)   
.weather {   
  @extends %module;    
  background: LightCyan;   
  @include transition(all 0.3s ease-out);   
  ...   
}

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

　Selector Nesting

.weather {   
  @extends %module;    
  background: LightCyan;   
  @include transition(all 0.3s ease);   
  > h3 {   
    border-bottom: 1px solid white;   
    @include transform(rotate(90deg));   
  }   
｝

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

　 모든 공급업체 접두사에 @mixins를 사용하세요.

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

그러나 일부 공급업체 접두사의 민영화가 매우 심각한 경우 이러한 접두사는 표준화하기가 매우 어려우며 다른 접두사 또는 접두사가 없는 버전을 적용하는 것은 이득을 얻을 가치가 없습니다. @mixin 이러한 공급업체 접두사를 포기할 것입니다. 예를 들어 -webkit-line-clamp, -mscontent-zoom-chaining 또는 유사한 상황입니다.
　중첩 수준은 3수준을 초과하면 안 됩니다

.weather {   
  .<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" 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=cities&k0=cities&kdi0=0&luki=6&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%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">cities</span></a></span> {   
    li {   
      // no more!   
    }   
  }   
}

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

　때때로 클래스와 관련된 코드가 너무 많으면

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

.weather   
  > h3 {   
    @extend %line-under;   
  }   
}

중첩된 코드는 50줄을 넘지 않아야 합니다

SASS에서 중첩이 50줄을 초과하면 컴파일러의 한 페이지에 완전히 표시되지 않아 코드가 읽기 어렵고 어려워질 가능성이 높습니다. 이해하다. 중첩은 원래 사고와 코드 구성을 촉진하고 단순화하기 위한 것입니다. 가독성을 침해하는 경우 중첩하지 마십시오.

　전역 및 지역 SASS 파일 시퀀스는 테이블 콘텐츠와 동일합니다

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

　제조업체/전역 라이브러리가 먼저 나열되고, 사용자 정의 라이브러리가 나열되고, 모드가 나열되고, 마지막으로 각 부서에서 사용하는 라이브러리가 나열됩니다.

'디렉토리'는 한눈에 다음 예와 같습니다.

 /* Vendor Dependencies */  
@import "compass";   
    
/* Authored Dependencies */  
@import "<span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" 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_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="10_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/colors";   
@import "global/mixins";   
    
/* Patterns */  
@import "global/tabs";   
@import "global/modals";   
    
/* Sections */  
@import "global/header";   
@import "global/footer";

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

　SASS를 여러 개의 작은 파일로 합리적으로 분할

　　这样做没有任何不好。在情况允许的时候，尽量使用小而精的多个文件，这样便于开发者在寻找一些特定文件，而不是在几个拥有冗长代码的大文件中大海捞针。

...
@import "<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" 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%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/header/header/";   
@import "global/header/logo/";   
@import "global/header/dropdowns/";   
@import "global/header/nav/";   
@import "global/header/really-specific-thingy/";

我经常做的就是在一个全局scss文件中逐个引用这些文件，而不是引用一个_header.scss文件，然后再_header.scss文件中在逐个引用。这样做能够降低索引的时间和提高阅读效率。

　　当这些文件过多导致import序列太长时，你可能会用到 Globbing 。
　　记得将Partials命名为_partial.scss

　　这是一个常见对于不能自身编译的文件的命名。这样的文件多少会依赖于其他的文件，使得自身不能独立完成编译。我个人喜欢在文件名之前添加一个下划线，譬如_dropdown-menu.scss
　　在本地编译时添加行映射

　　看这里，这意味着开发工具能够告诉你每一条规则的来源，哪怕是一个被引入的partial文件。
　　在部署时，记得编译已精简的文件

　　运行中的网页永远都只需要使用精简的CSS。
　　无需递交.css文件

　　这可能要花些时间，但是不在文件库中放入.css文件可以是一件非常美妙的事. 文件编译在部署的时候就完成了。所以唯一可以看见的是那些已经精简的格式美妙的sass文件。这使得对于文件的描述变得大有用途。文件描述是用于对比由版本发布者所做的一些更改。而对于已经精简的.css文件，文件描述基本不需要了。
　　大方的使用注释

　　很少有人会后悔在代码中留下了注释。不论是有用的还是不起眼的注释，他们最终都会在编译成精简的CSS文件时被抹去，对于开发者来说不会有任何附加代价。

.overlay {
  /* modals are 6000, saving messages are 5500, header is 2000 */
  z-index: 5000; 
}

　　提到注释，你可能也需要对它做一些标准化的调整。在SASS中，’//’非常适用于添加注释，’//’使得注释和取消注释变得非常方便。
　　将一些常用的数值和有特殊意义的数值转化成变量

　　如果你发现自己重复使用一个数值（这在前端设计里是很常见的），你最好将它转化成一个变量。这样你可以通过命名来提醒自己这个数值的含义，并且在编写代码时保持一致性，是的你在更改这个数值时不需要逐行调整。

　　若果一个数字有着明显的含义，那么将它转化成变量是必不可少的啦。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

CSS SASS 스타일을 사용하는 방법

관련 기사