地表最强专业级CSS扩展语言Sass
Posted CurryCoder的程序人生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地表最强专业级CSS扩展语言Sass相关的知识，希望对你有一定的参考价值。
点蓝色字关注“CurryCoder的程序人生”
1.什么是Sass?
/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
安装完成后，在CMD中就可以输入ruby -v命令查看Ruby的版本，如下图所示：
Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你只需要在CMD中输入gem install sass和gem install compass两条命令即可。
安装完成之后，你应该通过运行下图中的命令来确认应用已经正确地安装到了电脑中。
编译Sass有很多种方法，本文使用其中最简单的一种即利用vscode中的插件Live Sass编译器。可以通过该插件实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。在插件商店中先要安装Live Sass编译器。
"liveSassCompile.settings.formats":[
// 扩展
{
"format": "nested", // 可定制的出口CSS样式（expanded，compact，compressed，nested）
"extensionName": ".css", // 编译后缀名
"savePath": null // 编译保存的路径
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
summer.html代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 引入sass文件编译后的css代码 */
@import "summer.css"; // 注意：引入summer.scss编译后得到的summer.css文件
</style>
</head>
<body>
<h1>Summer</h1>
</body>
</html>
尚未编译的.scss文件summer.scss，具体的文件内容如下所示：
body {
background: yellow;
display: grid;
place-items: center;
}
h1 {
font-family: "Merienda One", cursive;
font-size: 10rem;
letter-spacing: 0.3rem;
color: yellow;
text-shadow: 2px 10px 0px magenta, 4px 10px 0px magenta, 6px 10px 0px magenta,
8px 10px 0px magenta, 10px 10px 0px magenta, 12px 10px 0px magenta,
14px 10px 0px magenta, 16px 10px 0px magenta;
}body {
background: yellow;
display: grid;
place-items: center; }
h1 {
font-family: "Merienda One", cursive;
font-size: 10rem;
letter-spacing: 0.3rem;
color: yellow;
text-shadow: 2px 10px 0px magenta, 4px 10px 0px magenta, 6px 10px 0px magenta,
8px 10px 0px magenta, 10px 10px 0px magenta, 12px 10px 0px magenta,
14px 10px 0px magenta, 16px 10px 0px magenta; }
/*# sourceMappingURL=summer.css.map */
觉得好看，请点这里↓↓↓
以上是关于地表最强专业级CSS扩展语言Sass的主要内容，如果未能解决你的问题，请参考以下文章