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

相关推荐
難釋懷29 分钟前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
特立独行的猫a34 分钟前
Nuxt.js 中的路由配置详解
开发语言·前端·javascript·路由·nuxt·nuxtjs
咸虾米37 分钟前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志38 分钟前
JavaScript Proxy 和 Reflect
前端·javascript
汤圆炒橘子41 分钟前
状态策略模式的优势分析
前端
90后的晨仔1 小时前
解析鸿蒙 ArkTS 中的 Union 类型与 TypeAliases类型
前端·harmonyos
IT_陈寒1 小时前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·人工智能·后端
挑战者6668881 小时前
vue入门环境搭建及demo运行
前端·javascript·vue.js
贩卖纯净水.1 小时前
Webpack的基本使用 - babel
前端·webpack·node.js
用户882093216672 小时前
Vue组件通信全攻略:从父子传参到全局状态管理,一篇搞定!
前端