Tutorial zur Verwendung des CSS-Präprozessors Sass (Warnung bei mehreren Bildern)

Der CSS-Präprozessor bietet CSS dynamische Sprachfunktionen wie Variablen, Funktionen, Operationen, Vererbung, Verschachtelung usw., die dabei helfen, Stildateien besser zu organisieren und zu verwalten und Projekte effizienter zu entwickeln. Der CSS-Präprozessor kann CSS-Code einfacher verwalten und verwalten, wodurch die gesamte Webseite flexibler und veränderbarer wird. Bei den Präprozessoren sind die am weitesten verbreiteten weniger und frecher. Hier gibt es keinen Vergleich. Da Sass in der Sprache Ruby geschrieben ist, ist zum Kompilieren von Sass-Dateien eine Ruby-Umgebung erforderlich. Wir müssen nicht viel über die Ruby-Sprache wissen, um Sass zu verwenden. Wir müssen nur die Ruby-Umgebung installieren, während Less hauptsächlich in der Node-Umgebung ausgeführt wird und die funktionale Syntax ähnlich ist. In diesem Artikel wird hauptsächlich die Verwendung von Sass unter Ruby vorgestellt.

Ruby-Download und Installation:

1. Melden Sie sich bei http://rubyinstaller.org/ an

　

2. Klicken Sie auf „Herunterladen“, um zu dieser Seite zu gelangen. Laden Sie für 64-Bit-Windows-Computer die Version herunter, auf die der Pfeil zeigt

3. Direkt nach der Fertigstellung installieren

Nachdem wir auf „Fertig stellen“ geklickt haben, müssen wir, auch wenn die Installation abgeschlossen ist, immer noch zur Befehlszeile gehen, um zu überprüfen, ob die Installation erfolgreich ist, und nicht auf die Befehlszeile unter cmd.

Geben Sie nach dem Öffnen die Befehlszeile ein:

Dann installieren Sie sass unter Ruby: Geben Sie den Befehl gem install sass ein

Geben Sie sass -v ein und die Versionsnummer wird angezeigt, was bedeutet, dass die Installation erfolgreich ist.

Okay, der Download und die Installation sind abgeschlossen und die Umgebung ist eingerichtet. Die Syntax und die zugehörigen Anweisungen werden unten vorgestellt.

Verwendung von Sass.

Um es mehr Menschen zu ermöglichen, den Umgang mit Sass wirklich zu erlernen, habe ich zunächst eine neue Datei erstellt und diese Schritt für Schritt demonstriert.

1. Ich habe einen Ordner namens sasstest auf dem Desktop erstellt und darin eine neue Datei mit dem Suffix sass.scss erstellt. (Ändern Sie nach dem Erstellen eines neuen Textdokuments das Namenssuffix in sass.scss)

Lassen Sie mich hier erklären, warum das Suffix von sass scss ist. Tatsächlich hat sass zwei grammatikalische Formen.

Die erste ist scss, unsere Suffixform der Syntax. Dieses Format erweitert die CSS3-Syntax, was bedeutet, dass jedes CSS-Stylesheet eine äquivalente SCSS-Datei ist. Darüber hinaus unterstützt SCSS auch die meisten CSS-Hacks und die browserspezifische Präfixsyntax. Die Stylesheet-Datei dieser Syntax muss .scss als Erweiterung haben.

Die andere und früheste Syntax wird als eingerückte Syntax bezeichnet. Es bietet eine präzisere Möglichkeit, CSS zu schreiben. Es verwendet Einrückungen anstelle von geschweiften Klammern, um verschachtelte Selektoren darzustellen, und Zeilenumbrüche anstelle von Semikolons, um Attribute zu trennen, was für manche Leute einfacher zu lesen und schneller zu schreiben ist als SCSS. Die Einrückungssyntax weist alle Funktionen von Sass auf, es gibt jedoch einige geringfügige Syntaxunterschiede. Stylesheet-Dateien, die diese Syntax verwenden, müssen .sass als Erweiterung haben.

Tatsächlich kann eine Datei einer beliebigen Syntax unabhängig von der verwendeten Syntax zur Verwendung direkt in eine Datei einer anderen Syntax importiert und gleichzeitig über Sass ineinander konvertiert werden -convert-Befehlszeilentool.

Ich glaube nicht, dass Sie sich über diese Unterschiede Sorgen machen müssen. Verwenden Sie einfach einen. Ich bin an den ersten gewöhnt, daher wurde in diesem Artikel immer die SCSS-Syntax verwendet.

