0
点赞
收藏
分享

微信扫一扫

如何在 VScode 中使用 Sass

前言

本文主要记录了如何在 VScode 中使用 Sass,以及Sass的基础语法,包括Sass的嵌套,标识符,以及两种形式的简单介绍。

Sass

Sass 是基于Ruby语言开发而成的 CSS 扩展语言,是 CSS 预处理器;

Sass 提供了许多便利的写法,可以减少 CSS 代码的重复,节省开发时间。

在 VScode 中使用 Sass

Live Sass Compiler

在VScode中安装 Live Sass Compiler 插件,它可以帮助我们实时编译Sass代码,将其转化为CSS代码。

image.png

Sass初体验

在VScode中创建Sass文件,在Sass文件中可以正常编写CSS也不会报错。

在这里插入图片描述

点击VScode下方的Watch Sass,会编译Sass代码生成CSS代码。 在这里插入图片描述 在这里插入图片描述

Sass基础语法

Sass有两种形式分别以.scss.sass为后缀;

先以.scss为例,(最后再看.sass)建立.scss形式的Sass文件;

Sass嵌套

在Sass中可以将选择器层级进行嵌套,提高编码效率。 在这里插入图片描述

标识符

在层级嵌套中,使用 标识符& 代表父选择器。

在这里插入图片描述

.sass vs .scss

.sass文件与.scss文件类似,将.scss文件中的{}; 去掉就变成了.sass文件。

在这里插入图片描述

ps:Sass的两种形式其实是同一种东西,差别不大,可以按个人的使用习惯进行选择。

本文到此结束

如果大家还有什么其他想法,欢迎在评论区交流!

举报

相关推荐

0 条评论