个性化阅读
专注于IT技术分析

Sass预处理用法示例

CSS足以处理简单的样式表, 但是如果样式表更大, 更复杂, 则很难维护它们。在这种情况下, 预处理器可以提供帮助。 Sass提供了CSS中不可用的一些扩展功能, 例如变量, 嵌套, 混入, 继承和其他漂亮的东西, 使其兼容处理所有类型的样式表。

当你开始使用Sass时, 它将获取你经过预处理的Sass文件并将其保存为简单的CSS文件, 该文件随后将在你的网页中使用。

安装sass后, 你可以使用–watch标志监视单个文件或整个目录。查看整个目录时, 请参阅运行Sass的语法。

句法:

sass --watch app/sass:public/stylesheets

创建一个具有以下代码的简单HTML文件:

请参阅以下示例:

<html>
<head>
   <title> Import example of sass</title>
   <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
   <h1>Simple Sass Example</h1>
   <h3>Welcome to srcmini</h3>
   <p>A solution of all technology.</p>
</body>
</html>

创建一个具有以下代码的名为” style.scss”的SCSS文件:

h1{
   color: #AF80ED;
}
h3{
   color: #DE5E85;
}

将两个文件都放在根文件夹中。

现在, 执行以下代码:–watch style.scss:style.css

它将创建一个名为?style.css?的普通CSS文件。在同一目录中。例如:

SASS预处理1

现在, 执行上面的html文件, 它将读取CSS值。

输出

SASS预处理2
赞(0) 打赏
未经允许不得转载:srcmini » Sass预处理用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