SASS ist ein CSS-Präprozessor. Die Grundidee besteht darin, eine spezielle Programmiersprache zum Entwerfen von Webseitenstilen zu verwenden und diese dann in eine normale CSS-Datei zu kompilieren.
SASS bietet vier Kompilierungsstiloptionen:
nested: verschachtelter eingerückter CSS-Code, der Standardwert.
expanded: Nicht eingerückter, erweiterter CSS-Code.
kompakt: CSS-Code in einem prägnanten Format.
compressed: komprimierter CSS-Code.
@import-Befehl, der zum Importieren externer Dateien verwendet wird.
@import "path/filename.scss";
Wenn die .css-Datei importiert wird, entspricht sie dem CSS-Importbefehl.
Sass verfügt über zwei Kommentarmethoden, eine ist die Standard-CSS-Kommentarmethode /* */ und die andere ist //doppelter Schrägstrich in Form von einzeiligen Kommentaren , aber solche einzeiligen Kommentare werden nicht übersetzt.
SASS erlaubt die Verwendung von Variablen, alle Variablen beginnen mit $
Gewöhnliche Variablen
können in definiert werden der globale Geltungsbereich Für den internen Gebrauch.
Standardvariable
Die Standardvariable von sass muss nur mit !default nach dem Wert hinzugefügt werden.
Die Standardvariablen von Sass werden im Allgemeinen verwendet, um Standardwerte festzulegen und diese dann entsprechend den Anforderungen zu überschreiben. Sie müssen lediglich die Variable vor der Standardvariablen
Der Wert von Standardvariablen kann bei der Komponentenentwicklung sehr nützlich sein. Spezielle VariablenIm Allgemeinen sind die von uns definierten Variablen Attributwerte und können direkt verwendet werden. Wenn die Variable jedoch als Attribut oder unter besonderen Umständen verwendet wird, muss dies der Fall sein Zu verwendendes Formular #{$variables}. Mehrwertige VariablenMehrwertige Variablen werden in Listentyp undMap-Typ unterteilt. Einfach ausgedrückt ähnelt der Listentyp ein wenig dem in js >Array, und der Kartentyp ist ein bisschen wie das Objekt in js
globale VariableFügen Sie !global nach dem hinzu Der Variablenwert wird zu einer globalen Variablen. Dies ist noch nicht verfügbar, wird aber offiziell in Versionen nach Sass 3.4 verwendet. Der aktuelle Sass--Variablenbereich wurde kritisiert, daher wurde diese globale Variable erstellt.
2 VerschachtelungEs gibt zwei Arten der Verschachtelung in sass: eine ist die Verschachtelung von Selektoren, die andere ist die Verschachtelung von Attributen. Worüber wir normalerweise sprechen oder was wir verwenden, ist die Verschachtelung von Selektoren. Bei der Selektorverschachtelung können Sie & verwenden, um den übergeordneten Attributverschachtelung: Die sogenannte Attributverschachtelung bedeutet, dass einige Attribute die gleichen Startwörter haben wieborder-width und border-color beginnen alle mit border.
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}mehrere Parameter über @include
auf. Beim Aufruf von mixin können Sie beispielsweise die Anzahl der übergebenen Parameter direkt übergeben von @include ist kleiner als @ Die Anzahl der durch das Mixin definierten Parameter wird in der Reihenfolge ausgedrückt, wenn nicht genügend Parameter vorhanden sind und kein Standardwert vorhanden ist gemeldet. Darüber hinaus können Sie Parameter auch selektiv übergeben, indem Sie Parameternamen und -werte gleichzeitig übergeben. Mehrwert-ParametermischungWenn ein Parameter mehrere Wertesätze haben kann, z. B. Box-Shadow, Übergang usw., muss der Parameter durch Hinzufügen von drei Punkten nach dem dargestellt werden Variable, wie zum Beispiel $variables ....@content
@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。
//sass style
//-------------------------------
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
//-------------------------------
@media only screen and (max-width: 480px) {
body { color: red }
}从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过 @extend 调用。
占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1{
width:300px;
}在 @media 中暂时不能 @extend @media外的代码片段，以后将会可以。
sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。另外，要注意运算单位
@if判断
@if可一个条件单独使用，也可以和 @else 结合多条件使用
三目判断
if($condition, $if_true, $if_false)
for循环有两种形式，分别为：@for $var from
@each循环
语法为：@each $var in
多个字段list数据循环
//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
//css style
//-------------------------------
.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;
}Das obige ist der detaillierte Inhalt vonZusammenfassung des Wissens über SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
