Analisis ringkas tentang sintaks asas Scss dan kaedah mengimport fail SASS

Artikel ini terutamanya memperkenalkan penggunaan dan sintaks yang paling asas Ia dapat dilihat bahawa pembolehubah dan sarang yang diperkenalkan oleh Scss sangat memudahkan kerja pembangunan Digabungkan dengan ekspresi interpolasinya sendiri, penulisan gaya CSS sangat fleksibel.

Pengenalan kepada sintaks Sass

Sass mempunyai dua format sintaks Sass (format inden awal: Sass Inden) dan SCSS (CSS Sassy)

Pada masa ini yang paling biasa digunakan ialah SCSS mana-mana fail css dengan akhiran ditukar kepada scss boleh ditulis terus menggunakan sintaks Sassy CSS.

Semua CSS yang sah juga adalah SCSS yang sah.

Menggunakan pembolehubah

Sass menggunakan simbol $ untuk mengenal pasti pembolehubah. Tujuan pembolehubah

adalah untuk membolehkan anda menyimpan dan menggunakan semula beberapa maklumat atau data sepanjang helaian gaya.

Seperti menyimpan warna, set fon atau sebarang nilai CSS yang anda mahu gunakan semula.

1. Pengisytiharan pembolehubah

sangat serupa dengan pengisytiharan atribut css (property declaration)!

Sebagai contoh, isytiharkan pembolehubah #F90 dengan nilai $highlight-color dan pembolehubah set fon:

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

Hasil output ialah:

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

pembolehubah Terdapat skop Apabila pembolehubah ditakrifkan dalam blok peraturan CSS, pembolehubah hanya boleh digunakan dalam blok peraturan ini.

2. Rujukan pembolehubah

Pembolehubah boleh digunakan di mana-mana sahaja nilai standard atribut CSS (seperti 1px atau tebal) boleh wujud.

Apabila css dijana, pembolehubah akan digantikan dengan nilainya.

$color:#A34554;

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

Css yang dijana ialah:

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

Apabila mengisytiharkan pembolehubah, nilai pembolehubah juga boleh merujuk kepada pembolehubah lain, seperti berikut$highlight-borderPembolehubah $highlight-color digunakan dalam pembolehubah:

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

//编译后

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

3 Tanda sempang (hyphen) dan garis bawah (underscore) dalam nama pembolehubah

Nama pembolehubah Sass. boleh menggunakan sempang dan Garis bawah, pembolehubah yang diisytiharkan dengan garis bawah boleh dirujuk dengan garis bawah, dan sebaliknya.

Iaitu, tiada perbezaan antara sempang dan garis bawah dalam nama pembolehubah, dan ia boleh beroperasi.

Sebagai contoh, dalam contoh di bawah, $link-color yang putus-putus boleh dirujuk oleh $link_color yang bergaris bawah.

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

//编译后

a {
  color: blue;
}

Sebaliknya, adalah lebih biasa untuk menggunakan garisan mendatar!

Bersarang (<span style="font-size: 18px;">Nesting</span>Bersarang)

Ia sangat menjengkelkan untuk menulis pemilih berulang kali dalam CSS. Gaya elemen html bersarang terutamanya, seperti:

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

Scss bersarang

Sass, dengan bantuan blok peraturan Nesting sub- blok peraturan membenarkan pemilih berulang ditulis sekali sahaja, mengelakkan pertindihan dan menjadikannya lebih mudah dibaca.

Sebagai contoh, dalam contoh di atas, dengan bantuan scss nesting:

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

Peraturan untuk membuka (parsing) scss nesting ialah: Dari lapisan luar ke lapisan dalam, peraturan bersarang Apabila blok dibuka, pemilih induk diletakkan di hadapan pemilihan anak untuk membentuk pemilih baharu, dan kemudian pemprosesan blok bersarang dalaman dibuka dalam gelung.

Pengecam pemilih induk &

#contentBiasanya, apabila Sass menghuraikan sarang, pemilih induk (article ) ialah disambungkan ke hadapan pemilih anak (aside dan #content article) dengan ruang untuk membentuk (#content aside dan

), iaitu, pemilih keturunan dijana.

:hoverTetapi untuk kelas pseudo

, untuk berbilang nama kelas, dsb., mereka tidak boleh disambungkan dalam bentuk "pemilih keturunan", seperti:

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

article a :hoverdijana secara lalai

akan menyebabkan semua elemen anak pautan dalam elemen artikel menjadi merah apabila dilegar, yang jelas salah (harus digunakan pada dirinya sendiri).

& Sass menyediakan pemilih khas untuk ini: pemilih induk

. Ia memberi anda kawalan yang lebih baik ke atas peraturan bersarang!

& Selagi pemilih boleh diletakkan, ia juga boleh digunakan dalam bersarang

. Apabila

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

& dikembangkan,

digantikan terus oleh pemilih induk:

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

& boleh dilaksanakan dalam pemilih induk dalam blok bersarang melalui

Tambah pemilih sebelum (sangat fleksibel).

Contohnya:

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

Pemilih kumpulan bersarang

,css, dipisahkan oleh

Pemilih kumpulan boleh gunakan gaya pada berbilang pemilih pada masa yang sama, seperti:

h1, h2 {
  margin: 0;
}

Walau bagaimanapun, jika anda ingin menggunakan pemilih kumpulan pada berbilang elemen dalam elemen kontena tertentu, maka akan terdapat banyak kerja berulang .

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

Walau bagaimanapun, ciri bersarang sass akan menggabungkan dengan betul setiap pemilih terbenam apabila membongkar pemilih kumpulan terbenam:

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

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

Atas ialah kandungan terperinci Analisis ringkas tentang sintaks asas Scss dan kaedah mengimport fail SASS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!