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

SASS用法示例图解

我们可以简单地创建SASS和SCSS示例。为此, 请使用以下步骤:

创建一个具有以下代码的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”的文件。它类似于CSS文件。唯一的区别是它以” .scss”扩展名保存。将两个文件都放在根文件夹中。

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

Sass Instasll10

它将在根文件夹内自动创建一个名为” style.css”的新CSS文件。每当你更改SCSS文件时, style.css文件都会自动更改。

style.css文件具有以下代码:

Sass Instasll11

现在执行HTML文件。它将读取CSS文件, 输出将如下所示:

输出

SASS Instasll12
赞(0) 打赏
未经允许不得转载:srcmini » SASS用法示例图解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

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

微信扫一扫打赏