Reagieren Sie auf Kultivierungsnotizen, Haken in der frühen Phase der Gründungsgründung

Language 2023-01-29 20:27:08 views: null

Ich dachte, ich wüsste das. Ich habe den sassSchreibstil im Grunde schon früher beim Schreiben von Projekten in der Firma verwendet, was sehr flüssig war. Bis vor einiger Zeit wollte ich Element Plusdie Konstruktionsstruktur meiner eigenen Komponentenbibliothek anhand von Referenzen entwerfen, aber als ich Element Plusdiese eleganten sassVerwendungen sah, begann ich mich für meine Oberflächlichkeit und Unwissenheit zu schämen. Dies fing an, systematisch zu studieren.Während sassdieser Zeit wollte ich viele Male über Lernen und Teilen schreiben, aber alle endeten ohne Probleme aufgrund verschiedener Dinge. Heute habe ich endlich ein wenig Zeit aus meinem vollen Terminkalender herausgeschmuggelt, gerade rechtzeitig, um meine Ermutigung mit Ihnen zu teilen.

1. Einleitung

Als extrem ausgereifter cssPräprozessor verfügt er sassüber viele spezielle Funktionen, die uns helfen, eleganteren und prägnanteren Code zu schreiben. Es csshat zuvor Style-Variablen eingeführt und unterstützt auch Funktionen wie Verschachtelung, Funktionen, Mischen und Befehlssteuerung, was das Style-Gameplay erheblich erweitert.

sassEs gibt zwei Syntaxformen: SCSSund Sass.

Darunter ist es ein derzeit SCSSweit verbreitetes Format, das sich nur auf der Grammatikbasis CSS3von erweitert .SassCSS hacksvendor-specific syntax.scss

Es istSass das früheste grammatikalische Format mit Einrückungen statt geschweiften Klammern und Zeilenumbrüchen statt Semikolons, das Format ist besonders prägnant und das Schreiben bequemer. Dieses Format unterstützt ebenfalls alle Funktionen, verwendet jedoch Sassan einigen Stellen SCSSeinen anderen Ausdruck und seine Dateierweiterung heißt .sass.

Beide Formate können zur Verwendung in eine Datei eines anderen Formats importiert (@import) und auch sass-convertüber ein Befehlszeilentool in ein anderes Format konvertiert werden.

# Sass转为SCSS
sass-convert style.sass style.scss
​
# SCSS转为Sass
sass-convert style.scss style.sass

Ich werde die SassInstallation und Verwendung hier nicht vorstellen, schließlich werden die meisten Projekte jetzt webpackmit anderen Konstruktionswerkzeugen gepackt und gebaut, ergänzt durch entsprechende und loaderandere Werkzeuge, die bei der Kompilierung helfen. Es sollte nur sehr wenige Projekte geben, die sassBefehle auf der Befehlszeile verwenden müssen, um Stildateien zu kompilieren.

Erwähnenswert ist jedoch das Kodierungsformat . Wie bei CSSkönnen Sie verwenden @hcarset, um ein bestimmtes Kodierungsformat zu deklarieren: Fügen Sie es am Anfang der Stildatei (am ersten Zeichen) @charset "encoding-name"ein, und Sassdie Datei wird gemäß dem angegebenen Kodierungsformat kompiliert. Natürlich muss das verwendete Kodierungsformat in einen UnicodeZeichensatz konvertierbar sein. SassGeben Sie die Datei in UTF-8encoding aus und fügen Sie der Ausgabedatei eine Deklaration hinzu, CSSwenn in der kompilierten Datei Nichtzeichen vorkommen .ASCII@charset

2. Basisfunktionserweiterung

1. Verschachtelte RegelnNested Rules

SassEs unterstützt das CSSEinbetten eines Satzes von Stilen in einen anderen Satz von CSSStilen, und der innere Stil verwendet den äußeren Selektor als übergeordneten Selektor.

#main p {
  color: #00ff00;
  width: 97%;
​
  .redbox {
    background-color: #ff0000;
    color: #000000;}
}

Diese würde Sasswie folgt zusammengestellt CSS:

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

Die Verschachtelungsfunktion reduziert die Codemenge erheblich, wir müssen nicht mehr wiederholt umständliche Elternselektoren schreiben und sie ist einfach zu verwalten.

2. Elternauswahl &( Referencing Parent Selectors: &)

