您的位置:58脚本 > sas导入数据代码 Sass 导入指令

sas导入数据代码 Sass 导入指令

2023-05-18 00:32 Sass教程

sas导入数据代码 Sass 导入指令

sas导入数据代码 Sass 导入指令

sas导入数据代码

描述

导入指令,导入SASS或SCSS文件。 它直接需要导入文件名。 在SASS中导入的所有文件将在单个CSS文件中组合。当我们使用 @import 规则时,很少有事情编译到CSS:

  • 文件扩展名<.css>

  • 文件名以 http:// 开头

  • 文件名为 url()

  • @import 包含任何媒体查询。

例如,使用以下代码创建一个SASS文件:

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

您可以通过使用以下命令让SASS查看文件,并在SASS文件更改时更新CSS:

sass --watch C:rubylibsassstyle.scss:style.css

上面的代码将编译成CSS文件,如下所示:

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

以下是使用 @import 规则导入文件的方法:

部分

部分是SASS或SCSS文件,它们使用下划线在名称(_partials.scss)开头写入。可以在SASS文件中导入部分文件名,而不使用下划线。 SASS不编译css文件,但使用下划线,它只使SASS理解它是部分的,不应该生成CSS文件。

嵌套@import

@import 指令可以包含在 @media 规则和CSS规则中。基本级文件导入其他导入文件的内容。导入规则嵌套在与第一个 @import 相同的位置。

例如,使用以下代码创建一个SASS文件:

.container
{
background: #ffff;
}

将以上文件导入以下SASS文件,如下所示。

h4 {
  @import "example";
}

上面的代码将编译成CSS文件,如下所示:

h4 .container {
  background: #ffff;
 }

句法

以下是用于在SCSS文件中导入文件的语法:

@import 'stylesheet'

例子

以下示例演示如何在SCSS文件中使用 @import :

import.html

<html>
<head>
   <title>Import example of sass</title>
   <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body class="container">
   <h1>Example using Import</h1>
   <h4>Import the files in SASS</h4>
   <ul>
   	<li>Red</li>
   	<li>Green</li>
   </ul>
</body>
</html>

接下来,创建文件 _partial.scss

_partial.scss

ul{
    margin: 0;
    padding: 1;
}

li{
    color: #680000;
}

接下来,创建文件 style.scss

style.scss

@import "partial";
.container
{
background: #ffff;
}

h1
{
color: #77C1EF;
}

h4
{
color: #B98D25;
}

您可以通过使用以下命令让SASS查看文件,并在SASS文件更改时更新CSS:

sass --watch C:rubylibsassstyle.scss:style.css

接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

输出

让我们执行以下步骤,看看上面的代码如何工作:

  • 将上面的html代码保存在 import.html 文件中。

  • 在浏览器中打开此HTML文件,将显示如下输出。

Sass rules and directives
阅读全文
以上是58脚本为你收集整理的sas导入数据代码 Sass 导入指令全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS