Beginnen Sie mit Sass in nur wenigen Worten-HTML-Tutorial-php.cn

Hintergrund:

Es ist das erste Mal, dass ich ein Unternehmensprojekt übernehme, aber das Wissen ist schon lange verstreut, weil ich nicht daran gearbeitet habe Ich werde es überprüfen und einige wichtige Punkte des gesunden Menschenverstandes aufschreiben. . Sass ist in Ruby geschrieben. Stellen Sie daher vor der Verwendung sicher, dass auf Ihrem Computer eine Ruby-Entwicklungsumgebung vorhanden ist. Verwenden Sie den Befehl ruby -v unter cmd, um die aktuelle Ruby-Version zu überprüfen.

Einführung und Überblick:

Sass ist ein Vorverarbeitungstool für CSS Wenn unser CSS-Code groß ist, kann es unsere Entwicklung vereinfachen und die nachfolgende Wartung erleichtern. Was ist ein Vorverarbeitungstool? Ein einfaches Verständnis ist die Arbeit, die vor der Generierung des echten CSS-Codes ausgeführt werden muss. Es enthält einige Hochsprachenfunktionen, um die Effizienz unseres CSS-Schreibens zu verbessern, und sass unterstützt auch css3.

Erinnern Sie sich an die Vorverarbeitung in C-Sprache? Es gibt viele Arten der Vorverarbeitung in der C-Sprache. Die am wenigsten bekannte davon ist die „Makrodefinition“. Die Funktion einer Makrodefinition besteht darin, eine voreingestellte Konstante zu definieren und diese Konstante dann zur Vorverarbeitung aller Teile des Codes zu verwenden, in denen diese Konstante enthalten ist Ersetzen Sie den eingestellten Wert, z. B. #define A 5, was bedeutet, dass alle im folgenden Code vorkommenden A direkt durch 5 ersetzt werden. Diese Aufgaben müssen ausgeführt werden, bevor der Code kompiliert wird, also Makrodefinition ist eine Art Vorverarbeitung.

Zurück zu unserem oben: Wir wissen, dass der CSS-Code in eine Datei mit dem Dateisuffix CSS geschrieben werden muss, bevor die Kompilierung und Analyse durchgeführt werden kann. Da Sass ein vorkompiliertes Tool ist, ist die Verwendung von Sass denkbar wird auf jeden Fall vorkommen. Es gibt zwei am häufigsten verwendete Schreibweisen: sass und scss. Ersteres folgt der Syntax von Sprachen Als Ruby und Python werden Leerzeichen als Teil der Sprachsyntax verwendet, und letzteres ist für die Mehrheit der Front-End-Enthusiasten geeignet. Es verwendet die gebräuchlichsten geschweiften Klammern in unserem CSS Der Code lautet wie folgt

<code>sass写法: 使用空格作为语法的一部分，本应该是一个空格的地方若出现两个空格则语法报错,且不需要分号结尾    
div     
 width:100px   
 height:100px

scss写法：一如我们写css一般
div{
    width:100px;   
    height:100px;
}   <br>
</code>

Nach dem Login kopieren

Es ist zu beachten, dass die beiden Syntaxen nicht in derselben Datei gemischt werden können, sondern mithilfe von Tools einander konvertiert werden können.

Allgemeine Tipps:

1. Verschachtelung von Klassennamen

<code>css代码：   
.div1 .div2{
    background-color:red;
}

sass代码：
.div1{
    .div2{
        background-color:red;
    }
}   
可以看到sass使类名的嵌套更加清晰，类名的权重也会一目了然    
</code>

Nach dem Login kopieren

2. Variablen

<code>使用$定义一个变量
$mainColor:red;

css写法：  
.div1 .div2{
    background-color:red;
}

sass写法：
 .div1{
    .div2{
        background-color:$mainColor;
    }
} 
更加方便维护和修改
</code>

Nach dem Login kopieren

3. Schreibmethode für Pseudoklassen/Pseudoelemente

<code>这个写法我当时猛的一看，确实不知道，还纳闷为什么这样用，后来一查资料，原来只是伪元素的写法而已   

css写法：   
.clearfix::before{
    content:"";
    ...
}

sass写法：
.clearfix{
    &:before{  //&称为父元素选择器，如果不加则代表选中.clearfix类下所有的元素
        content:"";
        ...
    }
}<br>
</code>

Nach dem Login kopieren

Ein kleiner Punkt, den es hier zu beachten gilt, ist der Unterschied zwischen Pseudoklassen und Pseudoelementen: Pseudoelemente sind ein Konzept, das nur in CSS3 vorkommt und durch zwei dargestellt wird: Pseudoklassen sollen bestimmte Effekte hinzufügen Selektoren und Pseudoelemente sollen bestimmte Spezialeffekte wie Link, Visited, Hover und Active hinzufügen. Sie müssen hier auf die Reihenfolge achten 4. Wenn zwei Pseudoklassen gleichzeitig angezeigt und verwendet werden sollen, muss ihre Schreibreihenfolge mit meiner übereinstimmen, sonst ist sie ungültig. Haben Sie schon einmal von LV Bag gehört? Geht es ihm gut? Äh! lvha. . Merken Sie sich einfach das ganze Wort mit dem Anfangsbuchstaben. Es erübrigt sich zu erwähnen, dass es häufig verwendete Pseudoelemente wie „nachher“, „vorher“, „erster Buchstabe“, „erste Zeile“ usw. gibt. Daher muss jeder zwei Punkte kennen: erstens, wann mehrere Semikolons geschrieben werden müssen, und zweitens, wann mehrere Pseudoelemente verwendet werden -Klassen gleichzeitig bestellen.