Wenn Sie beim Verschachteln auf den übergeordneten Selektor verweisen müssen, z. B. wenn Sie einen :hoverStil für ein Element festlegen, oder wenn bodyein Element einen bestimmten Wert classnamehat, kann es &verwendet werden, um auf den übergeordneten Selektor zu verweisen, dh seinen äußeren Selektor.

a {
  font-weight: bold;
  text-decoration: none;
  // & 引用父元素&:hover { text-decoration: underline; }
  // body.firefox 可以直接引用
  body.firefox & { font-weight: normal; }
}

wird Sasswie folgt zusammengestellt CSS:

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

&Muss das erste Zeichen eines Selektors sein, aber es können Suffixe folgen, um zusammengesetzte Selektoren zu generieren :

#main {
  color: black;
  // #main-sidebar 字符串拼接，这就有点好玩了&-sidebar { border: 1px solid; }
}

Dies würde kompiliert zu:

#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
}

3. Verschachtelung von AttributenNested Properties

Einige CSSfolgen demselben Namensraum ( namespace), z. B. font-family, font-size, font-weighthaben beide fontNamensräume als Attribute. Derzeit dürfen Attribute zur Vereinfachung des Schreibens und zur bequemen Verwaltung Sassin Namespaces verschachtelt werden:

.funky {
  // 注意命名空间这里要加冒号
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;}
}

kompiliert wie folgt CSS:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

Darunter kann der Namensraum auch eigene Attributwerte enthalten:

.funky {
  // font-size/line-height
  font: 20px/24px {
    family: fantasy;
    weight: bold;}
}

kompiliert zu:

.funky {
  /* font-size/line-height */
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
}

4. Platzhalterauswahl %foo( Placeholder Selectors: %foo)

Platzhalterselektoren ähneln idSelektoren und classSelektoren, außer dass das Symbol %, ist und @extenddurch Anweisungen aufgerufen werden muss, andernfalls werden sie nicht an Sassder Kompilierung teilnehmen.

5. NotizenComments

SassEs werden sowohl einzeilige als auch //mehrzeilige Kommentare unterstützt /* */. Mehrzeilige Kommentare werden vollständig in die kompilierte CSSDatei ausgegeben . !Wird das erste Zeichen eines mehrzeiligen Kommentars sein bedeutet , diesen Kommentar im komprimierten Ausgabemodus zu belassen und ihn in die Datei auszugeben, die normalerweise zum Hinzufügen von Copyright-Informationen verwendet wird. Interpolationsanweisungen ( ) können Variablenwerte in mehrzeiligen Kommentaren ausgeben. (Zur Interpolation verwenden.)CSSinterpolation#{$val}

// Sass
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
​
// 编译为CSS：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

3. Erweiterte Funktionserweiterung

1.SassScript

SassBietet eine SassScriptleistungsstarke Funktion namens , die auf jedes Attribut angewendet werden kann und es Attributen ermöglicht, zusätzliche Funktionen wie Variablen und arithmetische Operationen zu verwenden.

1.1Interactive Shell

Interactive ShellFunktionen , die auf der Befehlszeile getestet werden können SassScript. Geben Sie in der Befehlszeile ein sass -iund geben Sie dann ein, was Sie testen möchten, um SassScriptdie Ausgabe anzuzeigen.

sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

1.2 Variablen$ Variables: $

Die Verwendung von Variablen ist sehr einfach:

// 声明变量
$width: 5em;
​
#main {// 使用变量
  width: $width;
}

Variablen haben einen Gültigkeitsbereich auf Blockebene , und Variablen in verschachtelten Regeln sind lokale Variablen, die nur in verschachtelten Regeln verwendet werden können. Globale Variablen können überall verwendet werden. Das Hinzufügen !globaleiner Deklaration verwandelt eine lokale Variable in eine globale Variable .

// Sass
#main {// !global声明，转换为全局变量
  $width: 5em !global;
  width: $width;
}
​
#sidebar {
  // 使用全局变量
  width: $width;
}
​
// 编译为CSS:
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

1.3 DatentypenData Types

SassScript7Die wichtigsten Datentypen werden unterstützt :

  • Zahlen, mit Einheiten 1, 2, 3, 6, 10pxusw.;
  • string (sowohl in Anführungszeichen als auch ohne Anführungszeichen werden unterstützt), "foo", "bar", baz;
  • Farbe blue, #04a3f9, rgba(255,0,0,0.5)usw.;
  • boolesch, true, false;
  • NULL, null;
  • Array ( list), mit Leerzeichen oder Kommas als Trennzeichen, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif;
  • maps, was äquivalent ist zu JSwo Object, (key1: value1, key2: value2).

