Une brève analyse de la syntaxe de base de Scss et de la méthode d'importation de fichiers SASS

Cet article présente principalement l'utilisation et la syntaxe les plus basiques.On voit que les variables et l'imbrication introduites par Scss facilitent grandement le travail de développement. Combinées à ses propres expressions d'interpolation, l'écriture de style CSS est très flexible !

Introduction à la syntaxe Sass

sass a deux formats de syntaxe Sass (format indenté précoce : Indented Sass) et SCSS (Sassy CSS)

Le plus couramment utilisé à l'heure actuelle est SCSS, et tout fichier CSS sera avoir le suffixe S'il est modifié en scss, il peut être écrit directement en utilisant la syntaxe Sassy CSS. 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中，使用,

Tous les CSS valides sont également des SCSS valides.

🎜Utilisation de variables🎜🎜🎜sass utilise le symbole $ pour identifier les variables. 🎜🎜Le but des variables est de vous permettre de sauvegarder et de réutiliser certaines informations ou données tout au long de la feuille de style. 🎜🎜Comme le stockage de couleurs, de jeux de polices ou de toute valeur CSS que vous souhaitez réutiliser. 🎜🎜🎜1. La déclaration de variable🎜🎜🎜 est très similaire à la déclaration de propriété CSS (déclaration de propriété) ! 🎜🎜Par exemple, déclarez la variable $highlight-color avec la valeur #F90 et la variable de jeu de polices : 🎜

h1, h2 {
  margin: 0;
}

🎜Le résultat de sortie est : 🎜

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

🎜🎜 La variable a une portée. Lorsqu'une variable est définie dans un bloc de règles CSS, la variable ne peut être utilisée que dans ce bloc de règles. 🎜🎜🎜🎜2. Référence de variable🎜🎜🎜Les variables peuvent être utilisées partout où la valeur standard d'un attribut CSS (comme 1px ou gras) peut exister. 🎜🎜Lorsque le CSS est généré, les variables seront remplacées par leurs valeurs. 🎜

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

🎜Le CSS généré est : 🎜

nav, aside {
  a {color: blue}
}

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

🎜Lors de la déclaration d'une variable, la valeur de la variable peut également faire référence à d'autres variables, comme indiqué ci-dessous. $highlight-border utilise $highlight-color dans la variable Variables : 🎜

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

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

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

🎜🎜3. Le trait d'union (hyphen) et le trait de soulignement (underscore) dans le nom de la variable peuvent être utilisés dans les noms de variables sass. . Tiret de soulignement, les variables déclarées avec un trait de soulignement peuvent être référencées avec un trait de soulignement, et vice versa. 🎜🎜C'est-à-dire qu'il n'y a aucune différence entre le tiret et le trait de soulignement dans le nom de la variable, et ils sont interopérables. 🎜🎜Par exemple, dans l'exemple ci-dessous, le $link-color en pointillés peut être référencé par le $link_color souligné. 🎜

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

🎜En revanche, il est plus courant d'utiliser des lignes horizontales ! 🎜

🎜🎜Nesting (<span style="font-size: 18px;">Nesting</span> code >)🎜🎜🎜Il est très ennuyeux d'écrire des sélecteurs à plusieurs reprises en CSS. Styles d'éléments HTML particulièrement imbriqués, tels que : 🎜

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 }

🎜🎜Imbrication Scss🎜🎜🎜Dans Sass, à l'aide d'imbrications de sous-titres dans des blocs de règles, le bloc de règles permet les sélecteurs répétés doivent être écrits une seule fois, évitant ainsi la duplication et le rendant plus lisible. 🎜🎜Par exemple, dans l'exemple ci-dessus, à l'aide de l'imbrication scss : 🎜

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

🎜Les règles d'ouverture (analyse) de l'imbrication scss sont : 🎜De la couche externe à la couche interne, ouvrez le bloc de règles imbriqué et placez le sélecteur parent sur l'enfant La partie avant de la sélection forme un nouveau sélecteur, puis le traitement des blocs imbriqués internes est ouvert en boucle. 🎜🎜🎜🎜L'identifiant du sélecteur parent&🎜🎜🎜Habituellement, lorsque sass analyse l'imbrication, le sélecteur parent (#content ) est relié au devant du sous-sélecteur (article et aside) par un espace pour former (#content article et # content apart), qui génère des sélecteurs descendants. 🎜🎜Mais pour les pseudo-classes :hover, pour les noms de classes multiples, etc., ils ne doivent pas être connectés par un "sélecteur descendant", tel que : 🎜

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

🎜L'article généré par défaut a : hover fera que tous les éléments enfants du lien a dans l'élément article deviendront rouges lorsqu'ils seront survolés, ce qui est évidemment incorrect (doit être appliqué à a lui-même). 🎜🎜Sass fournit un sélecteur spécial pour cela : le sélecteur parent &. Cela vous donne un meilleur contrôle sur les règles imbriquées ! 🎜

🎜Tant que le sélecteur peut être placé, vous pouvez également utiliser & dans l'imbrication. 🎜

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

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

🎜Une fois développé, & est directement remplacé par le sélecteur parent : 🎜

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

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


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

🎜& peut être implémenté dans un bloc imbriqué avant le sélecteur parent Ajouter des sélecteurs (très souple). 🎜🎜Par exemple : 🎜

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

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

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

🎜🎜Imbrication du sélecteur de groupe🎜🎜🎜Css, utilisez , pour séparer les groupes. Les sélecteurs peuvent appliquer des styles à plusieurs sélecteurs en même temps, tels que : 🎜

@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", " ");

🎜 Cependant, si vous souhaitez appliquer un sélecteur de groupe à plusieurs éléments au sein d'un élément conteneur spécifique, il y aura beaucoup de travail répétitif. 🎜

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

🎜Cependant, la fonctionnalité imbriquée de sass, lors du déballage d'un sélecteur de groupe intégré, combinera correctement chaque sélecteur intégré : 🎜

.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）。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!