20190421-那些年使用过的CSS预处理器（CSS Preprocessor）之Sass and Less

写在前面乱七八糟的前言：

emmm，还是决定把Sass与Less单独出来写成一篇，可能会稍微好辣么一丢丢？TAT语法特性是真的香，通篇下来能吸收个10%自我感觉已经很nice了，毕竟渣渣的我有渣渣的自觉~本文侧重于输出Sass，对于Less的话简单带过，毕竟学会了Sass再看Less基本上就都很ok了，如果想简单上手，建议先从Less开始入门，最后再吃下我Compass的安利，┓( ´∀` )┏慢慢盘吧。

目录

1、Sass（Syntactically Awesome Style Sheets）

2、Less（emm找不到全称）

3、Sass与Less的区别

4、Compass（Sass的toolkit）

内容

1、Sass（Syntactically Awesome Style Sheets）

1.1安装：

安装ruby环境，安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

在命令行输入gem install sass

1.2转译Sass（最后引用的还是css文件的！）

在屏幕上直接转化：sass test.scss

转化成文件：sass test.scss test.css

ps：文件命名方式最好使用英文，如提示gbk与utf-8等关键字的报错时，文件命名方式使用英文即可

1.3监听Sass

//watch a file

sass --watch test.scss：test.css

//watch a directory

sass --watch ./sass：./css

1.4Vscode的easy Sass

1.4.1安装easy Sass插件

1.4.2设置转译目标目录

文件->首选项->设置(快捷键ctrl+，)->搜索设置->easysass->Target Dir->方框内填写（或直接在settings.json中编辑"easysass.targetDir": "./css/"）

ps："easysass.targetDir": "./css/"
意思：easysass的目标目录：""
所以在变更文件夹时记得修改这个目录
比如将原先的css文件放在sass文件夹内时，应将路径更改为./sass/css/

1.5使用

1.5.1变量：

声明：$变量名：变量值；

调用：$变量名

ps：若变量名需在字符串内嵌套，则需使用#{ }包裹；

如：$black：#000；

如：$side：left；

.test{

border-#{$side}-color: $black；

}

编译为：

.test{border-left-color：#000；}

1.5.2运算

.test{

margin:（14px/2）；

top：20px+20px；

right：$var *10%；

}

ps：单位会进行运算，注意最终单位

1.5.3嵌套

1.5.3.1选择器嵌套：

ul{

li{ }

}

1.5.3.2属性嵌套

border：{

color：red；

width：10px；

}

1.5.3.3伪类嵌套

ul{

li{

&：hover{ }

}

}

1.5.4混合

声明：@mixin name（$param:value）{ }；

调用：@include name（value）

ps：声明时可带参可不带，可带默认值，但调用需符合命名规范

优点：可传参，不会生成同名class

缺点：将混合代码copy到对应的选择器中

1.5.5扩展

缘起：通常都是p，ul{ common style}，往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦，有了扩展就很舒服了

声明：.class{ }

调用：@extend .class

优点：继承相同代码并提取到并集选择器中

缺点：不可传参，在CSS中生成一个同名class

1.5.6占位符

声明：%class{ }

调用：@extand %class

优点：继承相同代码并提取到并集选择器，不会生成同名的class选择器

缺点：无法传参

ps：传参用混合，先有class用继承，无须参数无须class用占位符

1.5.7if语句

@if{ }

@else{ }

1.5.8for循环

@for $i from 1 to 10{ }不含十；

@for $i from 1 through 10{ }含十；

1.5.9while循环

$j：1；

@while $j<10{

.while#{$j}{

border：#{$j}px solid red;

}

$j:$j+1；

}

1.5.0each循环遍历

@each item in a，b，c，d{

//item 表示每一项

}

1.5.11函数

@function func（$length）{

$length：$length*5；

@return $length；

}

调用：func（10px）；

2、Less（emm找不到全称）

2.1安装：

引入node.js

在命令行输入$ npm install -g less

2.2转译Less（可引用less文件也可引用css文件）

2.2.1命令行：

在屏幕上直接转化：$ lessc styles.less

转化成文件：$ lessc styles.less styles.css

转化成压缩版：$ lessc --clean-css styles.less styles.min.css

2.2.2代码：略

2.2.3浏览器端：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

下载链接

CDN加速：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

2.3使用：

2.3.1变量：

声明：@变量名：变量值；

调用：@变量名

2.3.2其他：略

3、Sass与Less的区别

3.1Less优势：让开发者平滑地从现存CSS文件过渡到LESS，而无需像Sass一样将CSS文件转换成Sass；有全局变量

3.2编译环境：

Sass需要安装ruby环境，是服务端处理的

Less需node js环境，引入less.js，是客户端处理的

3.2变量符

Sass用$

Less用@

3.3输出设置

Sass：四种输出风格，默认nested

nested：嵌套缩进

expanded：展开多行

compact：简洁格式

compressed：压缩

Less：嵌套与压缩min

3.4工具库

Sass：Compass，基于Sass的封装

Less：UI组件库Bootstrap

3.5文件转译

Sass：源文件不能给浏览器直接识别，需转译为css

Less：源文件无需转译为css

3.6作用域

Sass：无全局作用域，定义相同变量名时，在调用要注意

Less：首先定义局部定义的变量，若无，像冒泡一样一级级往下查找，直到根为止

3.7使用

3.7.1混合：

Sass：

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

Less：

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}	

3.7.2其他高级语法：略

4、Compass（Sass的toolkit）

4.1Compass是什么

简单讲：Compass是Sass的工具库（toolkit）

Sass本身只是一个编译器，Compass由SASS的核心团队成员Chris Eppstein创建，在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系

4.2Compass安装与编译

1.安装
Linux或OS X且已安装ruby
命令行输入：sudo gem install compass
Windows系统且已安装ruby
省略sudo
2.项目初始化
compass create test
3.编译
compass complie
该命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中
默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数
compass compile --output-style compressed
Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数
compass compile --force
除了使用命令行参数，还可以在配置文件config.rb中指定编译模式
output_style = :expanded
:expanded模式表示编译后保留原格式，其他值还包括:nested、:compact和:compressed。进入生产阶段后，就要改为:compressed模式
output_style = :compressed
也可以通过指定environment的值（:production或者:development），智能判断编译模式
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性编译命令，compass还有自动编译命令
compass watch
运行该命令后，只要scss文件发生变化，就会被自动编译成css文件

1.gem安装Sass
  C:\Users\DELL>gem install sass
 
2.查看Sass版本
  C:\Users\DELL>sass -v
  Sass 3.4.13 (Selective Steve)
 
3.编译Sass文件
  sass main.scss main css
  // 一般很少使用sass命令,一般都是用Compass命令;
 
4.gem安装Compass
  C:\Users\DELL>gem install compass
 
5.查看Compass版本
  C:\Users\DELL>compass -v
  Compass 1.0.3 (Polaris)

6.Compass搭建项目
  C:\Users\DELL\compass create sass
  // 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5   directory sass/
  directory sass/sass/                  // sass文件所在目录;
  directory sass/stylesheets/           // css文件所在目录;
     create sass/config.rb              // 项目配置文件;
     create sass/sass/screen.scss       // 主要针对屏幕的sass文件;
     create sass/sass/print.scss        // 主要针对打印设备;
     create sass/sass/ie.scss           // 主要针对IE浏览器;
      write sass/stylesheets/ie.css
      write sass/stylesheets/print.css
      write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;
 
  // You may now add and edit sass stylesheets in the sass subdirectory of your project.
  // 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;
 
  // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
  // Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;
 
  // You can configure your project by editing the config.rb configuration file.
  // 你可以通过编辑config.rb配置文件来配置项目信息; 
 
  // You must compile your sass stylesheets into CSS when they change.
  // 当Sass文件被修改后,必须要编译Sass文件到CSS;
 
  // 1. To compile on demand:                   // 直接编译;
  // compass compile [path/to/project]
  // 2. To monitor your project for changes and automatically recompile:
  // compass watch [path/to/project]            // 监听项目变化并且自动编译; 
 
  // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
  // <head>
  //   <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  //   <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  //   <!--[if IE]>
  //       <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  //   <![endif]-->
  // </head>
  // 将编译后的文件引入到HTML页面中;

更多命令行方法参考：Compass官网

4.3Compass使用

Compass采用模块结构，不同模块提供不同的功能。目前，它内置五个模块：

* reset
* css3
* layout
* typography
* utilities

你还可以自行加载网上的第三方模块，或者自己动手编写模块

4.3.1reset模块

编写自己的样式之前，有必要重置浏览器的默认样式

@import "compass/reset";

@import命令，用来指定加载模块，这里就是加载reset模块。编译后，会生成相应的css reset代码

4.3.2css3模块

该模块提供19种CSS3命令

圆角

@import "compass/css3";

　　.rounded {
　　　　@include border-radius(5px);
　　}

@include命令，表示调用某个mixin（类似于C语言的宏），5px是参数，这里用来指定圆角的半径

编译后的代码为

.rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

如果只需要左上角为圆角，写法为

@include border-corner-radius(top, left, 5px);

透明

@import "compass/css3";

　　#opacity {
　　　　@include opacity(0.5); 
　　}

编译后生成

#opacity {
　　　　filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　　　opacity: 0.5;
　　}

行内区块

@import "compass/css3";

　　#inline-block {
　　　　@include inline-block;
　　}

编译后生成

#inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
　　}

4.3.3layout模块

提供布局功能

比如，指定页面的footer部分总是出现在浏览器最底端：

@import "compass/layout";

　　#footer {
　　　　@include sticky-footer(54px);
　　}

比如，指定子元素占满父元素的空间：

@import "compass/layout";

　　#stretch-full {
　　　　@include stretch; 
　　}

4.3.4typography模块

提供版式功能

指定链接颜色的mixin为：

　link-colors($normal, $hover, $active, $visited, $focus);

使用时写成：

@import "compass/typography";

　　a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

4.3.5utilities模块

供某些不属于其他模块的功能

比如，清除浮动：

import "compass/utilities/";

　　.clearfix {
　　　　@include clearfix;
　　}

比如表格：

@import "compass/utilities";

　　table {
　　　　@include table-scaffolding;
　　}

编译后生成

table th {
　　　　text-align: center;
　　　　font-weight: bold;
　　}

　　table td,
　　table th {
　　　　padding: 2px;
　　}

　　table td.numeric,
　　table th.numeric {
　　　　text-align: right;
　　}

4.3.6Helper函数

除了模块，Compass还提供一系列函数。

有些函数非常有用，比如image-width()和image-height()返回图片的宽和高。

再比如，inline-image()可以将图片转为data协议的数据。

@import "compass";

　　.icon { background-image: inline-image("icon.png");}

编译后得到

　　.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函数与mixin的主要区别是，不需要使用@include命令，可以直接调用。

参考文献：

Sass与Compass入门

阮一峰Compass用法指南

Less入门手册

Sass中文网

environment = :development

　　output_style = (environment == :production) ? :compressed : :expanded