Darüber hinaus werden SassScriptauch andere CSSAttributwerte wie UnicodeZeichensätze oder !importantDeklarationen unterstützt, diese werden jedoch nicht gesondert behandelt, sondern als Zeichenfolgen ohne Anführungszeichen behandelt.

1.3.1 Saiten

SassScriptSowohl Strings in Anführungszeichen ( ) als auch Strings ohne Anführungszeichen ( ) werdenquoted strings unterstützt . Diese beiden Zeichenfolgen werden zur Kompilierzeit nicht ineinander konvertiert, außer in einem Fall: Bei Verwendung von ( ) wird die Zeichenfolge in Anführungszeichen in eine Zeichenfolge ohne Anführungszeichen kompiliert, was praktisch ist, um den Selektornamen in Anführungszeichen zu setzen.unquoted strings#{}interpolationmixin

// Sass
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";}
}
@include firefox-message(".header");
​
// 编译为CSS
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}
1.3.2 Array ( lists)

Ein Array bezieht sich darauf, Sasswie eine Reihe von Werten CSSin margin: 10px 15px 0 0oder font-face: Helvetica, Arial, sans-serifdurch Leerzeichen oder Kommas getrennt behandelt werden. Tatsächlich werden einzelne Werte auch als Arrays behandelt, die nur einen Wert enthalten.

Das Array selbst hat nicht viele Funktionen, aber Sass list functionses bringt viele neue Funktionen in das Array: nthFunktionen können direkt auf ein Element im Array zugreifen; joinFunktionen können mehrere Arrays miteinander verbinden; appendFunktionen können dem Array neue Werte hinzufügen; @eachFunktionen kann jedes Element im Array durchlaufen.

Arrays können Unter-Arrays enthalten: Beispielsweise 1px 2px, 5px 6pxist , das zwei1px 2px Arrays von und enthält. 5px 6pxWenn die inneren und äußeren Arrays dieselbe Trennmethode verwenden, müssen Sie Klammern verwenden, um die innere Schicht zu umschließen, z . B. (1px 2px) (5px 6px). Klammern werden während der Kompilierung nicht beibehalten, egal wie sie geschrieben werden 1px 2px, 5px 6pxoder (1px 2px) (5px 6px)das endgültige Kompilierungsergebnis ist dasselbe, aber sie Sasshaben unterschiedliche Bedeutungen in der Datei, ersteres bedeutet ein Array mit vier Werten und letzteres bedeutet ein Array enthält zwei Es kann gesagt werden, dass die Klammern das Konzept der "Gruppierung" betonen.

()Wird zur Darstellung eines leeren Arrays verwendet und kann auch empty darstellen map. Leere Arrays werden nicht direkt kompiliert CSS, und wenn es leere Arrays oder Nullwerte im Array gibt, werden sie zur Kompilierzeit gelöscht. Wie 1px 2px () 3pxoder 1px 2px null 3px. Kommagetrennte Arrays dürfen das abschließende Komma beibehalten, was die strukturelle Beziehung des Arrays hervorheben soll, insbesondere wenn es notwendig ist, ein Array zu deklarieren, das nur einen einzigen Wert enthält. (1,)Stellt beispielsweise 1ein Array dar, das nur .

1.3.3maps

mapist eine Sammlung von Schlüssel-Wert-Paaren, keyund valuebeide können beliebige SassScriptObjekte sein. Es und listbeide arbeiten mit Funktionen. Beispielsweise können map-getFunktionen verwendet werden, um Schlüsselwerte nachzuschlagen, Funktionen können map-mergeverwendet werden, um neue Schlüsselwertpaare hinzuzufügen, und @eachDirektiven können verwendet werden, um Stile zu jedem Schlüsselwertpaar hinzuzufügen. mapEs kann überall verwendet werden, wo es verwendet werden kann list, aber nicht umgekehrt. Wenn mapes listin Funktionen verwendet wird, wird es als key1 value1, key2 value2Array des Formulars behandelt.

1.3.4 Farbe

Jeder CSSFarbausdruck gibt einen SassScriptFarbwert zurück. unquoted stringsDiese enthält eine große Anzahl benannter Farben (oft nicht von Zeichenfolgen ohne Anführungszeichen zu unterscheiden).

1.4 BetriebOperations

Alle Datentypen unterstützen die Gleichheitsoperation ==OR !=, zusätzlich hat jeder Datentyp auch seine eigene Operationsmethode.

