我们可以简单地创建SASS和SCSS示例。为此, 请使用以下步骤:
创建一个具有以下代码的HTML文件:
请参阅以下示例:
<
html>
<
head>
<
title>
Import example of sass<
/title>
<
link rel="stylesheet" type="text/css" href="http://www.srcmini.com/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
文章图片
它将在根文件夹内自动创建一个名为” style.css” 的新CSS文件。每当你更改SCSS文件时, style.css文件都会自动更改。
style.css文件具有以下代码:
文章图片
现在执行HTML文件。它将读取CSS文件, 输出将如下所示:
【SASS用法示例图解】输出
文章图片
推荐阅读
- Sass @for指令用法示例
- Sass @error 指令用法详解
- Sass(定义混合示例详解)
- Sass 具有多个分配的@each指令用法
- Sass @debug指令用法详解
- SASS-控制指令和表达式用法介绍
- Sass @ at-root指令用法详解
- Sass的优缺点介绍
- Ruby中的Sass命令用法详解