Eine kurze Analyse der grundlegenden Syntax von Scss und der Methode zum Importieren von SASS-Dateien

Dieser Artikel stellt hauptsächlich die grundlegendste Verwendung und Syntax vor. Es ist ersichtlich, dass die von Scss eingeführten Variablen und Verschachtelungen die Entwicklungsarbeit erheblich erleichtern. In Kombination mit den eigenen Interpolationsausdrücken ist das Schreiben im CSS-Stil sehr flexibel.

Einführung in die Sass-Syntax

Sass verfügt über zwei Syntaxformate: Sass (frühes eingerücktes Format: Indented Sass) und SCSS (Sassy CSS). haben das Suffix Wenn es in scss geändert wird, kann es direkt mit der Sassy CSS-Syntax geschrieben werden.

Sassy CSS语法编写。

所有有效的 CSS 也同样都是有效的 SCSS。

使用变量

sass使用$符号来标识变量。

变量的作用就是，让你在整个样式表中保存并重用一些信息或数据。

比如存储颜色(color)、字体集，或任何你想重用的CSS值。

1. 变量声明

和css属性的声明（property declaration）很像！

如，声明值为 #F90 的变量 $highlight-color，字体集变量：

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;
 
body {
    font: 100% $font-stack;
    color: $highlight-color;
}

输出结果为：

body {
    font: 100% Helvetica, sans-serif;
    color: #F90;
}

变量有作用域，当变量定义在css规则块内，则该变量只能在此规则块内使用。

2. 变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，就可以使用变量。

css生成时，变量会被它们的值所替代。

$color:#A34554;

.box {
  width: 300px;
  height: 400px;
  &-left{
    width: 30%;
    color: $color;
  }
}

生成css为：

.box {
    width: 300px;
    height: 400px;
}
.box-left{
    width: 30%;
    color: #A34554;
}

声明变量时，变量的值也可以引用其他变量，如下 $highlight-border 变量中使用了 $highlight-color 变量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

3. 变量名中的中横线(hyphen)和下划线(underscore)

sass的变量名可以使用中划线和下划线，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

也就是，变量名中的中横线和下划线没有区别，两者互通。

比如下面的示例，中横线的$link-color，可以通过下划线的$link_color引用。

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

相对，使用中横线更普遍些！

嵌套（<span style="font-size: 18px;">Nesting</span>）

css中重复写选择器是非常恼人的。尤其是嵌套的html元素样式，如：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

Scss的嵌套

Sass中，借助在规则块中嵌套子规则块，可以使重复选择器只写一遍，避免重复而且可读性更高。

比如上面的示例，借助scss嵌套：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。

父选择器的标识符&

通常，sass解析嵌套时，把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside），即生成后代选择器。

但是对于伪类:hover、对于多class名等情况，则不应该以"后代选择器"的方式连接，比如：

article a {
  color: blue;
  :hover { color: red }
}

默认生成的article a :hover会让article元素内a链接的所有子元素在被hover时都会变成红色，显然是不正确的（应该应用到a自身）。

为此sass提供了一种特殊的选择器：父选择器&。它可以更好的控制嵌套规则！

只要是选择器可以放置的地方，就都可以在嵌套中同样使用&。

article a {
  color: blue;
  &:hover { color: red }
}

展开时，&被父选择器直接替换：

article a { color: blue }
article a:hover { color: red }

通过&可以在嵌套块内，实现在父选择器之前添加选择器（非常灵活）。

如：

#content aside {
  color: red;
  body.ie & { color: green }
}

群组选择器嵌套

css中，使用,Alle gültigen CSS sind auch gültige SCSS.

Variablen verwenden

🎜🎜sass verwendet das Symbol $, um Variablen zu identifizieren. 🎜🎜Der Zweck von Variablen besteht darin, Ihnen das Speichern und Wiederverwenden einiger Informationen oder Daten im gesamten Stylesheet zu ermöglichen. 🎜🎜Zum Beispiel das Speichern von Farben, Schriftarten oder beliebigen CSS-Werten, die Sie wiederverwenden möchten. 🎜🎜🎜1. Die Variablendeklaration🎜🎜🎜 ist der CSS-Eigenschaftsdeklaration (Eigenschaftsdeklaration) sehr ähnlich! 🎜🎜Deklarieren Sie beispielsweise die Variable $highlight-color mit dem Wert #F90 und der Schriftartsatzvariablen: 🎜

h1, h2 {
  margin: 0;
}

🎜Das Ausgabeergebnis lautet: 🎜

.container h1, .container h2, .container h3 { margin-bottom: .8em }