1.4.1 Numerische OperationenNumber Operations

SassScriptUnterstützt Addition, Subtraktion, Multiplikation und Division sowie Rundungsoperationen ( +, -, *, /, %) und konvertiert bei Bedarf Werte zwischen Einheiten. Der Vergleichsoperator ( >, <, >=, <=) kann auch für numerische Operationen verwendet werden.

// Sass
p {
  width: 1in + 8pt;
}
​
// 编译为：
p {
  width: 1.111in; 
}
  • Divisionsbetrieb/

Die Divisionsoperation verdient eine gesonderte Erwähnung. Denn /Symbole CSSspielen normalerweise die Rolle, Zahlen in zu trennen. In SassScript, /nicht nur zum Trennen von Zahlen, sondern auch für Divisionsoperationen. In den folgenden drei Fällen handelt /es sich um einen Teilungsvorgang:

  • wenn der Wert oder Teil eines Werts eine Variable oder der Rückgabewert einer Funktion ist;
  • Wenn der Wert in Klammern eingeschlossen ist;
  • Wenn der Wert Teil eines arithmetischen Ausdrucks ist.
// Sass
p {
  font: 10px/8px;             // 普通的CSS
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 函数返回值，是除法运算
  height: (500px/2);          // 使用圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 算数运算表达式的一部分，是除法运算
}
​
// 编译为CSS
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

Wenn Sie eine Variable verwenden müssen und nicht möchten, /dass sie als Divisionsoperator verwendet wird, können Sie #{}die Variable umschließen mit:

// Sass
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}

// 编译为CSS
p {font: 12px/30px; 
}
1.4.2 FarbwertoperationColor Operations

Die Berechnung des Farbwerts erfolgt abschnittsweise, das heißt, R, G, Bdie Werte werden separat berechnet.

p {
  color: #010203 + #040506;
}

In Stücken berechnet 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09, dann kompiliert als:

p {
  color: #050709; 
}

verwendet werden color functions, was etwas bequemer ist als Farbberechnungen.

Farbwerte können auch mit numerischen Operationen kombiniert werden:

p {
  color: #010203 * 2;
}
​
// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为:
p {
  color: #020406; 
}

Es ist zu beachten, dass, wenn der Farbwert enthält alpha channel, der an der Berechnung beteiligte Farbwert denselben alphaWert haben muss, um die Operation auszuführen, da die arithmetische Operation nicht auf den alphaWert wirkt.

p {
	// 需要保证有相同的alpha值color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

Der Wert im Farbwert alphakann über die Funktion opacityoder angepasst werden transparentize.

// Sass
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
​
// 被编译为：
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}
1.4.3 String-OperationenString Operations

Verwenden Sie eine +Verkettungszeichenfolge; +der Wert auf der linken Seite bestimmt, ob das endgültige kompilierte Ergebnis in Anführungszeichen oder nicht in Anführungszeichen gesetzt wird.

Wenn der Operationsausdruck in Verbindung mit anderen Werten verwendet wird, verwenden Sie Leerzeichen als Konnektoren:

p {
  margin: 3px + 4px auto;
}
// 编译为：
p {
  margin: 7px auto; 
}

Sie können #{}dynamische Werte einfügen mit:

$value: null;
p:before {content: "I ate #{$value} pies!";
}

// 编译为CSS:
p:before {content: "I ate pies!"; 
}
1.4.4 Boolesche OperationenBoolean Operations

Unterstützung für boolesche Operationen and, or, not.

1.4.5 Array-Operation

Arrays unterstützen keine direkten Operationen und können nur list functionsmit manipuliert werden.

1.5 Klammern(Parentheses)

Klammern werden zuerst gezählt.

1.6 FunktionenFunctions

SassScriptEs sind viele Funktionen eingebaut, einige können sogar CSSmit gewöhnlichen Anweisungen aufgerufen werden:

p {
  color: hsl(0, 100%, 50%);
}
// 编译为：
p {
  color: #ff0000; 
}
  • SchlüsselwortargumenteKeyword Arguments

SassFunktionen erlauben Schlüsselwortargumente, das obige Beispiel kann wie folgt geschrieben werden:

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

SassEs gibt viele eingebaute Funktionen, daher werde ich sie hier nicht erweitern.

1.7 InterpolationsanweisungenInterpolation #{}

Variablen können #{}in Selektoren oder Eigenschaftsnamen verwendet werden über:

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

