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

相关推荐
江沉晚呤时5 分钟前
.NET Core 中 Swagger 配置详解:常用配置与实战技巧
前端·.netcore
waterHBO19 分钟前
chrome 浏览器插件 myTools, 日常小工具。
前端·chrome
哎呦你好21 分钟前
HTML 颜色全解析:从命名规则到 RGBA/HSL 值,附透明度设置与场景应用指南
前端·css·html
多云的夏天1 小时前
前端:VUE-(0)-环境搭建和helloworld
前端·javascript·vue.js
Dontla1 小时前
BootCDN介绍(Bootstrap主导的前端开源项目免费CDN加速服务)
前端·开源·bootstrap
90后小陈老师1 小时前
WebXR教学 07 项目5 贪吃蛇小游戏
前端·数码相机
一口一个橘子1 小时前
[ctfshow web入门] web118
前端·web安全·网络安全
GanGuaGua2 小时前
Vue3:脚手架
前端·javascript·css·vue.js·vue
鸡吃丸子3 小时前
常见的实时通信技术(轮询、sse、websocket、webhooks)
前端·websocket·状态模式
胡斌附体3 小时前
vue添加loading后修复页面渲染问题
前端·javascript·vue.js·渲染·v-if·异步加载