导入指令,导入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 指令可以包含在 @media 规则和CSS规则中。基本级文件导入其他导入文件的内容。导入规则嵌套在与第一个 @import 相同的位置。
例如,使用以下代码创建一个SASS文件:
.container { background: #ffff; }
将以上文件导入以下SASS文件,如下所示。
h4 { @import "example"; }
上面的代码将编译成CSS文件,如下所示:
h4 .container { background: #ffff; }
以下是用于在SCSS文件中导入文件的语法:
@import 'stylesheet'
以下示例演示如何在SCSS文件中使用 @import :
<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 。
ul{ margin: 0; padding: 1; } li{ color: #680000; }
接下来,创建文件 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 文件:
ul { margin: 0; padding: 1; } li { color: #680000; } .container { background: #ffff; } h1 { color: #77C1EF; } h4 { color: #B98D25; }
让我们执行以下步骤,看看上面的代码如何工作:
将上面的html代码保存在 import.html 文件中。
在浏览器中打开此HTML文件,将显示如下输出。
描述 @for 指令允许您在循环中生成样式。计数器变量用于设置每次迭代的输出。 @for 指令有两种类型,如下表所示:序号关键字和描...
描述本节介绍了Less 中函数的使用。LESS 映射具有值操作的 JavaScript 代码,并使用预定义的函数来操纵样式表中的 HTML 元素。它...
实例使用 meter 元素展示给定的数据范围:meter value="2" min="0" max="10"2 out of 10/meterbrmeter value="0.6"60%/meter浏览...
RowSetInternalpublic interface RowSetInternalRowSet 对象为了将自身呈现给 RowSetReader 或 RowSetWriter 对象而实现的接口。...
StatementEventjava.lang.Object |---java.util.EventObject |---|---javax.sql.StatementEventpublic class StatementEventexte...