// 编译为：
p.foo {border-color: blue; 
}

SassScriptim 1.8&

&Stellt den übergeordneten Selektor dar. Wie folgt, &der Wert von ((".foo.bar" ".baz.bang"), ".bip.qux").

.foo.bar .baz.bang, .bip.qux {$selector: &;
}

Wenn es keinen übergeordneten Selektor gibt, ist &der Wert null. Dies kann angewendet werden mixin, um zu erkennen, ob es einen übergeordneten Selektor gibt:

@mixin does-parent-exist {
  @if & {
    // 有父选择器
  &:hover {
      color: red;
  }} @else {
    // 没有父选择器
    a {
      color: red;
  }}
}

1.9 Variablenvorgabewert ( Variable Defaults):!default

Das Hinzufügen am Ende einer Variablen !defaultkann verwendet werden, um !defaulteiner Variablen, der keine Deklaration zugewiesen wurde, einen Wert zuzuweisen. nullDie Zuweisung funktioniert nur, wenn der Variablen kein Wert oder ein Nullwert zugewiesen wurde !default.

$content: "First content";
// 变量已被赋值，无效
$content: "Second content?" !default;
$new_content: "First time reference" !default;
​
#main {
  content: $content;
  new-content: $new_content;
}
​
// 编译为：
#main {
  content: "First content";
  new-content: "First time reference"; 
}

2. @-Rulesmit dem Befehl ( Directives)

SassAlle CSS3 @-Rulessowie Sassbestimmte Direktiven ( directives) werden unterstützt.

2.1@import

SassErweiterte @importFunktionalität zum Importieren .scssund .sassAblegen. Die importierten Dateien werden zusammengeführt und in dieselbe CSSDatei kompiliert. Darüber hinaus können in der importierten Datei enthaltene Variablen in der importierten Datei mixinverfügbar sein oder nicht.

Im Allgemeinen wird die Datei @importgefunden Sassund importiert, mit den folgenden Ausnahmen, die als normale CSSSyntax behandelt werden:

  • Die Dateierweiterung ist .css;
  • Dateinamen http://beginnen mit;
  • Der Dateiname ist url();
  • @importenthalten media queries.

Es ist erlaubt, mehrere Dateien gleichzeitig zu importieren. Wenn keine Erweiterung geschrieben wird, wird versucht, .scssoder .sassdie Datei mit demselben Namen zu finden.

@import "rounded-corners", "text-shadow";

Importdateien können auch Interpolationsanweisungen verwenden #{}, jedoch nur für CSSdie url()Importmethode.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
​
// 编译为：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@importsEs gibt auch zwei spezielle Verwendungen: Partials und Nesting .

  • Membran ( Partials)

Manchmal möchten Sie Sasseine Datei importieren, sie aber nicht als kompilieren CSS, Sie können einen Unterstrich vor dem Dateinamen hinzufügen, der Ihnen mitteilt, dass SassSie sie nicht kompilieren sollen. Beachten Sie, dass der Unterstrich in der Importanweisung nicht erforderlich ist. Wenn die Datei beispielsweise den Namen _colors.scssträgt, importiert der folgende Code die _colors.scssDatei und wird nicht als kompiliert CSS.

@import "colors";

Es sollte beachtet werden, dass, wenn es Dateien mit demselben Namen gibt, die führende Unterstriche enthalten, und Dateien, die keine führenden Unterstriche enthalten, die Dateien, die Unterstriche hinzufügen, ignoriert werden.

  • Verschachtelung@import

In den meisten Szenarien verwenden wir es auf der obersten Ebene der Datei @imports. Tatsächlich kann die Verschachtelung auch @importsin CSSStile oder verschachtelt werden @media. Der Unterschied zur Verwendung in der obersten Ebene besteht darin, dass der so importierte Stil nur in der verschachtelten Ebene erscheinen kann, was als „lokaler Geltungsbereich“ zu verstehen ist.

// example.scss
.example {
  color: red;
} 

// main.scss
#main {
  @import "example";
}

wird schließlich kompiliert zu:

#main .example {
  color: red;
}

Es sollte jedoch beachtet werden, dass in den Dateien, die von diesem verschachtelten Formular @importimportiert werden, keine Anweisungen der obersten Ebene wie @mixinusw. enthalten sein sollten.@charset

2.2@media

