Inhaltsverzeichnis
Warum CSS-Präprozessor einführen?
Verschachtelung: klare Beziehung
Standardvariable: Dollarzeichen $ Variablenname: Wert !default
Globale Variablen: :global { $global-x: }
Schlüssel-Wert-Paar zuordnen: $Variablenname: (Schlüssel: Wert,...)
Gemischte Makros mit Parametern
Mit speziellem Multiparameter-Hybridmakro
Rufen Sie das Mixin-Makro @include auf
@extend erben: Wiederverwendungsrate verbessern
Platzhalter%Platzhalter: Vererbbarer Stil, der keinen Code generiert
Mixins, Vererbung, Platzhalter
Sass kümmert sich serverseitig darum
Less verwendet Less.js auf der Clientseite
@if, @else if, @else Bedingung
@import stellt SCSS und Sass vor
Warum CSS-Präprozessor einführen?
Verbessern Sie die Lesbarkeit und Wartbarkeit von CSS-Code
Lesbarkeit
Verschachtelung: klare Beziehung
Wähler
#css
nav a {
color:red;
}
header nav a {
color:green;
}#scss
nav {
a {
color: red;
header & {
color:green;
}
}
}Attribute
#css
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}#scss
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}„Pseudoklasse“
.clearfix{
&:after {
clear:both;
overflow: hidden;
}
}Variablen: klare Semantik
Standardvariable: Dollarzeichen $ Variablenname: Wert !default
$link-color: #3498db !default;
a {
color: $link-color; // 如果未定义 $link-color，则使用默认值 #3498db
}
Globale Variablen: :global { $global-x: }
:global {
$global-padding: 10px;
}
.box {
padding: $global-padding;
}
Variableninterpolation: #{}
$theme: light;
body {
background-color: #{$theme}-background; // 将变量插入到字符串中
}
Schlüssel-Wert-Paar zuordnen: $Variablenname: (Schlüssel: Wert,...)
$colors: (
primary: #3498db,
secondary: #2ecc71,
accent: #e74c3c
);
.box {
background-color: map-get($colors, primary);
}
Wartbarkeit
Mixin-Anweisungen/gemischte Anweisungen/Makroanweisungen @mixin: Die Übergabe von Funktionsparametern verbessert die Wiederverwendungsrate von Stilen
Dies entspricht dem Schreiben einer Reihe von Stilen im Voraus und der Übergabe von Parametern/direkten Referenzen an anderen Stellen.
In Vue wird dies als Mix-In-Anweisung bezeichnet, mit der Sie Parameter festlegen und wiederholte Codeblöcke wiederverwenden können.
Es werden jedoch redundante Codeblöcke generiert . Wenn beispielsweise dasselbe Hybridmakro an verschiedenen Stellen aufgerufen wird, können die beiden Zusammensetzungen nicht zu einer Vereinigungsform zusammengefasst werden .
Mixin-Makro ohne Parameter
@mixin border-radius{
border-radius: 5px;
}Gemischte Makros mit Parametern
# 带值参数
@mixin border-radius($radius){
border-radius: $radius;
}
# 带默认值参数
@mixin border-radius($radius:5px){
border-radius: $radius;
}
Mit speziellem Multiparameter-Hybridmakro
Wenn vom gemischten Makro zu viele Parameter übergeben werden, können Sie stattdessen „…“ verwenden
# 带多个参数
@mixin center($width,$height){
width: $width;
height: $height;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
# 带特别多参数
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}Rufen Sie das Mixin-Makro auf@include
Schlüsselwort „ @include“ zum Aufrufen des deklarierten gemischten Makros
button {
@include border-radius;
}
.box {
@include border-radius(3px);
}
.box-center {
@include center(500px,300px);
}
.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}@extend erben: Wiederverwendungsrate verbessern
Die Unterklasse erbt die übergeordnete Klasse und ihre Unterklassen
.one{
color: #000;
}
.one a{
font-size: 10px;
}
.two{
@extend .one;
background-color: #fff;
}
Das kompilierte CSS führt die Selektoren zusammen, um einen kombinierten Selektor zu bilden .
.one, .two {
color: #000;
}
.one a, .two a {
font-size: 10px;
}
.two {
background-color: #fff;
}
Platzhalter%Platzhalter: Vererbbarer Stil, der keinen Code generiert
%Der deklarierte Code generiert keinen Code, wenn er nicht von @extend aufgerufen wird
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
.block {
@extend %mt5;
}Durch die Platzhalter namens @extend führt der kompilierte Code denselben Code zusammen.
.btn, .block {
margin-top: 5px;
}Mixins, Vererbung, Platzhalter
Wann gilt es nicht?
Je intuitiver , desto besser. Versuchen Sie , Operationstypen ( insbesondere Karten ) nicht in tatsächlichen Projekten zu verwenden , da die nachfolgenden Wartungskosten sehr hoch sind.
sass=scss
Normalerweise Sass genannt,
Suffix-Erweiterung
- Sass: „.sass“,
- SCSS: „.scss“
Grammatik-Schreibstil
- Sass ist mit strengen Regeln für die Einrückungssyntax geschrieben, ohne geschweifte Klammern ({}) und Semikolons (;) .
- Die Syntax von SCSS ist unserer CSS- Syntax sehr ähnlich.
sass und weniger
kompilieren
Sass kümmert sich serverseitig darum
Less verwendet Less.js auf der Clientseite
Grammatik
Interpolation#{}
(1) Erstellen Sie einen Selektor
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);(2) Attributvariablen
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}Die Interpolation in @mixin kann nicht als Wertteil der Zuweisungsanweisung verwendet werden. Sie kann nur zur Definition des Attributnamens oder beim Erstellen eines Selektors verwendet werden. Die Interpolation kann in @include nicht verwendet werden.
Kommentar
1. Eine CSS-ähnliche Kommentarmethode, die mit „/*“ beginnt und mit „*/“ endet.
2. Verwenden Sie ähnlich wie bei der JS-Kommentarmethode „//“. Der Unterschied zwischen den beiden ist:
Ersteres wird im kompilierten CSS angezeigt .后者在编译出来的 CSS 中不会显示
加减乘除连带单位一起计算
Addition und Subtraktion
Additionsoperationen können in Variablen oder Attributen ausgeführt werden, aber wenn unterschiedliche Einheitentypen übertragen werden , wird bei der Berechnung in Sass ein Fehler gemeldet.
.content {
width: $full-width - $sidebar-width;
}String-Verkettung
div {
cursor: e + -resize;
}
编译后
div {cursor: e-resize;}Multiplikation
当一个单位同时声明两个值时会有问题 只能有一个值带单位(wie em,px,%)
# 编译的时候报“20px*px isn't a valid CSS value.”错误信息。
.box {
width:10px * 2px;
}
# 正确的写法
.box {
width: 10px * 2;
}
Aufteilung
Wenn der Wert oder ein Teil davon in einer Variablen gespeichert ist oder der Rückgabewert einer Funktion ist.
• Wenn der Wert in Klammern steht .
• Wenn der Wert Teil eines anderen mathematischen Ausdrucks ist
Wenn während der Division zwei Werte denselben Einheitswert haben, wird nach der Divisionsoperation ein Wert ohne Einheit erhalten.
.box {
width: (1000px / 100px);
}
编译后
.box {
width: 10;
}@if, @else if , @elseBedingung
@mixin blockOrHidden($boolean:true) {
@if $boolean {
display: block;
}
@else {
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}
@für
@for $i from <start> through <end>
@for $i from <start> to <end>Das Schlüsselwort throughbedeutet „inklusive end“ , aber nicht „inklusive end“. to
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}@while-Schleife
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}@jede Schleife
@each Bei einer Schleife wird eine Liste durchlaufen und dann der entsprechende Wert aus der Liste entfernt
@each $var in <list>
$list: adam john wynn mason kuroir;
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}@import stellt SCSS und Sass vor
Sass erweitert die CSS-@import-Regel, um den Import von SCSS- und Sass-Dateien zu ermöglichen. Alle importierten SCSS- und Sass-Dateien werden zusammengeführt und in einer einzigen ausgegeben
Einführung in die Grundlagen der Sass-Zusammenfassungsnotizen (super intuitive Details) – Nuggets