🎜🎜 Die Variable hat einen Gültigkeitsbereich. Wenn eine Variable innerhalb eines CSS-Regelblocks definiert ist, kann die Variable nur innerhalb dieses Regelblocks verwendet werden. 🎜🎜🎜🎜2. Variablenreferenz🎜🎜🎜Variablen können überall dort verwendet werden, wo der Standardwert eines CSS-Attributs (z. B. 1px oder fett) vorhanden sein kann. 🎜🎜Bei der CSS-Generierung werden Variablen durch ihre Werte ersetzt. 🎜

.container{
  h1,h2,h3{
    margin-bottom:.8em;
  }
}

🎜Das generierte CSS lautet: 🎜

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

🎜Bei der Deklaration einer Variablen kann sich der Wert der Variablen auch auf andere Variablen beziehen, wie unten gezeigt. $highlight-border verwendet $highlight-color in den Variablenvariablen: 🎜

/* 子组合选择器> */
article > section { border: 1px solid #ccc }

/* 相邻组合选择器+  选择 元素后紧跟的指定元素 */
header + p { font-size: 1.1em }

/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */
article ~ article { border-top: 1px dashed #ccc }

🎜🎜3. Der Bindestrich (hyphen) und der Unterstrich (underscore) im Variablennamen können in Sass-Variablennamen verwendet werden . Mit einem Unterstrich deklarierte Variablen können mit einem Unterstrich referenziert werden und umgekehrt. 🎜🎜Das heißt, es gibt keinen Unterschied zwischen dem Bindestrich und dem Unterstrich im Variablennamen und sie sind interoperabel. 🎜🎜Im folgenden Beispiel kann beispielsweise der gestrichelte $link-color durch den unterstrichenen $link_color referenziert werden. 🎜

article {
  /* 放在 里层选择器前边 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外层选择器后边 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

🎜Im Gegensatz dazu ist es üblicher, horizontale Linien zu verwenden! 🎜

🎜🎜Nesting (<span style="font-size: 18px;">Nesting</span> code >)🎜🎜🎜Es ist sehr ärgerlich, Selektoren wiederholt in CSS zu schreiben. Insbesondere die verschachtelten HTML-Elementstile, wie zum Beispiel: 🎜

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

🎜🎜Scss-Verschachtelung🎜🎜🎜In Sass mithilfe der Verschachtelung von Untertiteln im Regelblock Rule Mit dem Block können wiederholte Selektoren nur einmal geschrieben werden, wodurch Duplikate vermieden und die Lesbarkeit verbessert werden. 🎜🎜Zum Beispiel im obigen Beispiel mit Hilfe der SCSS-Verschachtelung: 🎜

nav {
  border: {
     style: solid;
     width: 1px;
     color: #ccc;
  }
}

🎜Die Regeln zum Öffnen (Parsen) der SCSS-Verschachtelung lauten: 🎜Öffnen Sie von der äußeren Ebene zur inneren Ebene den verschachtelten Regelblock und platzieren Sie ihn Der Selektor des übergeordneten Elements auf dem untergeordneten Element bildet einen neuen Selektor im vorderen Teil der Auswahl, und dann wird die Verarbeitung des inneren verschachtelten Blocks in einer Schleife geöffnet. 🎜🎜🎜🎜Die Kennung des übergeordneten Selektors&🎜🎜🎜Wenn Sass die Verschachtelung analysiert, wird normalerweise der übergeordnete Selektor (#content ) wird mit der Vorderseite des Unterselektors (article und aside) durch ein Leerzeichen verbunden, um (#content Article und ) zu bilden # Inhalt beiseite), der Nachkommenselektoren generiert. 🎜🎜Aber für Pseudoklassen :hover, für mehrere Klassennamen usw. sollten sie nicht durch einen „Nachkommenselektor“ verbunden werden, wie zum Beispiel: 🎜

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

🎜Der standardmäßig generierte Artikel a : hover führt dazu, dass alle untergeordneten Elemente des a-Links innerhalb des Artikelelements rot werden, wenn man mit der Maus darüber fährt, was offensichtlich falsch ist (sollte auf a selbst angewendet werden). 🎜🎜Sass stellt hierfür einen speziellen Selektor zur Verfügung: Parent Selector &. Es gibt Ihnen eine bessere Kontrolle über verschachtelte Regeln! 🎜

🎜Solange der Selektor platziert werden kann, können Sie bei der Verschachtelung auch & verwenden. 🎜

nav {
  border: 1px solid #ccc {
    /* 单独设置的 子属性 */
     left: 0px;
     right: 0px;
  }
}

/* 生成后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

🎜Beim Erweitern wird & direkt durch den übergeordneten Selektor ersetzt: 🎜

$bWidth:5px;
$style:"blue";

.nav {
    border: #{$bWidth} solid #ccc;
    &.nav-#{$style} {
        color: #{$style};
    }
}


// 编译为：
.nav {
  border: 5px solid #ccc;
}
.nav.nav-blue {
  color: blue;
}

🎜Die Verwendung von & kann vor dem übergeordneten Selektor in einem verschachtelten Block hinzugefügt werden Selektoren (sehr flexibel). 🎜🎜Zum Beispiel: 🎜

$value:grayscale(50%);
$property:filter;

.nav{
   #{$property}: $value;
}

// 编译为：
.nav {
   filter: grayscale(50%);
}

🎜🎜Verschachtelung von Gruppenselektoren🎜🎜🎜Verwenden Sie in CSS , , um Gruppen zu trennen. Selektoren können angewendet werden Stile auf mehrere Selektoren gleichzeitig anwenden, wie zum Beispiel: 🎜

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", " ");

🎜 Wenn Sie jedoch einen Gruppenselektor auf mehrere Elemente innerhalb eines bestimmten Containerelements anwenden möchten, ist eine Menge sich wiederholender Arbeit erforderlich. 🎜

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: " ";
}

🎜Allerdings kombiniert die verschachtelte Funktion von Sass jeden eingebetteten Selektor korrekt, wenn die Bindung eines eingebetteten Gruppenselektors aufgehoben wird: 🎜

.container{
  h1,h2,h3{
    margin-bottom:.8em;
  }
}

sass会组合成 .container h1、 .container h2、.container h3 三者的群组选择器：.container h1, .container h2, .container h3{ xxx }。

同样，群组选择器内的嵌套也会以这种方式解析：

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

子组合选择器和同层组合选择器：>、+和~

这三种选择器必须和其他选择器配合使用。

/* 子组合选择器> */
article > section { border: 1px solid #ccc }

/* 相邻组合选择器+  选择 元素后紧跟的指定元素 */
header + p { font-size: 1.1em }

/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */
article ~ article { border-top: 1px dashed #ccc }

在sass中使用时，可以通过嵌套直接生成正确的结果（位于外层选择器的后面，或内层选择器的前面均可！），而不需要使用&。

article {
  /* 放在 里层选择器前边 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外层选择器后边 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

解开后的css为：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

最后一句，nav + & 使用父选择器&后，原本默认的嵌套规则不再适用，而是直接应用 & 组合的结果。

属性嵌套

sass中，属性也可以进行嵌套！

把属性名从中划线-的地方断开，在该属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。这样就可以实现属性的嵌套。

nav {
  border: {
     style: solid;
     width: 1px;
     color: #ccc;
  }
}

编译生成如下：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

结合属性的缩写形式，可以实现在嵌套属性中指明需要额外样式的特殊子属性。

nav {
  border: 1px solid #ccc {
    /* 单独设置的 子属性 */
     left: 0px;
     right: 0px;
  }
}

/* 生成后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

插值（<span style="font-size: 18px;">Interpolation</span>）

类似 es6 中的插值表达式，Sass也提供了插值计算的方式。

插值几乎可以用在任何地方，作为一个 SassScript 表达式的嵌入结果。

Sass的插值写法为：#{$variable_name}。

利用插值动态生成选择器、属性名和值

可以使用插值获取变量或函数调用到一个选择器、或属性值。

比如：

$bWidth:5px;
$style:"blue";

.nav {
    border: #{$bWidth} solid #ccc;
    &.nav-#{$style} {
        color: #{$style};
    }
}


// 编译为：
.nav {
  border: 5px solid #ccc;
}
.nav.nav-blue {
  color: blue;
}

属性名使用插值变量

使用插值的一个好处是，可以直接将变量值作为属性名使用。

如下，通过插值，属性名直接用变量来替代，这样就可以动态生成属性。

不使用插值，直接在属性的位置使用变量$property，将会被处理为对变量的赋值！

$value:grayscale(50%);
$property:filter;

.nav{
   #{$property}: $value;
}

// 编译为：
.nav {
   filter: grayscale(50%);
}

在 @mixin 中使用插值

@mixin 混合器将在下一节介绍。

插值在写mixin时非常有用，比如下面通过传递的参数创建选择器（来自官网）：

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", " ");

编译后的CSS为：

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: " ";
}

css的特殊函数（<span style="font-size: 18px;">Special Functions</span>【仅作了解】）

CSS中的许多函数都可以在Sass中正常使用，但也有一些特殊的函数有所不同。

所有的特殊函数，调用都返回不带引号的字符串。

url()

url() 函数在CSS中很常见，但是它的参数可以是带引号或不带引号的URL。

不带引号的URL在 Sass 中是无效的，所以需要特殊逻辑进行解析。

如下是url()的示例，如果url()的参数是有效的不带引号URL，Sass会原样解析它，并且不带引号时也可以使用插值表达式；如果不是有效的不带符号URL，将会解析其中的变量或函数，并转换为普通的CSS函数调用。

$roboto-font-path: "../fonts/roboto";

@font-face {
    // 引号中作为一个正常的函数调用解析
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // 使用数学表达式，解析为普通的函数调用
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // 作为一个插值表达式特殊处理
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}

calc(), clamp(), element()

算数表达式 calc() 和 Sass 的冲突；element() 的参数可以color。

使用它们时，Sass除了处理插值，其他都会保持原样解析！

min() 和 max()

Sass早于CSS支持使用 min() 和 max()，为了兼容所以需要特殊处理。

如果 min() 和 max() 函数调用的是普通CSS，则会被编译为CSS的  min() 和 max()。

普通CSS（Plain CSS）包含嵌套调用 calc(), env(), var(), min(), max() 以及 插值。

但是，只要包含 SassScript 的特性，比如 Sass的变量、函数调用，min() 和 max() 就会被作为 Sass 的函数处理。

$padding: 12px;

.post {
  // max()没有使用插值以外的Sass特性, 所以将会被编译为 CSS 的 max().
  padding-left: max(#{$padding}, env(safe-area-inset-left));
  padding-right: max(#{$padding}, env(safe-area-inset-right));
}

.sidebar {
  // 应为没有通过插值使用sass变量，此处会调用Sass内置的 max()
  padding-left: max($padding, 20px);
  padding-right: max($padding, 20px);
}

注释

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，以//开头，直到行末结束。

在生成的css中，静默注释将会被抹除，这样，可以按需抹除一些注释，而不需要全部显示给其他人。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

当标准注释 /* ... */ 出现在原生css不允许的地方时，也会在编译后的css中被抹去。

多行注释 /* ... */ 在 compressed 模式下会被移除，但是如果以 /*! 开头，则仍会包含在生成的 CSS 中。

导入SASS文件

使用@import可以导入另外的sass文件（在生成css文件时会把相关文件导入进来）。在被导入文件中定义的变量和混合器maxin等均可在导入文件中使用。

css中的@import导入其他css文件很不常用，因为它是在执行到@import规则时才会加载其他的css文件，这会导致页面加载变慢、样式的错乱和延迟等问题。

注：Sass官方目前已经开始打算用 @use 替代 @import 规则，因此鼓励使用 @use。但是，目前只有 Dart Sass 支持 @use，因此，现阶段主要还是使用 @import。

scss导入sidebar.scss文件，可以使用如下规则：

@import "sidebar";

@import "sidebar.scss";

sass局部文件（或分部文件，<span style="font-size: 18px;">partial file</span>）

有的sass文件是专门用于被@import命令导入的，而不需要单独生成css文件，这样的文件称为局部文件。

sass的约定是：sass局部文件的文件名以下划线 _ 开头，sass在编译时就不会将这个文件编译输出为css。

在 @import 局部文件时，可以省略文件开头的下划线和.scss后缀，不需要写文件的全名。

局部文件可以被多个不同的文件引入。对于需要在多个页面甚至多个项目中使用的样式，非常有用。

默认变量值

通常情况下，在反复多次声明一个变量时，只有最后一个声明有效（即使用最后一个声明赋予的值）。

sass通过!default标签可以实现定义一个默认值（类似css的!important标签对立），!default表示如果变量被声明赋值了则用新声明的值，否则用默认值。

比如一个局部文件中：

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

如果用户在导入该sass局部文件之前，声明了一个 $fancybox-width 变量，那么局部文件中对 $fancybox-width 赋值400px的操作就无效。如果用户没有做这样的声明，则 $fancybox-width 将默认为400px。

也就是，在后面使用 !default 声明的变量，并不会覆盖其前面声明赋值的相同变量值。

嵌套导入

sass可以在嵌套规则块的内部使用@import导入局部文件【局部文件会被直接插入到css规则内导入它的地方】。

如局部文件_blue-theme.sass内容为：

aside {
  background: blue;
  color: white;
}

将它导入到一个CSS规则内：

.blue-theme {@import "blue-theme"}

生成的结果跟你直接在 .blue-theme 选择器内写 _blue-theme.scss 文件中的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

原生的CSS导入的支持

sass中支持原生css的导入，会生成原生的scc @import(在浏览器解析css时再下载并解析)。

sass中@import生成原生css导入的条件是：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css%EF%BC%89
• 被导入文件的名字是CSS的url()值。

如果想将原始的css文件，当做sass导入，可以直接修改.css后缀为.scss（sass语法完全兼容css）。

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der grundlegenden Syntax von Scss und der Methode zum Importieren von SASS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!