预处理语言

1.1 less是什么？

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

1.2 怎么使用less?

less文件不能在浏览器中直接显示 需要将less文件转换成css 文件。
所以需要安装Nodejs文件转换less文件为css文件

1.3 安装Nodejs

 1）安装Nodejs 
      安装完毕之后，要测试是否安装完成？
      node -v 或者 npm --version （来安装一些工具）
 2）npm install less -g  (global)
      注意安装完毕之后，会在cmd窗口中可以使用lessc

1.4 使用less

1)win+R-->cmd进入控制台
2)切换盘，如文件在D盘 D：回车切换  cd 后加less文件所在的文档
3)使用lessc + 需要转换的.less文件 + 转换成需要的.css文件  ——————注意后缀一定要前面是.less后面是.css 

1.5 less语言

1)变量.less
  定义一个变量如：@color:red;
 一个盒子div就可引入这个变量
 div{
     color:@color;
 }
 转换成css文件之后就是
  div{
     color:red;
 }

2)混合.less
将一些通用的属性放在一个class中，然后在例外一个class中去调用这些属性。任何的class和id或是元素都可以用这样的方式进行引入。
.temp{
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#header a{
  color : #111;
  .temp;
}
#nav a{
  color : black;
  .temp;
}
转换之后
#header a{
  color : #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#nav a{
  color : black;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

3)带参数的混合.less
可以像函数一样定义一个带参数的属性集合
.border-radius (@radius){
    border-radius: @radius;
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}
#header{
    .border-radius(10px) ;
}
.button{
    .border-radius(20px)
}
转换成css
#header {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.button {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

4)运算.less
任何数字、颜色都可以参与运算
@width:200px;
#header{
    width: @width;
    height: @width/2;
}
转换css
#header{
    width: 200px;
    height: 100px;
}

5)内置函数
less本身提供了一系列的颜色运算函数。颜色会被转化成为HSL色彩空间，然后在通道级别操作。
lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色
darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色
saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色
fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色
fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色
spin(@color, 10);         // 返回色调比@color大10度的颜色
spin(@color, -10);        // 返回一个比@color小10度色调的颜色
mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色

6）嵌套规则
以嵌套的方式写层叠样式
#footer {
    color: red;
    >ul {
        font-size: 20px;
        li {
            a {
               text-decoration: none;
            }
           
            &:hover {
                color: #e9232c;
            }
        }
    }
}
转换css
#footer {
  color: red;
}
#footer > ul {
  font-size: 20px;
}
#footer > ul li a {
  text-decoration: none;
}
#footer > ul li:hover {
  color: #e9232c;
}

7)作用域
less的作用域和其他编程语言十分的相似，首先在本地的变量和混合模块进行查找，如果没有找到的话，就会去父及作用域查找，直到找到为止。
@var: red;

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

#footer {
  color: @var; // red  
}

2.1 sass是什么？

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

2.2需要安装什么？

npm install -g sass

2.3 怎么使用

其实道理跟less差不多
lessc换成sass
注意sass后缀是.scss

2.5 Sass语言

Sass 嵌套规则与属性同less嵌套规则与属性

Sass @import 
Sass 导入文件

类似 CSS，Sass 支持 @import 指令。
@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。
Sass @import 指令语法如下：
@import filename;


注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

此外，你也可以导入 CSS 文件。
导入后我们就可以在主文件中使用导入文件等变量。
以下实例，导入  reset.scss 文件。
Sass 代码：@import "reset";
reset.scss 文件代码：
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
Css 代码：
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass @mixin与 @include 
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
定义一个混入
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }
以下实例创建一个名为 "important-text" 的混入：
Sass 代码：
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
使用混入

@include 指令可用于包含一混入：
selector {
  @include mixin-name;
}
实例
.danger {
  @include important-text;
  background-color: green;
}
转换
.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

Sass @extend 与 继承 
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。
Sass 代码：
.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}
将以上代码转换为 CSS 代码，如下所示：
.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}