Sassist das @mediagleiche CSSwie in , mit zusätzlichen neuen Funktionen:

  • Es darf CSSinnerhalb von Regeln verschachtelt werden. Wenn es @mediain CSSeine Regel verschachtelt ist, wird es beim Kompilieren in die äußerste Ebene der Datei kompiliert und enthält den übergeordneten Selektor, wenn es zuvor verschachtelt war, was sehr praktisch ist.
// Sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;}
}
​
// 编译为
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}
  • @mediaVerschachtelung ist erlaubt queries, was automatisch zur Kompilierzeit hinzugefügt wird and.
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
  }}
}
​
// 编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}
  • Sie können SassScript(Variable, Funktion usw.) anstelle des Namens oder Werts der Bedingung verwenden.
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
​
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;}
}
​
// 编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } 
}

2.3@extend

  • @extendEin Selektor kann dazu gebracht werden, den Stil eines anderen Selektors über zu erben .
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  // 继承，此时所有使用到 .error 的样式都会被继承过来
  @extend .error;
  border-width: 3px;
}
​
// 编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
​
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}
​
.seriousError {
  border-width: 3px; 
}
  • Placeholder SelectorsPlatzhalterauswahl

Manchmal ist es notwendig, eine Reihe von Stilen für die Vererbung zu definieren, nicht für ein bestimmtes Element, und wir hoffen, dass es nicht Sassseparat kompiliert und ausgegeben wird. Diese Art von Szene tritt häufiger auf, wenn eine SassStilbibliothek erstellt wird. So wurde der Platzhalterselektor geboren. Seine Verwendung ist fast identisch idmit Selektor oder classSelektor, die Selektornotation ist %. Bei alleiniger Verwendung werden Platzhalterselektoren Sassignoriert und nicht in die Ausgabedatei kompiliert.

// 不会被编译到输出文件中
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

Es muss @extendverwendet werden von:

.notice {
  @extend %extreme;
}
​
// 被编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}
  • !optionalAussage

Mithilfe von !optionalDeklarationen ist es möglich, @extendkeine neuen Selektoren zu generieren.

// 不可以，因为没有 .notice
a.important {
  @extend .notice
}
​
// 可以
a.important {
  @extend .notice !optional;
}
  • im Befehl verwendet@extend

Um zu vermeiden, dass viel nutzloser Code generiert wird, erweitern Sie ( @extend) in der Anweisung und beschränken Sie die Erweiterung auf Selektoren in derselben Anweisungsebene.

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;}
  .seriousError {
    // 可以
    // .error 同在一个 @meida层级中
    @extend .error;
    border-width: 3px;}
}
​
// 以下为反面栗子
.error {
  border: 1px #f00;
  background-color: #fdd;
}
​
@media print {
  .seriousError {
    // 不可以, .error 不在当前的@meida指令层级中
    @extend .error;
    border-width: 3px;}
}

2.4@at-root

Verwenden Sie @at-rootAnweisungen, um ausgewählte Selektoren auf die äußerste Ebene zu heben.

.parent {...
  @at-root .child { ... }
}
​
// 编译为
.parent { ... }
.child { ... }
  • Es kann sich um eine Struktur auf Blockebene handeln, die mehrere Selektoren enthält.
.parent {...
  @at-root {
    .child1 { ... }
    .child2 { ... }}
  .step-child { ... }
}
​
// 编译为
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
  • Verwenden Sie with:xxx yyy ...oder without:xxx yyy ..., um sicherzustellen, dass die äußere Direktive für den Selektor gültig ist, der in die äußerste Schicht befördert wird:
// without:
@media print {
  .page {
    width: 8in;
    // without: media 让选择器不受外层的@media影响
    @at-root (without: media) {
      color: red;
  }}
}
​
// 编译为
@media print {
  .page {
    width: 8in;}
}
.page {
  color: red;
}

3. SteuerbefehleControl Derectives

Steuerungsdirektiven werden verwendet, um Stile unter bestimmten Bedingungen zu referenzieren.

3.1if()

Die eingebaute ifFunktion kann in jedem SassScriptScripting-Kontext verwendet werden.

3.2@if

@ifDie Bedingung ist erfüllt, wenn der Rückgabewert des Ausdrucks der Anweisung nicht falseoder ist null. Kann später @else ifangeschlossen werden @else.

$type: monster;
p {
  @if $type == ocean {
    color: blue;} @else if $type == matador {
    color: red;} @else if $type == monster {
    color: green;} @else {
    color: black;}
}
​
// 编译为
p {
  color: green; 
}

3.3@for

