So verwenden Sie CSS-SASS-Stile

Dieses Mal zeige ich Ihnen, wie Sie den SASS-Stil von CSS verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des SASS-Stils von CSS gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Da immer mehr Entwickler SASS verwenden, müssen wir auf die Anzahl der SASS-Codes achten. Wir können von der Syntax von CSS (Cascading Style Sheets) ausgehen, um einige der Besonderheiten der SASS-Syntax zu erklären. Schließlich sind CSS-Styleguides sehr verbreitet.

In diesem Artikel werden hauptsächlich einige Funktionen vorgestellt, die mich persönlich interessieren. Möglicherweise können Sie davon profitieren und Ihre eigenen SASS-Nutzungshandbücher erstellen.
Behalten Sie weiterhin Ihre eigenen häufig verwendeten CSS-Formatierungsregeln und Styleguides bei.

Dieser Artikel konzentriert sich auf die Diskussion einiger Inhalte zu SASS, aber auf dieser Grundlage sollten Entwickler ihre bestehenden und guten Formatierungsregeln beibehalten. Wenn Sie noch keine eigenen Formatierungsregeln entwickelt haben, finden Sie hier einen Überblick über einige Styleguides, die Ihnen bei der Entwicklung Ihrer eigenen CSS-Schreibgewohnheiten helfen sollen. Hier sind nur einige der enthaltenen Inhalte:

1. Halten Sie Zeileneinzüge konsistent
2. Halten Sie die Anzahl der Leerzeichen vor und nach Doppelpunkten/Klammern konsistent
3. Behalten Sie einen Selektor pro Zeile bei, einen Regel pro Zeile
4. Versuchen Sie, verwandte Attribute zusammen zu schreiben
5. Befolgen Sie für die Benennungsregeln für Klassennamen einen Plan
6. Vermeiden Sie die Verwendung von CSS ID-Selektor
7

Als nächstes lernen wir, wie man schönen SASS-Code schreibt, am Beispiel des Schreibens einer Eigenschaft der .weather-Klasse:
Erste Liste @extend(s)

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

Dies tun kann es Entwicklern ermöglichen, eine klare Vorstellung zu behalten, die Beziehung zwischen dieser Klasse und ihren Attributen und anderen Klassen und ihren Attributen sofort zu erkennen und eine klare Vorstellung von der Attributkonsistenz und der Wiederverwendung von Attributen zu behalten.
Normaler Stil

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

Dadurch können Entwickler die Bereitstellung von @extend(s) und @include(s) auf einen Blick sehen, was es für sie selbst und andere Entwickler einfacher macht, den Code zu interpretieren. In einigen Fällen können Sie auch entscheiden, ob Sie zwischen benutzerdefinierten @includes und @includes aus öffentlichen Quellen unterscheiden möchten (insbesondere im Hinblick auf die Wiederverwendbarkeit und Aktualität des Codes).
Selektorverschachtelung

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

Verwenden Sie den Stil innerhalb verschachtelter Abschnitte weiterhin Regeln oben. Verschachtelte Teile sollten immer an letzter Stelle stehen.
Verwenden Sie @mixins für alle Herstellerpräfixe

Anbieterpräfixe (CSS-Präfixe) sind sehr zeitkritisch. Aufgrund von Updates moderner Browser werden diese Präfixe immer seltener verwendet. Sie können sich an diese Änderungen anpassen, indem Sie den Inhalt Ihrer Mixins aktualisieren (oder einige in Ihren Mixins verwendete Bibliotheken werden automatisch aktualisiert). Auch wenn das Mixin nur eine Zeile lang ist, spielt es keine Rolle.
Aber wenn die Privatisierung einiger Anbieterpräfixe sehr schwerwiegend ist, wird es sehr schwierig sein, diese Präfixe zu standardisieren, und die Anwendung anderer Präfixe oder Versionen ohne Präfix wird sich nicht lohnen. Ich werde mich dafür entscheiden, @mixin auf diese Anbieterpräfixe zu verzichten. Zum Beispiel -webkit-line-clamp, -mscontent-zoom-chaining oder ähnliche Situationen.
Verschachteln Sie nicht mehr als drei Ebenen.

.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!   
    }   
  }   
}

Wenn Sie mehr als dreimal verschachteln, schreiben Sie wahrscheinlich einen betrügerischen (schlechten?) Selektor. Der Grund für den Betrug liegt darin, dass sich dieser Selektor zu sehr auf die Struktur von HTML verlässt (instabil), zu detailliert ist (die Funktion ist zu leistungsstark und weist keine Flexibilität auf) oder die Wiederverwendbarkeit zu schlecht ist (nicht sehr benutzbar). Gleichzeitig können zu viele Verschachtelungsebenen leicht zu unklarem und schwer verständlichem Code führen.

Manchmal gibt es zu viel Code, der sich auf eine Klasse bezieht, sodass Sie den Tag-Selektor verwenden müssen. Möglicherweise müssen Sie eine Klasse sehr genau festlegen, um unnötige Kaskadierung zu vermeiden. Selbst wenn möglich, verwenden Sie „extend“, um einige der Wiederverwendbarkeitsfunktionen in CSS zu nutzen.

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

Verschachtelter Code sollte 50 Zeilen nicht überschreiten

Wenn mehr als 50 Zeilen verschachtelter Code in SASS vorhanden sind, wird dieser möglicherweise nicht vollständig im Compiler angezeigt Dadurch wird der Code schwer lesbar und verständlich. Nesting soll ursprünglich das Denken und die Codeorganisation erleichtern und vereinfachen. Wenn es die Lesbarkeit beeinträchtigt, verschachteln Sie es bitte nicht.
Globale und regionale SASS-Dateisequenzen entsprechen Tabelleninhalten

Mit anderen Worten, sie haben keinen festen Stil. Entwickler sollten sich daran erinnern, den Stil aller Teile konsistent und ordentlich zu halten.

Listen Sie zuerst die Hersteller-/globalen Bibliotheken auf, dann die benutzerdefinierten Bibliotheken, dann die Modi und schließlich die von jeder Abteilung verwendeten Bibliotheken.

Das „Verzeichnis“ sieht also auf einen Blick wie im folgenden Beispiel aus:

 /* 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";

Diese Dateien sind wie ein Kompass, Farben und Mixins werden nicht generiert. Kompilierter CSS-Code, es handelt sich um rein eigenständige Bibliotheken. Danach wurden Muster eingeführt, um das Umschreiben ohne Spezifitätskonflikte sicherer zu machen.
SASS sinnvoll in mehrere kleine Dateien aufteilen

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

...
@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中文网其它相关文章！

相关阅读：

HTML的代码书写有哪些规范

Html+css怎样实现纯文字和带图标的按钮

在XHTML中的标题标签与段落标签有哪些使用方法

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-SASS-Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!