2. Der zweite Schritt besteht natürlich darin, sass.scss zu öffnen. Sie können jeden beliebigen Editor verwenden. Dieser Artikel verwendet erhabenen Text.

Um sass auszuführen, müssen Sie vorerst die Syntax vergessen, um zu sehen, ob es in CSS kompiliert werden kann.

Überprüfen Sie nach der Eingabe den neu erstellten Ordner. Sie werden feststellen, dass dort nichts ist, es ist immer noch dasselbe

Natürlich, wenn Sie Ihren Sass-Code nicht überwacht und ausgeführt haben, wie kann es dann zu Änderungen kommen? Erinnern Sie sich an Rubys Befehlszeilenfenster? Ja, Sie müssen dort den Befehl „run“ eingeben, damit sass CSS-Code generieren kann.

Führen Sie die Sass-Datei aus: Sass Input.scss Output.css (die linke Seite stellt die Sass-Eingabedatei dar, die rechte Seite ist die CSS-Ausgabedatei)

Die Befehle für Sass zum Überwachen von Sass-Dateien sind:

Das sogenannte Monitoring bedeutet, dass bei jeder Änderung der Sass-Datei die CSS-Datei entsprechend generiert wird. Dies unterscheidet sich von der Ausführung, die einmalig ist und deren Überwachung kontinuierlich erfolgt.

Überwachen Sie eine bestimmte Sass-Datei: sass --watch input.scss:output.css (links stellt die Sass-Eingabedatei dar, rechts ist die CSS-Ausgabedatei)

Beobachten Sie den gesamten Ordner: sass --watch sass:css (die linke Seite stellt den überwachten Ordnerpfad dar, die rechte Seite stellt den Ausgabeordnerpfad dar)

Führen Sie dann unseren SCSS-Code aus und sehen Sie sich das generierte CSS an. Ich möchte einen CSS-Ordner unter dem Sasstest-Ordner erstellen, um die CSS-Dateien zu speichern. zur einfachen Verwaltung.

1) Suchen Sie den aktuellen Ordner. Da es sich um einen Desktop handelt, lautet der Pfad wie folgt

Beachten Sie, dass Sie beim Überqueren eines Schildes ein bestimmtes Schild direkt wie folgt eingeben:

Befolgen Sie die oben genannten drei Typen und schreiben Sie die entsprechenden Anweisungen.

2) Ausführen: Beim Ausführen kann der CSS-Ordner nicht generiert werden. In diesem Fall müssen Sie den CSS-Ordner manuell hinzufügen.

Dieser Beispielbefehl:

Anleitung: Geben Sie zuerst den Sasstest-Ordner ein und geben Sie dann den Befehl ein.

Ergebnisbild:

Die erste ist die generierte Cache-Datei. Öffnen Sie sie als CSS und Sie werden sehen:

Zusätzlich zur CSS-Datei gibt es auch eine Map-Datei, die der Quelldatei entspricht, und die CSS-Datei entspricht der kompilierten Datei. Bei der Überprüfung auf Seitenprobleme wird die CSS-Datei angezeigt Die Sass-Datei, die geändert werden muss. Diese Karte ist die Korrespondenztabelle zwischen den beiden Dateien.

Öffnen Sie 2 Dateien separat:

Sie können sehen, dass das CSS herausgekommen ist und diese Datei nur eine Korrespondenztabelle ist, also machen Sie sich darüber keine Sorgen.

3) Dateien überwachen. Wir stellen den Ordner in seinem ursprünglichen Zustand wieder her, wie in der Abbildung gezeigt:

Überwachen Sie sass.scss, eine Datei sass --watch sass.scss:csssass.css. Monitoring generiert den entsprechenden Ordner, es ist nicht erforderlich, ihn manuell zu erstellen. (Beachten Sie, dass auf diese Weise nur eine Datei überwacht werden kann, nämlich sass.scss. Wenn unter sasstest andere Sass-Dateien vorhanden sind, können diese nicht überwacht werden)

Der Effekt ist derselbe:

Wir haben den ursprünglichen Zustand des Ordners wiederhergestellt, den generierten gelöscht und den Befehl zum Überwachen des Ordners ausprobiert. Am praktischsten ist es tatsächlich, den Ordner zu überwachen

Um einen Ordner zu überwachen, muss der Pfad zur vorherigen Ebene des Ordners zurückgehen, die in diesem Artikel der Desktop ist.

Okay, hier dreht sich alles ums Laufen.

In Bezug auf CSS-Ausgabeformate bietet sass vier Typen: verschachtelt, erweitert, kompakt und komprimiert.

