预处理器

预处理器的作用和原理

什么是CSS预处理器：

• CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作
• 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

CSS 预处理器的特点：

• 基于CSS的另一种语言
• 通过工具编译成CSS
• 添加了很多CSS不具备的特性
• 能提升CSS文件的组织

CSS预处理器的作用：

• 帮助更好地组织CSS代码
• 提高代码复用率
• 提升可维护性

CSS预处理器的优缺点：

• 优点：提高代码复用率和可维护性
• 缺点：需要引入编译过程 有学习成本

CSS预处理器的能力：

• 变量和计算 减少重复代码
• 嵌套 反映层级和约束
• Extend 和 Mixin复用代码片段
• 循环 适应于复杂有规律的样式
• import CSS文件模块化

CSS预处理器语言，比如说：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多

CSS预处理器的框架:

• Less - Lesshat / est: npm install -g less-plugin-est http://ecomfe.github.io/est/
• sass - Compass http://compass-style.org/
• 提供现成的 mixin
• 类似JS类库 封装常用功能

less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端

less官方文档 less中文文档 less文件后缀为.less,例如: index.less

less安装

  npm install -g less

less编译:

• 编译方法一: 在nodejs环境中使用less
  • 在命令行中运行less: lessc  styles.less  styles.css
  • 编译成生产环境下的css文件： lessc -x styles.less styles.css

• 编译方法二: 在浏览器环境中使用less

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

• 编译方法三: 工具编译
  • 考拉

less 功能：

• 变量（Variables）: 符号@
• 嵌套（Nesting）
• 混合（Mixins）
• 扩展（Extend）
• 作用域（Scope）
• 循环（Loop）
• 导入（Importing）

变量：

//  css  变量  --box:red;    background:var(--box)
//  less 变量  @width:10px   width:@width

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}


@fontSize: 12px;
@bgColor: green;

html {
  background: @bgColor;
}
body {
  background: @bgColor;
  font-size: @fontSize;
}

嵌套

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }

  .logo {
    width: 300px;
  }
}

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

.box{
  background-color: red;
  ul {
    background: burlywood;
  }
  &:hover {
    background-color: blue;
  }
}

混合（代码块复用）

@fontSize: 12px;
@bgColor: red;

.block {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.box1 {
  .block;
  background-color: red;
}

扩展(会把重复的代码块，单独拎出去)

@fontSize: 12px;
@bgColor: red;

.block {
  font-size: @fontSize;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.box1:exend(.block){
  background: red;
}

.wrapper {
  background: lighten(@bgColor, 40%);

  .nav:extend(.block) {
    color: #333;
  }

  .content {
    &:extend(.block);

    &:hover {
      background: red;
    }
  }
}

编译后的

.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.box1:exend(.block) {
  background: red;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  color: #333;
}
.wrapper .content:hover {
  background: red;
}

作用域机制

@var: red;

#page {
   @var: white;
  #header {
    color: @var; // white
  }
}

循环

// 写一个通用的函数
.gen-col(@n) when (@n > 0) {
  .gen-col(@n - 1);

  .col-@{n} {
      width: 1000px/12*@n;
  }
}
// 调用
.gen-col(12);

/*
  .gen-col12{}
  .gen-col11{}
  .gen-col10{}
  .gen-col9{}
*/ 

模块导入

@import "./08.importing-variable.less";
@import "./09.importing-module1.less";
@import "./10.importing-module2.less";

sass

Sass官方文档 Sass中文网

https://www.sasscss.com/

练习小测试

sass文件后缀为.scss,例如: index.scss

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

sass编译

• 编译方法一: 命令编译
  • 单文件编译: sass styles.scss styles.css
  • 实时监视.scss文件:  sass --watch styles.scss:styles.css

• 编译方法二: GUI界面工具编译
  • Koala - 推荐
  • Compass.app
  • Scout
  • CodeKit - 推荐
  • Prepros

• 编译方法三: 自动化编译(利用Grunt和Gulp)

sass功能

• sass变量: 符号$，默认变量 !default，局部变量和全局变量
• sass嵌套: 选择器嵌套、属性嵌套、伪类嵌套
• sass mixin混入: @mixin声明/@include调用
• sass extend扩展: @extend
• sass loop循环
• sass import模块化

变量

// css  变量  -- box
// less 变量  @box
// sass 变量  $box

$fontSize: 12px;
$bgColor: red;

.box1{
  font-size: $fontSize;
}
.box2{
  color:$bgColor;
}

嵌套

// 属性嵌套
.box1{
  font: {
    size:12px;
    weight: bold;
    family: Arial, Helvetica, sans-serif;
  }
}



.wrapper {
  background: white;

  .nav {
    font-size: 12px;
  }

  .content {
    font-size: 14px;
    &:hover {
      background: red;
    }
  }
}

混合 ( @mixin 书写 @include 调用)

$fontSize: 12px;
$bgColor: red;

// @mixin  书写   @include 调用        

@mixin block($fontSize) {
  font-size: $fontSize;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.box1 {
  @include block($fontSize);
}
.box2 {
  @include block($fontSize);
  background-color: wheat;
}

.wrapper {
  background: lighten($bgColor, 40%);

  .nav {
    @include block($fontSize);
  }

  .content {
    @include block($fontSize + 2px);

    &:hover {
      background: red;
    }
  }
}

扩展

$fontSize: 12px;
$bgColor: red;

.block {
  font-size: $fontSize;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.box1{
  @extend .block
}
.box2{
  @extend .block;
  background-color: wheat;
}

.wrapper {
  background: lighten($bgColor, 40%);

  .nav {
    @extend .block;
    color: #333;
  }

  .content {
    @extend .block;

    &:hover {
      background: red;
    }
  }
}

循环 (更像js语句)

@for $i from 1 through 12 {    
  .col-#{$i} {
    width: 1000px/12*$i;
  }
}

导入

@import "./07.importing-variable.scss";
@import "./08.importing-module1.scss";
@import "./09.importing-module2.scss";