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 分钟前
HTML5 常用事件详解
前端·html·html5
Python大数据分析@23 分钟前
通俗的讲,网络爬虫到底是什么?
前端·爬虫·网络爬虫
Lysun00144 分钟前
vue2的$el.querySelector在vue3中怎么写
前端·javascript·vue.js
jerry-891 小时前
Centos类型服务器等保测评整/etc/pam.d/system-auth
java·前端·github
小爬菜1 小时前
Django学习笔记(启动项目)-03
前端·笔记·python·学习·django
想要打 Acm 的小周同学呀1 小时前
前端Vue2项目使用md编辑器
前端·编辑器·vue2·markdown 语法
计算机-秋大田2 小时前
基于SSM的家庭记账本小程序设计与实现(LW+源码+讲解)
java·前端·后端·微信小程序·小程序·课程设计
海的预约2 小时前
VUE之路由Props、replace、编程式路由导航、重定向
前端·vue.js·智能路由器
西柚与蓝莓3 小时前
报错:{‘csrf_token‘: [‘The CSRF token is missing.‘]}
前端·flask
python算法(魔法师版)4 小时前
html,css,js的粒子效果
javascript·css·html