Befehlsschreiben:

verschachtelt: Das verschachtelte (verschachtelte) Format ist das Standardausgabeformat von Sass, da sein Format CSS-Stile und die HTML-Dokumentstruktur widerspiegelt. Jedes Attribut belegt eine eigene Zeile, die Einrückung ist jedoch nicht festgelegt. Jede Regel wird basierend auf ihrer Verschachtelungstiefe eingerückt.

erweitert: Das erweiterte (erweiterte) Format ähnelt eher einem handgeschriebenen CSS-Stil, bei dem jedes Attribut und jede Regel eine eigene Zeile einnimmt. Eigenschaften innerhalb von Regeln werden eingerückt, Regeln haben jedoch keine spezielle Einrückung.

kompakt: Das kompakte Format nimmt weniger Platz ein als das verschachtelte oder erweiterte Format. Dieses Format konzentriert sich auf Selektoren, nicht auf ihre Eigenschaften. Jede CSS-Regel hat eine eigene Zeile, die auch jede definierte Eigenschaft enthält. Verschachtelte Regeln beginnen in einer neuen Zeile und nicht verschachtelte Selektoren geben eine Leerzeile als Trennzeichen aus.

komprimiert: Das komprimierte (komprimierte) Format nimmt so wenig Platz wie möglich ein, am Ende der Datei steht eine neue Zeile und es gibt im Grunde keine zusätzlichen Leerzeichen außer den erforderlichen Trennzeichen. Es enthält auch einige andere kleine Komprimierungen, wie z. B. die Auswahl der Darstellung mit der kleinsten Farbe. Dies bedeutet, dass die Lesbarkeit schlecht ist.

Sass-Syntax:

Die Zeit ist begrenzt, ich werde den Grammatikcode veröffentlichen, den ich in der Praxis verwendet habe:

<span style="color: #800000;">@charset "utf-8";
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
* CSS扩展
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">嵌套规则</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#main</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    p, div{
        font-size</span>:<span style="color: #0000ff;">2em</span>;<span style="color: #ff0000;">
        a{
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;
        }<span style="color: #800000;">
    }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">引用父选择器</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a</span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> lighter</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
        text-decoration:underline</span>;<span style="color: #ff0000;">
        font-weight</span>:<span style="color: #0000ff;"> bolder</span>;
    }<span style="color: #800000;">
    body.firefox &</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;">red</span>;
    }<span style="color: #800000;">
}
#main</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
    a{
        font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
        &</span>:<span style="color: #0000ff;">hover{
            color:blue</span>;
        }<span style="color: #800000;">
    }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">嵌套属性</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fun</span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;">{
        family:"微软雅黑"</span>;<span style="color: #ff0000;">
        size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
        weight</span>:<span style="color: #0000ff;">bolder</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 占位符选择器: %foo 
Sass 支持一种特殊类型的选择器,叫做"占位符选择器" 
](placeholder selector)。这些看起来像 class 和 id 
选择器，除了# 或.用%替换。他们需要在@extend 指令中使用;
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
*  Sassscript
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;"> 交互式 shell </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
Interactive Shell 可以在命令行中测试 SassScript 的功能。
在命令行中输入 sass -i，然后输入想要测试的 SassScript 
查看输出结果：
sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
 变量：变量仅在它定义的选择器嵌套层级的范围内可用
 （愚人码头注：可以理解为块级作用域）。不在任何嵌
 套选择器内定义的变量则在可任何地方使用（愚人码头
 注：可以理解为全局变量）。定义变量的时候可以后面
 带上!global标志，在这种情况下，变量在任何地方可
 见（愚人码头注：可以理解为全局变量）
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
 #bod</span>{<span style="color: #ff0000;">
     $width</span>:<span style="color: #0000ff;">100px !global</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;">$width</span>;
 }<span style="color: #800000;">
 #ref</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">$width</span>;
 }