Diese Direktive hat zwei Formate: @for $var from <start> through <end>, oder @for $var from <start> to <end>. Beide enthalten den Ausgangspunkt <start>, der Unterschied besteht darin, dass toer nicht enthält <end>, sondern throughenthält <end>. Kann auch $vareine beliebige Variable sein, <start>muss <end>aber ganze Zahlen sein.

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
​
// 编译为
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}

3.4@each

@eachBefehlsformat:@each $var in <list>

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }
  • Mehrere Variablen können gleichzeitig angewendet werden , was praktisch ist, wenn Sie Stile schreiben, die ähnliche Formen, aber unterschiedliche Werte haben:
@each $animal, $color, $cursor in (puma, black, default),
                                (sea-slug, blue, pointer),
                                (egret, white, move) {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }
  • Da mapses als Array behandelt wird lists, @eachkann auchmap verwendet werden :
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {
    font-size: $size;}
}
​
// 编译为
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

3.5@while

whileZirkulation, ich verstehe.

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  // 更改条件变量
  $i: $i - 2;
}
​
//编译为
.item-6 {
  width: 12em; }
​
.item-4 {
  width: 8em; }
​
.item-2 {
  width: 4em; }

4. Gemischte Befehle ( Mixin Directives)

mixinWird verwendet, um wiederverwendbare Stile zu definieren.

4.1 Gemischte Anweisungen definieren @minin( Defining a Mixin: @mixin)

Nachdem @mixinSie den Namen und den Stil hinzugefügt haben, können Sie die gemischte Anweisung definieren. Beachten Sie, dass Sie Selektoren und Attribute einschließen müssen, und Sie können auch verwenden &, um auf den übergeordneten Selektor zu verweisen.

// 定义名为 clearfix 的混合指令
@mixin clearfix {
  display: inline-block;
  // & 指代父选择器。注意，这个混合指令里虽然它没有父选择器，
  // 但是混合指令使用的地方，可以产生父选择器&:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
  // 这里的 & 同理* html & { height: 1px }
}

4.2 Referenz gemischte Anweisungen @include( Including a Mixin: @include)

  • Verwenden Sie @include MixinName, um eine Mixin-Direktive zu zitieren:
.page-title {
  // 引用混合指令，将 clearfix 中的规则混入到 .page-title 中
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
}
  • Es kann auch direkt auf die äußerste Ebene verwiesen und eingemischt werden, ohne Attribute zu definieren und keinen übergeordneten Selektor zu haben, auf den verwiesen werden kann:
@mixin silly-links {
  a {
    color: blue;
    background-color: red;}
}
@include silly-links;
​
//编译为
a {
  color: blue;
  background-color: red; }

In den Mixin-Direktiven, die wir schreiben, ist es am besten, nur untergeordnete Selektoren zu definieren, damit sie überall in der Datei sicher importiert werden können.

  • Eine zusammengesetzte Direktive kann auf andere zusammengesetzte Direktiven verweisen:
@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

4.3 Parameter ( Arguments)

Parameter können verwendet werden, um Variablen für den Stil von gemischten Befehlen zu setzen und Werte zuzuweisen. Beim Referenzieren und Definieren gemischter Anweisungen sollte die Reihenfolge der Parameter eine Eins-zu-Eins-Entsprechung sein, und den Parametern können Standardwerte zugewiesen werden.

// $width有默认值
@mixin sexy-border($color, $width: 1in) {
  // 注意这里得 border，是CSS命名空间
  border: {
    color: $color;
    width: $width;
    style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
​
// 编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
​
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

Darüber hinaus gibt es zwei weitere wichtige Punkte zu den Parametern:

  • Schlüsselwort parameter ( Keyword Arguments): Wenn MixinSie einen Parameter per Referenz übergeben, übergeben Sie den Wert genau, indem Sie das Schlüsselwort des Parameters (Parametername) angeben.
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

Das Schreiben ist zwar etwas umständlich, aber gut lesbar und genau zuordenbar.

  • Parametervariable ( Variable Arguments): Wenn Sie nicht sicher sind, wie viele Parameter der gemischte Befehl benötigt, können Sie die Parametervariable am Ende des ...zu deklarierenden Parameters verwenden, und Sassdiese Parameter werden als Werteliste behandelt.
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
​
// 编译为
.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Sie können beim Zitieren auch Parametervariablen verwenden:

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
​
// 编译为
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

4.4 Inhalte in den gemischten Befehl importieren @content( Passing Content Blocks to a Mixin)

Beim Zitieren Mixinvon , insbesondere beim Zitieren auf der äußersten Ebene der Datei, können Sie @contentPlatzhalter verwenden und dann @includeden folgenden Inhalt in @contentdie Position importieren, ähnlich wie bei Vorlagen, Slots usw.

@mixin apply-to-ie6-only {* html {
    @content;}
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);}
}
​
// 编译为
* html #logo {
  background-image: url(/logo.gif);
}

