Zusammenfassung des Wissens über SASS

Vorwort

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.

Datei importieren

@import-Befehl, der zum Importieren externer Dateien verwendet wird.

　@import "path/filename.scss";

Wenn die .css-Datei importiert wird, entspricht sie dem CSS-Importbefehl.

Kommentare

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.

1 Variablen

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 Variablen

Im 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 Variablen

Mehrwertige Variablen werden in Listentyp und

Map-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 Variable

Fü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 Verschachtelung

Es 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

Elementselektor darzustellen

Attributverschachtelung: Die sogenannte Attributverschachtelung bedeutet, dass einige Attribute die gleichen Startwörter haben wie

border-width und border-color beginnen alle mit border.

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

@at-root: Neue Funktion in sass3.3.0, die verwendet wird, um aus der Selektorverschachtelung auszubrechen.

3 Mixin

Verwenden Sie @mixin, um einen Mix zu deklarieren. Der Parametername beginnt mit dem $-Symbol. Sie können auch Standardwerte festlegen Werte für die Parameter. Das deklarierte @mixin ruft

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-Parametermischung

Wenn 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 }
}

** @mixin Der nach dem Aufruf von @include analysierte Stil liegt in Form einer Kopie vor, während der folgende

geerbte in Form einer gemeinsamen Deklaration vorliegt, also ab Version 3.2. Ab Version 0 wird empfohlen, beim Übergeben von Parametern @mixin zu verwenden, anstatt beim Übergeben von Parameterklassen das folgende Vererbungs-% zu verwenden. **

4 Vererbung

In Sass ermöglicht die Selektorvererbung einem Selektor, alle Stile eines anderen Selektors zu erben und sie gemeinsam zu deklarieren. Um die Selektorvererbung zu verwenden, verwenden Sie das Schlüsselwort @extend, gefolgt vom zu vererbenden Selektor.

Platzhalterauswahl%

从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外的代码片段，以后将会可以。

5 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

6 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。另外，要注意运算单位

7 条件判断及循环

@if判断

@if可一个条件单独使用，也可以和 @else 结合多条件使用

三目判断

if($condition, $if_true, $if_false)

for循环

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!