Sass语法---sass的安装和引用

I_am_shy2024-05-05 21:12

什么是Sass

Sass（英文全称：Syntactically Awesome Stylesheets）

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码，易于组织和维护。

Sass 文件后缀为 .scss。

CSS 本身语法不够强大，代码重复繁琐，无法实现复用，而且在代码也不方便维护，

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

NPM 安装

复制代码

npm install -g sass

在控制台上输入sass，可以看到如上内容则表示sass安装成功

sass兼容所有原css的语法，并在此基础上新增了部分内容

css 复制代码

.box{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 227, 117);
}

在控制台输入sass style.scss可以将sass代码转换成css代码

在控制台输入sass style.scss style.css可以将sass代码转换成css代码并将css代码存放到style.css文件中，可以看到产生了两个文件.css和.css.map文件

也可以下载Live Sass Compiler插件

点击右下角的watch并保存sass就可以立即生成对应的css文件

引入生成的css后可以看到结果