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

什么是Sass

Sass(英文全称:Syntactically Awesome Stylesheets)

Sass 是一个 CSS 预处理器。

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

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

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

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

Sass 文件后缀为 .scss。

为什么使用 Sass?

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

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

Sass安装

NPM 安装

复制代码
npm install -g sass

在控制台上输入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后可以看到结果

相关推荐
美酒没故事°6 分钟前
npm源管理器:nrm
前端·npm·npm源
用户22152044278006 分钟前
vue3组件间的通讯方式
前端·vue.js
三十_A24 分钟前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子32 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒32 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户479492835691533 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影33 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天34 分钟前
CSS 属性值的计算与过程
前端
云鹤_35 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei37 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端