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后可以看到结果

相关推荐
原则猫9 小时前
HOOKS 背后机制
前端
码语智行9 小时前
首页导航跳转功能深度解析-系统内和系统外
前端
阿猫的故乡10 小时前
Vue过渡动画从入门到装X:淡入淡出、滑动、列表动画、第三方库全搞定
前端·javascript·vue.js
IManiy10 小时前
总结之Vibe Coding前端骨架
前端
JS菌10 小时前
AI Agent 沙箱双层防护体系:从权限过滤到内核隔离的完整实现
前端·人工智能·后端
Aphasia31111 小时前
从输入URL到页面展示全流程
前端·面试
我叫黑大帅11 小时前
前端如何竖屏固定视口背景
前端·javascript·面试
abcy07121311 小时前
python pandas csv异步后台清洗前端优先返回成功信息
前端·python·pandas
IT_陈寒11 小时前
Vite这个坑我帮你踩了,动态导入居然这样才生效
前端·人工智能·后端
swipe12 小时前
Mem0 x Agent 实战系列:分层记忆 + 三路召回,搭建真正可用的长期记忆层
前端·javascript·面试