一文解决零基础 Sass入门

Sass简介

Sass是一款成熟、稳定、强大的专业级CSS扩展语言，它是一款强化CSS的辅助工具，在CSS语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、引入(inline imports)等高级功能，让CSS更加强大与优雅。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass的优势主要包括如下几点。

(1) Sass完全兼容所有版本的CSS。

(2) 特性丰富，Sass拥有比其他任何CSS扩展语言更多的功能和特性。

(3) 技术成熟，功能强大。

(4) 行业认可，越来越多的人使用Sass。

(5) 社区庞大，大多数科技企业和成百上千名开发者为Sass提供支持。

(6) 有无数框架使用Sass构建，如Compass、Bootstrap、Bourbon和Susy。

此外，Sass为CSS引入了变量的概念。在Sass中编写样式代码时，可以把反复使用的CSS属性值定义成一个变量，这样就不需重复地书写此属性值，在使用此属性值时只需通过变量名在不同的代码位置来引用它。或者，对于仅使用过一次的属性值，可以赋予其一个易懂的变量名，让人很直观地看出这个属性值的用途。

一、如何Vscode中使用sass

1. 在Vscode扩展中搜索live sass Compiler并下载安装

2.下载完成后即可写sass代码

新建文件，更名为demo.sass 或demo.scss 两种后缀皆可，都是sass语言

3.Sass的两种文件形式

• sass
• scss

两种文件后缀对应两种代码书写风格

例如：我们在content盒子下的span标签添加字体颜色属性red.

由图：sass<