Aufgrund der häufigen Verwendung Mixinin SassStilbibliotheken. Um die Verwendung zu vereinfachen, kann es =ausgedrückt werden @mixindurch und +ausgedrückt durch @include.

// Sass (这里就是Sass格式的语法了，而非SCSS格式)
=apply-to-ie6-only* html
    @content
​
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)
  • Inhalt auf Blockebene und variabler Geltungsbereich : Durch @contentdas Importieren von Inhalt auf Blockebene wird sein Geltungsbereich mit dem Kontext verknüpft, in dem er definiert ist, und hat nichts mit dem Geltungsbereich innerhalb der gemischten Anweisung zu tun.
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  // @content 的内容的作用域在定义它的地方
  @content;
  border-color: $color;
}
.colors {
  @include colors { // 这里的color，虽然会被插入到@content的位置// 但是它的作用域是在定义它的地方，
    // 而定义它的地方，$color是全局变量，值为whitecolor: $color; }
}
​
// 编译为
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

Beachten Sie, dass sich nicht jede Definition im globalen Geltungsbereich befindet und es auch möglich ist, dass die Definition in einem Selektor verschachtelt ist und der Geltungsbereich dann der lokale Geltungsbereich des Selektors ist.

5. Funktionsanweisung ( Function Directives)

SassErmöglicht benutzerdefinierte Funktionen, Funktionen können in jedem Attributwert oder verwendet werden SassScript. Namen von benutzerdefinierten Funktionen können vorangestellt werden, um Namenskonflikte zu vermeiden.

$grid-width: 40px;
$gutter-width: 10px;
​
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
​
#sidebar { width: grid-width(5); }
​
// 编译为
#sidebar {
  width: 240px; 
}

6. Ausgabeformat

6.1:nested

Nested ( :nested) ist sassdas Standardausgabeformat von , das die CSSBeziehung HTMLzwischen und klar widerspiegelt. Selektoren und Attribute belegen eine separate Zeile, und die Einrückung sassstimmt mit der in der Datei überein, wobei sie sich auf die Einrückung stützt, um die Verschachtelungsebene widerzuspiegeln.

// 编译后输出的CSS文件
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

6.2:expanded

Das expand ( :expanded)-Format ist dasselbe wie beim Schreiben von Hand, und der Selektor ist nicht eingerückt.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

6.3:compact

Das kompakte Format ( Compact) benötigt weniger Platz, jede CSSRegel belegt nur eine Zeile, verschachtelte Selektoren hinterlassen keine Leerzeilen und nicht verschachtelte Selektoren lassen Leerzeilen dazwischen.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
​
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

6.4:compressed

Das komprimierte Format ( Compressed) hinterlässt keine Leerzeilen, Leerzeichen, Kommentare usw. und das Ausgabevolumen ist am kleinsten.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Zu guter Letzt

Organisierte eine Reihe von "Interview-Sammlungen von Front-End-Herstellern", einschließlich HTML, CSS, JavaScript, HTTP, TCP-Protokoll, Browser, VUE, React, Datenstruktur und Algorithmus, insgesamt 201 Interviewfragen, und beantwortete jede Frage Beantworten und analysieren.

Freunde in Not, Sie können auf die Karte am Ende des Artikels klicken, um dieses Dokument zu erhalten und es kostenlos zu teilen

Ein Teil der Dokumentation zeigt:



Die Länge des Artikels ist begrenzt, und die folgenden Inhalte werden nicht einzeln angezeigt

Freunde in Not, Sie können auf die Karte unten klicken, um sie kostenlos zu erhalten

Ich denke du magst

Origin blog.csdn.net/web22050702/article/details/128643729
Empfohlen
Rangfolge
Täglich
Mehr
2025-04-27(0)
2025-04-26(0)
2025-04-25(0)
2025-04-24(0)
2025-04-23(0)
2025-04-22(0)
2025-04-21(0)
2025-04-20(0)
2025-04-19(0)
2025-04-18(0)

Code World

© 2018 codetd.com