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

相关推荐
续亮~16 分钟前
6、Redis系统-数据结构-05-整数
java·前端·数据结构·redis·算法
顶顶年华正版软件官方2 小时前
剪辑抽帧技巧有哪些 剪辑抽帧怎么做视频 剪辑抽帧补帧怎么操作 剪辑抽帧有什么用 视频剪辑哪个软件好用在哪里学
前端·音视频·视频·会声会影·视频剪辑软件·视频剪辑教程·剪辑抽帧技巧
托尼沙滩裤3 小时前
【js面试题】js的数据结构
前端·javascript·数据结构
不熬夜的臭宝3 小时前
每天10个vue面试题(一)
前端·vue.js·面试
不如喫茶去3 小时前
VUE自定义新增、复制、删除dom元素
前端·javascript·vue.js
长而不宰3 小时前
vue3+electron项目搭建,遇到的坑
前端·vue.js·electron
阿垚啊4 小时前
vue事件参数
前端·javascript·vue.js
过去式的美好5 小时前
vue前端通过sessionStorage缓存字典
前端·vue.js·缓存
Simaoya5 小时前
vue判断元素滚动到底部后加载更多
前端·javascript·vue.js
头顶一只喵喵5 小时前
Vue基础知识:Vue3.3出现的defineOptions,如何使用,解决了什么问题?
前端·javascript·vue.js·vue3