CSS之Sass初体验

Sass背景是Ruby语言写的，增加了变量，嵌套，混合，导入等功能，可依赖Ruby模块（在windows安装）。本章依赖于node后台，将sass包，解压缩至node安装地址。

 

.scss  为文件扩展名

 

Sass，可以理解为一种CSS的预处理器，用于进行网页样式设计，再编译成正常的CSS文件

查看所有命令提示：node-sass --help

'Options',

    '  -w, --watch               Watch a directory or file',  监听/查看一个文件或者目录

    '  -o, --output               Output directory',        输出到文件目录

    '  -v, --version               Prints version info',       查看node-sass版本

    '  --help                     Print usage info'        查看所有sass帮助命令符

一、

文件的转换方式

eg:

node-sass scss/01.scss css/01.css

 

在scss文件目录下打开PowerShell弹窗,输入以下命令：

sass 01.scss

如图，可以.scss文件转换成css语法格式：

 

sass提供四种编译风格：(了解)

*nested：嵌套缩进的css代码，它是默认值。

*expanded：没有缩进，扩展的css代码

*compact:简洁格式的css代码

*compressed:压缩后的css代码

 

SassScript语法：

①注释： /* */ 多行注释；  

         // 当行注释；

 

 

优点：

1、sass可以让编写可维护的css更加简易方便，减少代码量。

2、兼容 CSS3，CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins)等。

3、通过函数进行颜色值与属性值的运算。

4、提供控制指令

 

②eg：

1、通过命令打开sass文件监听：node-sass -w scss -o css

 

2、打开需要编译的文件：注释如下

 

 

 

效果图：

本篇简述灵活的定义使用sass语法和实践效果，感谢观赏，thanks you for reading this article！