SASS学习基础

最近一直被泡在前端窑子里，因此也接触到一些不新鲜又新鲜的东西，其中今天我们就要学习SASS 

一、SASS是什么？

它是对CSS的扩展，让CSS语言更强大。优雅。

允许使用变量、嵌套规则、继承、自定义函数、条件语句等一系列功能，并且能够完全兼容CSS语法。

二、安装和使用

2.1 安装

SASS是Ruby语言写的，因此在安装SASS之前必须先安装Ruby。

假如你已经安装好了Ruby，那么在命令行输入如下命令就可以使用了：

gem install sass

允许使用变量、嵌套规则、继承、自定义函数、条件语句等一系列功能，并且能够完全兼容CSS语法。

2.2 使用

SASS文件其实就是普通的文本文件，里面可以直接编写CSS代码，文件名后缀必须是.scss。

下面的命令演示如何将.scss文件输出为.css文件。（假如文件名为test）

sass test.scss test.css

SASS提供如下几种编译风格：

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

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

* compact：简洁的css代码格式；

* compressed：压缩后的css代码；

生产环境中，我们一般选择最后一种，如下：

sass --style compressed test.sass test.css

也可以让SASS监听某个文件或目录，一旦源文件有变动，就会自动编译。

//监听文件

sass --watch input.scss:output.css

//监听目录

sass --watch pro/sass:public/css

SASS的官方提供了一个在线转换器。你可以在那里，敲敲并运行下面的各种例子。

2.3实践

2.3.1 变量：

2.3.2 伪类：

2.3.3 嵌套：

2.3.4 继承（@extend）：

2.3.5 引入（@mixin和@include）：

2.3.6 传参（@mixin和@include()）：

2.3.7 插入文件（@import）

@import "path/filename.scss";

@import "filename.css";

 

2.3.8 循环（for/while/each）

for：

while：

each：

原文来自：博客园/LE-ZHOU