<span style="color: #008000;">/*</span><span style="color: #008000;">
数据类型：SassScript 支持 7 种主要的数据类型
数字、文本字符串、颜色、布尔值、空值、值列表 (list)、maps
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin firefox-message($select)</span>{<span style="color: #ff0000;">
    body #{$select</span>}<span style="color: #800000;">:before</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> "hi"</span>;
    }<span style="color: #800000;">
}
@include firefox-message(".header");
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 插值 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
$name : son;
$color :blue;
p.#</span>{<span style="color: #ff0000;">$name</span>}{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#{color</span>}<span style="color: #800000;">;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> SassScript中的& 
就像当它在选择器中使用一样，SassScript中的&指向
当前父选择器。下面是一个逗号分隔的列表（list）
中包含一个空格的分隔列表（list）
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin does-parent-exist </span>{<span style="color: #ff0000;">
  @if & {
    &</span>:<span style="color: #0000ff;">hover {
      color: red</span>;
    }<span style="color: #800000;">
  } @else </span>{<span style="color: #ff0000;">
    a {
      color</span>:<span style="color: #0000ff;"> red</span>;
    }<span style="color: #800000;">
  }
}
@include does-parent-exist;
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 变量默认: !default 
 如果分配给变量的值后面添加了!default标志 ，
 这意味着该变量如果已经赋值，那么它不会被重
 新赋值，但是，如果它尚未赋值，那么它会被赋
 予新的给定值。
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$content: "Second content?" !default;
$content: "First content";
$new_content: "First time reference" !default;

#main </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> $content</span>;<span style="color: #ff0000;">
  new-content</span>:<span style="color: #0000ff;"> $new_content</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> @media </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.silder</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
    @media screen  and (max-width</span>:<span style="color: #0000ff;"> 500px) {
        width:500px</span>;
    }<span style="color: #800000;">
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #</span>{<span style="color: #ff0000;">$media</span>}<span style="color: #800000;"> and ($feature: $value) </span>{<span style="color: #ff0000;">
  .sidebar {
    width</span>:<span style="color: #0000ff;"> 500px</span>;
  }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> @extend </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.error</span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px #f00</span>;<span style="color: #ff0000;">
      background-color</span>:<span style="color: #0000ff;"> #fdd</span>;
}<span style="color: #800000;">
.seriousError</span>{<span style="color: #ff0000;">
    @extend .error;
    border-width</span>:<span style="color: #0000ff;"> 3px</span>;
}<span style="color: #800000;">
#fake-links .link </span>{<span style="color: #ff0000;">
    @extend a.class;
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;
}<span style="color: #800000;">
a.class</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
        color:red</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
@extend-Only 选择器
占位选择器看起来很像普通的 class 和 id 选择器，
只是 # 或 . 被替换成了 %。他可以像 class 或者
 id 选择器那样使用，而它本身的规则，不会被编译
 到 CSS 文件中，如下
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#context a%extreme </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 2em</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
占位符选择器，就像class和id选择器那样可以用于扩展。
扩展选择器，将会编译成CSS，占位符选择器本身不会被
编译。例如：
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.notice </span>{<span style="color: #ff0000;">
  @extend %extreme;
</span>}
<span style="color: #008000;">/*</span><span style="color: #008000;">
!optional 标记:主要是避免扩展时如果没有某个选择器，会报错
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a.important </span>{<span style="color: #ff0000;">
  @extend .noticeqq !optional;
</span>}
<span style="color: #008000;">/*</span><span style="color: #008000;">
*
*控制指令和表达式
*
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">@if 语法</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$type : monster;
p</span>{<span style="color: #ff0000;">
    @if $type == ocean {
        color</span>:<span style="color: #0000ff;"> red</span>;
    }<span style="color: #800000;"> @else if $type == matator</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> blue</span>;
    }<span style="color: #800000;"> @else if $type == monster</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> green</span>;
    }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> black</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">@for 语法</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
@for指令重复输出一组样式。对于每次重复，计数器变量用于
调整输出结果。该指令有两种形式：@for $var from <start> 
through <end> 和 @for $var from <start> to <end>。注意
关键字through 和 to的区别。$var可以是任何变量名，比如$i;
<start> 和 <end>是应该返回整数的SassScript表达式。当
<start>比<end>大的时候，计数器将递减，而不是增量。

@for语句将设置$var为指定的范围内每个连续的数值，并且每
一次输出的嵌套样式中使用$var的值。对于from ... through
的形式，范围包括<start>和<end>的值，但from ... to的形式
从<start>开始运行，但不包括<end>的值。
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@for $i from 1 through 3 </span>{<span style="color: #ff0000;">
      .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
}
@for $i from 5 to 3 </span>{<span style="color: #ff0000;">
      .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">@each
@each指令通常格式是@each $var in <list or map>。$var可以
是任何变量名，像$length 或者 $name，和<list or map>是一
个返回列表（list）或 map 的 SassScript 表达式。

@each 规则将$var设置为列表（list）或 map 中的每个项目，
输出样式中包含使用$var的值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@each $animal in puma, sea-slug, egret, salamander </span>{<span style="color: #ff0000;">
      .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png');
  }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">多重赋值</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) </span>{<span style="color: #ff0000;">
      .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png');
        border: 2px solid $color;
        cursor: $cursor;
  }
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) </span>{<span style="color: #ff0000;">
  #{$header</span>} {<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> $size</span>;
  }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
@while 指令重复输出嵌套样式，直到SassScript表达式返回结果
为false。这可用于实现比@for语句更复杂的循环
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$i: 6;
  @while $i > 0 </span>{<span style="color: #ff0000;">
  .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
      $i: $i - 2;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
*
*混入指令
*
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
混入(mixin)允许定义可以在整个样式表中重复使用的样式，
而避免了使用无语意的类（class），比如 .float-left。
混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass
文档中被允许使用的东西。他们甚至可以带arguments，引入变
量，只需少量的混入(mixin)代码就能输出多样化的样式。
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">1、定义一个混入(mixin):@mixin</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin large-text </span>{<span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> {
    family: Arial</span>;<span style="color: #ff0000;">
    size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    weight</span>:<span style="color: #0000ff;"> bold</span>;
  }<span style="color: #800000;">
  color: #ff0000;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">2、引入混合样式：@include</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.page-title </span>{<span style="color: #ff0000;">
  @include large-text;
  padding</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
混入（mixin）也可以包含在任何规则的外（即，在文档的根）,
只要它们不直接定义的任何属性或使用任何父选择器引用
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin silly-links </span>{<span style="color: #ff0000;">
  a {
    color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;
  }<span style="color: #800000;">
}
@include silly-links;
</span><span style="color: #008000;">/*</span><span style="color: #008000;">带参数</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin sexy-border($color, $width: 1in) </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> {
    color: $color</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
    style</span>:<span style="color: #0000ff;"> dashed</span>;
  }<span style="color: #800000;">
}
p </span>{<span style="color: #ff0000;"> @include sexy-border(blue); </span>}<span style="color: #800000;">
h1 </span>{<span style="color: #ff0000;"> @include sexy-border(blue, 2in); </span>}

Das Folgende ist ein Beispiel für die Erstellung eines Schaltflächenstils:

<span style="color: #800000;">.button-narmol</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #FFFFFF</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
    -webkit-tap-highlight-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0)</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;">pointer</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">after{
        content: " "</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 200%</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 200%</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.2)</span>;<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(0.5)</span>;<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> scale(0.5)</span>;<span style="color: #ff0000;">
        -webkit-transform-origin</span>:<span style="color: #0000ff;"> 0 0</span>;<span style="color: #ff0000;">
        transform-origin</span>:<span style="color: #0000ff;"> 0 0</span>;<span style="color: #ff0000;">
        box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
        border-radius</span>:<span style="color: #0000ff;"> 10px</span>;
    }<span style="color: #800000;">
}
@mixin button-style-block($select,$color,$darken)</span>{<span style="color: #ff0000;">
    #{$select</span>}{<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
        padding-left</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
        padding-right</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
        line-height</span>:<span style="color: #0000ff;"> 2.55555556</span>;<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> darken($color,$darken)</span>;<span style="color: #ff0000;">
        @extend .button-narmol;
        &</span>:<span style="color: #0000ff;">active{
            background-color: darken($color,$darken+10%)</span>;
        }<span style="color: #800000;">
    }
}
@mixin button-style-inline-block($select,$color,$darken)</span>{<span style="color: #ff0000;">
    #{$select</span>}{<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> darken($color,$darken)</span>;<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
        padding</span>:<span style="color: #0000ff;"> 0 1.32em</span>;<span style="color: #ff0000;">
        line-height</span>:<span style="color: #0000ff;"> 2.3</span>;<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> 13px</span>;<span style="color: #ff0000;">
        @extend .button-narmol;
        &</span>:<span style="color: #0000ff;">active{
            background-color: darken($color,$darken+10%)</span>;
        }<span style="color: #800000;">
    }
}
@include button-style-block(".krui-btn_primary",#1AAD19,10%);
@include button-style-block(".krui-btn_error",#E64340,0%);
@include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);</span>

Nenn es einfach in HTML.

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>button<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="css/button.css"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_error"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> 

Ich habe während der Arbeit heimlich viel Zeit damit verbracht, diesen Artikel zu schreiben. Bitte respektieren Sie außerdem die Originalität und geben Sie beim Nachdruck die Quelle an. -------Blog Garden.《》

sas chinesische Dokumentation: http://www.css88.com/doc/sass/