Sass 预处理

Sass预处理

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

当您开始使用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 lidihuo</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 预处理_https://bianchenghao6.com_【SASS 教程】_第1张

现在，执行上述html文件，它将读取CSS值。

Sass 嵌套

SASS 控制表达式