A brief analysis of the basic syntax of Scss and the method of importing SASS files

This article mainly introduces the most basic usage and syntax. It can be seen that the variables and nesting introduced by Scss greatly facilitate development work. Combined with its own interpolation expressions, CSS style writing is very flexible!

Sass syntax introduction

sass has two syntax formats Sass (early indented format: Indented Sass) And SCSS (Sassy CSS)

Currently the most commonly used is SCSS. Any css file with the suffix changed to scss can be written directly using the Sassy CSS syntax.

All valid CSS is also valid SCSS.

Using variables

Sass uses the $ symbol to identify variables.

The purpose of variables is to allow you to save and reuse some information or data throughout the style sheet.

Such as storing colors, font sets, or any CSS values ​​you want to reuse.

1. Variable declaration

is very similar to css property declaration (property declaration)!

For example, declare the variable $highlight-color with the value #F90, and the font set variable:

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

The output result is:

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

Variables have scope. When the variable is defined in a css rule block, the variable can only be used within this rule block.

2. Variable reference

Variables can be used wherever the standard value of a CSS property (such as 1px or bold) can exist.

When css is generated, variables will be replaced by their values.

$color:#A34554;

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

The generated css is:

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

When declaring a variable, the value of the variable can also refer to other variables, as follows $highlight-border $ is used in the variable highlight-color Variable:

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

//编译后

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

3. The dash (hyphen) and underline (underscore) in the variable name

Sass variable names can use underscores and underscores. Variables declared with underscores can be referenced with underscores, and vice versa.

That is, there is no difference between the dash and the underscore in the variable name, and they are interoperable.

For example, in the following example, the horizontal line $link-color can be referenced by the underscore $link_color.

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

//编译后

a {
  color: blue;
}

In contrast, it is more common to use a horizontal line!

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

It is very annoying to write selectors repeatedly in css. Especially nested html element styles, such as:

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

Scss nested

In Sass, with the help of nesting in the rule block The sub-rule block allows the repeated selector to be written only once, avoiding duplication and making it more readable.

For example, in the above example, with the help of scss nesting:

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

The rules for opening (parsing) scss nesting are: From the outer layer to the inner layer, open the nested rule block , the parent selector is placed in front of the child selection to form a new selector, and then the internal nested block processing is opened in a loop.

##The identifier of the parent selector&

Usually, when sass parses nesting, the parent selector (

#content) is connected to the front of the subselector (article and aside) by a space to form (#content article and #content aside), which generates descendant selectors.

But for pseudo-classes

:hover, for multiple class names, etc., they should not be connected by "descendant selector", for example:

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

generated by default The

article a :hover will cause all child elements of the a link within the article element to turn red when hovered, which is obviously incorrect (should be applied to a itself).

Sass provides a special selector for this: the parent selector

&. It gives you better control over nested rules!

As long as the selector can be placed, you can also use

& in nesting. When

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

is expanded,

& is directly replaced by the parent selector:

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

can be implemented within a nested block through

& Add selector before parent selector (very flexible).

For example:

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

Group selector nesting

In css, use

, A split group selector can apply styles to multiple selectors at the same time, such as:

h1, h2 {
  margin: 0;
}

However, if you want to apply a group selector to multiple elements within a specific container element, you can There will be a lot of repetitive work.

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

However, the nested feature of sass will correctly combine each embedded selector when untying an embedded group selector:

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

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

The above is the detailed content of A brief analysis of the basic syntax of Scss and the method of importing SASS files. For more information, please follow other related articles on the PHP Chinese website!