📅  最后修改于: 2020-12-25 03:53:11        🧑  作者: Mango

Sass @-规则和指令Sass中使用的所有规则和指令的列表如下：IndexDirectiveDescription1.@importIt is used to import the sass or scss files. It directly takes the filename to import.2.@mediaIt is used to set style rule to differe...

📅  最后修改于: 2020-12-25 03:54:06        🧑  作者: Mango

SASS导入CSS提供了@import选项，使您能够将CSS分成更小，更易于维护的部分。唯一的限制是，每次在CSS中使用@import时，都会创建另一个HTTP请求。Sass建立在当前CSS @import之上。不需要HTTP请求。取而代之的是，它只提取要导入的文件，并将其与要导入的文件合并，以便可以将单个CSS文件提供给Web浏览器。假设我们有两个Sass文件_reset.scss和base.s...

📅  最后修改于: 2020-12-25 03:55:00        🧑  作者: Mango

Sass @media指令Sass @media指令用于将样式规则设置为不同的媒体类型。 Sass支持并扩展@media规则。Sass @media指令可以嵌套在选择器SASS内，但主要影响显示在样式表的顶层。Sass @media指令示例让我们以一个示例来演示Sass @media指令与多个分配和映射的用法。我们有一个名为“ simple.html”的HTML文件，其中包含以下数据。HTML档案...

📅  最后修改于: 2020-12-25 03:55:57        🧑  作者: Mango

Sass继承/扩展在Sass中，@ extend用于将一组CSS属性从一个选择器共享到另一个选择器。这是Sass的非常重要和有用的功能。Sass的@extend功能允许类彼此共享一组属性。在将许多类放在一起的复杂CSS中，可能会发生属性重复。 @extend功能使您的代码更少，并方便您重复重写它。让我们以一个示例来演示@extend功能。在这里，我们为错误，警告和成功创建了一系列简单的消息传递。S...

📅  最后修改于: 2020-12-25 03:56:51        🧑  作者: Mango

Sass @ at-root指令Sass @ at-root指令是嵌套规则的集合，这些规则用于在文档根目录处设置样式。句法：Sass @ at-root指令示例让我们以一个示例来演示Sass @each指令与多个分配和映射的用法。我们有一个名为“ simple.html”的HTML文件，其中包含以下数据。HTML档案：simple.html创建一个名为“ simple.scss”的SCSS文件，其...

📅  最后修改于: 2020-12-25 04:00:41        🧑  作者: Mango

Sass @debug指令Sass @debug指令用于检测错误，并向标准错误输出流显示SassScript表达式值。Sass @debug指令示例让我们创建一个名为“ debug.scss”的SCSS文件，其中包含以下数据。现在，打开命令提示符并运行watch命令，以告知SASS监视文件并在更改SASS文件时更新CSS。执行以下代码：sass –watch debug.scss：debug.cs...

📅  最后修改于: 2020-12-25 04:01:37        🧑  作者: Mango

Sass @警告指令Sass @warn指令在出现问题并希望向用户提供警告性建议时使用。它将SassScript表达式的值显示到标准错误输出流。@warn和@debug之间有两个特定的区别：可以使用–quiet命令行选项或：quiet Sass选项关闭警告。Sass @warn伪指令提供打印输出以及消息，以便在警告发生的地方警告用户。Sass @warn指令示例让我们创建一个名为“ warn.sc...

📅  最后修改于: 2020-12-25 04:02:30        🧑  作者: Mango

Sass @错误指令当您想显示错误时，使用Sass @error指令。它将SassScript表达式值显示为致命错误，包括不错的堆栈跟踪。Sass @error指令示例让我们创建一个名为“ error.scss”的SCSS文件，其中包含以下数据。现在，打开命令提示符并运行watch命令，以告知SASS监视文件并在更改SASS文件时更新CSS。执行以下代码：sass –watch error.scs...

📅  最后修改于: 2020-12-25 04:03:22        🧑  作者: Mango

SASS-控制指令和表达式Sass控制指令和表达式可帮助您根据某些条件使用样式。它还使您能够多次应用相同的样式。 SassScript支持它。控制指令是指南针库的一部分。这些主要用于mixin，并要求相当大的灵活性。Sass中使用的控制指令和表达式的列表：IndexExpressionDescription1.if() functionThe if() function is based on t...

📅  最后修改于: 2020-12-25 04:04:17        🧑  作者: Mango

Sass if()函数Sass内置的if()函数基于条件。它仅从两个可能的结果中返回一个结果。函数的结果取决于结果是对还是错。句法：让我们以一个示例来看一下SCSS文件中if()函数的用法。我们有一个名为“ simple.html”的HTML文件，其中包含以下代码：HTML档案：simple.html创建一个名为“ simple.scss”的SCSS文件，其代码如下：(错误条件)文件：simple...

📅  最后修改于: 2020-12-25 04:05:11        🧑  作者: Mango

Sass @if指令@if指令根据表达式的结果指定代码语句的执行。 @if语句可以与多个@if else语句和一个@else语句一起使用。@if指令有两种类型：@if指令@else if指令@if指令Sass @if指令接受SassScript表达式，并且如果表达式返回除false或null之外的其他任何值，则使用嵌套样式。例如：如果您使用以下SCSS文件。SCSS语法：编译后，它将创建一个具有以...

📅  最后修改于: 2020-12-25 04:06:05        🧑  作者: Mango

Sass @ else-if指令当@if指令失败时，使用Sass @ else-if指令。如果失败，则使用@else指令。SCSS语法：编译后，它将创建一个具有以下代码的CSS文件：CSS语法：Sass @ else-if指令示例让我们以一个示例来演示Sass @ else-if指令的用法。我们有一个名为“ simple.html”的HTML文件，其中包含以下数据。HTML档案：simple.ht...

📅  最后修改于: 2020-12-25 04:07:00        🧑  作者: Mango

Sass @for指令Sass @for指令可帮助您在循环中生成样式。当您需要重复设置样式时使用。它使用计数器变量来设置每次迭代的输出。@for指令使用两种类型的关键字：通过至通过关键字在Sass @for指令中，通过关键字用于指定范围，包括两个值<start>和<end>。</end></start>句法：参数说明：$ var：它指定变量的名称，例如$ i。和：和是将返回整数的SassScrip...

📅  最后修改于: 2020-12-25 04:07:53        🧑  作者: Mango

Sass @each指令Sass @each指令包含列表中每个项目的值。它也可用于多个分配以及带有地图的多个分配。简单的@each指令@each指令具有多个分配@each指令具有多个分配和映射简单的@each指令在Sass简单的@each指令中，定义了一个变量，该变量由列表中每个项目的值组成。句法：参数说明：$ var：它指定变量的名称。 @each规则为列表中的每个项目设置$ var，并使用$ ...

📅  最后修改于: 2020-12-25 04:08:50        🧑  作者: Mango

Sass @each指令具有多个分配我们可以将Sass @each指令与多个值一起使用，例如$ var1，$ var2，$ var3，…<list> 。</list>句法：参数说明：$ var1，$ var2和$ var3：$ var1，$ var2和$ var3指定变量的名称。：它用于指定列表列表，每个变量将保存子列表的元素。Sass @each指令具有多个分配例让我们以一个示例来演示Sass ...