4. Vererbung zur Code-Wiederverwendung

Angesichts dessen muss jeder an den zweiten Punkt denken, der oben geschrieben wurde. Die Definition von Variablen dient der Wiederverwendung eines bestimmten Werts. Was sollten Sie tun, wenn Sie einen großen Codeabschnitt wiederverwenden möchten? Sie können die Vererbung nutzen, die wir jetzt vorstellen werden. Die Vererbung in Sass besteht aus zwei Schlüsselwortpaaren:

@mixin/@include und @extend>. Die Arbeitsprinzipien der beiden sind ebenfalls sehr unterschiedlich Kurze Einführung, und @extend stellt den aktuell definierten Klassenstil vor. Schüler, die mit der C-Sprache vertraut sind, wissen, dass include eine Art Makrodefinition in der C-Sprache ist. Dies kann hier als Synonym für Codekopie verstanden werden Mit dem Schlüsselwort wird der Code direkt in @mixin kopiert. Wenn @extend in einer bestimmten Klasse vorkommt, wird der aktuelle Klassenname dem zu vererbenden Klassennamen gegenübergestellt, was der Fall ist. Der Name von b wird in a angezeigt. und der endgültige Effekt ist .a, .b, das heißt, Klasse a und Klasse b haben alle dieses Attribut. Vererbung ist ein objektorientiertes Konzept. Das bedeutet, dass Sie es nicht mehr besitzen müssen, wenn es in Sass vorhanden ist Sass wird häufig für wiederholte Code-Referenzen verwendet. Er sagte, dass das Klicken auf das Suchfeld zu einer neuen Suchseite für die Suche führt Im Suchfeld auf der Startseite ist nur die Schriftfarbe unterschiedlich. Muss ich jetzt beide Teile des CSS neu schreiben? Der kluge Junge dachte daran, den ersten Teil zu übernehmen und die verschiedenen Teile neu zu schreiben.

Es gibt auch Schlüsselwörter wie „include“ in PHP. Frontend-Studenten können relevante Informationen zur Ergänzung ihres Wissens einsehen, wie z. B. den Unterschied zwischen „include“ und „require“ in PHP

<code>css代码:
.a{
    background-color:red
    ....
}
.b{
    //假设b也需要背景为红色等
    @extend .a;
    font-size:24px;
}<br>
</code>

Nach dem Login kopieren

5. Kommentare

sass中的注释有两种，一种是我们在css中使用的/**/，一种是//注释，前者在编码阶段和编译后的阶段都会被保留，而后者只存在于编码阶段，也就是给程序看的咯~

6.文件定义

sass中的文件定义也很简单，我们只需要知道一点就可以，以_开头的文件名不会被sass编译器编译成css文件，所以他有个见名知意的名字叫 局部文件 而以_下开头的文件中通常会被用作定义一些全部变量，如字体大小颜色等，至少我这个项目是这样做的，如_var.scss文件他的存在形式只会有一种，就是scss后缀结尾的文件，而aa.scss这样的文件，经过sass编译器就会被编译为css文件，我们知道浏览器的渲染引擎只认css文件。不过此刻问题又来了，那_var.scss该怎么使用呢？

7.sass中的import和css中import的区别

_var.scss文件既然不会被编译为css文件，那就意味着他没有办法被浏览器解析，上文也提到过通常使用他来声明一些变量，那么这些变量将怎么被主文件引用呢？这里我们依旧使用的是css中就有的一个关键字@import指令，只是sass中的对这个指令进行的了一定的增强，这里需要大家明确一点，在sass中 *_var和var代表同一个文件* ，所以当引入_var这个文件的时候，只需要写var即可，sass中使用@import引入sass文件的时候只需要写上文件名而不需要后缀，这点就和node中使用require引入一个模块是类似的，例如@import "var",这里大家可能会有疑问怎么使用这个指令来引入曾经的css文件，其实我们上边已经说过@import是sass对css中同名指令的增强，所以当sass判断到@import指令后面出现后缀名、url函数、http等关键字时就会认为你使用的是css中原生的@import指令。

关于css中@import的最佳实践，在性能优化方面并不提倡大家在css中经常使用@import指令，我们知道当浏览器引擎拿到一个网页文件的时候是先生成dom树，其次构建渲染树进行渲染，而@import是内嵌在css中的，也就是他会比link标签中的css代码晚一步执行，所以使用这个指令会造成页面的卡顿留白。

8.属性的连写拆分

在css中有个称之为属性连写的概念，如padding：5px，其实我们也可以分写成padding-left、padding-right等，可见这样分写冗余了一个padding关键字，那在sass中要怎样等价替换呢？

<code>css代码
.a{
    padding-left:2px;
    padding-right:2px;
}

sass代码
.a{
    padding{
        left:2px;
        right:2px;
    }
}
</code>

Nach dem Login kopieren

9.其他

以上知识sass中最为简单常用的一部分，也是作为一个刚入门的新手必然要掌握的一部分内容，关于sass的其他技巧如可以进行带单位的计算、@if、@at-root等指令如若需要大家可以查阅相关的资料加以补充。