一、less 是什么？

网址：http://lesscss.cn

less 是 css 预编译语言，和其类似的预编译语言还有：sass stylus 等，而所谓的预编译，其实就是把 css 这种标记语言，按照面向对象编程语言的方式进行编写（有变量、函数、判断等操作），但是这种写法浏览器不能直接识别，需要我们把其编译成正常 css 代码才可以。

1. less 的编译：

  1. 1. 开发环境下（开发项目的时候）<br />   我们基于 less.min.js 进行编译，link 把 less 文件导入，但是 rel 的值必须是 stylesheet / less ，这样导入的 js 会找到这些 less 文件，把 less 编译为 css 既可<br />    2. 生产环境下（项目部署上线的时候）<br />   我们需要把 less 编译为 css ，然后让页面中导入的都是编译后的 css<br />   基于需要 node 环境，并且基于 less 模块进行编译（命令操作方式）<br />   1. 安装 node （安装 npm）<br />   2. $ npm install less -g (mac 电脑上最好设置 sudo 安装)<br />   3. 找到对应的 less 文件目录，在目录中：$ lessc xxx.less xxx.css / -x (设置 -x 是为了把代码进行压缩)

2. less 和 css 的区别：

css 是标记语言，不是编程语言，没有类、示例、函数、变量，开发效率低，可复用和可维护性差；
而less等预编译语言就是让css具备面向对象编程思想，有变量、有函数、有作用域，是浏览器不能识别和渲染 less 代码，需要我们把 less 代码先编译为正常 css 后，再交给浏览器进行解析渲染。
支持单行注释 // xxx:xxx

二、使用less

1. 修改 link 标签的 rel 属性

把 link 标签中的 rel 属性又 stylesheet 改为 stylesheet / less

<link rel="stylesheet/less" href="less文件">

2. 引入编译 js 的文件

  • 开发环境编译，只需要引入编译 less 的 js 文件即可
<script src="less-2.5.3.min.js"></script>

实际项目中我们使用 webpack、gulp 或者 grunt 等打包工具中的 less 编译等功能在打包的时候自动打包并且插入到页面中；

三、less 语法

原来的 css：

.box {
    width: 200px;
    height: 200px;
    background: skyblue;
}

.box a {
  color: red;
}

改写成 less

.box {
    .centerPos(200, 200);
    width: 200px;
    height: 200px;
    background: skyblue;

    a {
        color: red;
    }
}

1. less 中的变量

  • less 变量：

存储值代表值，以后再用这个值，使用这个变量即可，如果以需要修改，只需要修改这个变量，那么所有用到这个变量的时候只要用到这个就改了；

  • 声明一个变量：

语法： @变量名

@bg-src:"../img/";  /*使用图片资源变迁引入 变量存储，以及拼接*/
@link-color: #000; /* 可以使用 - */
@wid: 200px;

/*使用变量*/
a {
  color: @link-color;
  width: @wid;
  background: url("@{bg-src}1.jpg") no-repeat center;
}

2. less 中的嵌套语法（减少前缀）

  1. less 中使用嵌套表示层级；html 代码如下
  2. & 是嵌套中的连接符，让后面的选择器紧挨着父级选择器 &>img === .box1>img
<div class="outer">
    <div class="inner">
        <div class="center"><a href="" class="link"></a></div>
    </div>
</div>

less 代码

.outer {
    .inner {

        .center {
            a {

            }
        }
    }
}
  1. 在 less 的嵌套语法中使用 & 表示花括号外面的选择器后面紧跟着XX

.pub {

.bg { /*.pub .bg 后代选择器*/

}

& > .bg { /*.pub > .bg 子级选择器*/

}

&.bg { /*.pub.bg 交集选择器*/

}

&:hover { /*.pub:hover 使用伪类*/

}

}

3. less 嵌套会形成作用域（存在变量提升）

 每一个大括号都是一个私有作用域，在里面用到的变量，先看是否为私有的，（是否在当前作用域中声明过和形参变量）不是私有的，找上级作用域中的 类似于 js 作用域联这套机制

@width: 100px;

/*嵌套语法，& 使用*/
.pub {
    @width: 200px;
    .bg {
        width: @width;  /*.bg最终的width使用的200px*/
    }
}

4. less 中使用函数

 less 中内置的函数：用来设置或者去除单位的 unit // width：unit(@w，px）
  1. 每一个样式类都能充当一个函数，直接在其他的作用域中调取执行（执行特点：不需要传参，可以不加小括号）这种函数的调用是把原有的代码都原封不动的拿过来一份一模一样的包括其所有的后代样式
  2. 带参数的函数（创建函数带着小括号），也是直接点的方式调用，但是编译成为 css 的时候，函数不会编译，但是函数执行出来的代码会放到每一个调取函数的选择器中
  3. less中的内置函数 unit 、darken、lighten
  4. 继承：基于继承也能实现样式的公用（原理：两个样式类公用同一套代码，但是后代样式不能被继承）
.transition(@property: all, @duration: .5s, @timing-function: linear, @delay: 0s) {
    transition: @arguments;
}

.cc {
    .transition; /*啥也不传时使用默认值*/
    .transition(@duration: 1s); /*只修改duration*/
}

四、css3 中新增特性

  1. border-radius
.box {
    border-radius: 50%;
}
  1. box-shadow: h v blur spread color inset;
  • h 阴影水平偏移值
  • v 阴影竖直偏移值
  • blur 模糊尺寸（可选）
  • spread 阴影尺寸（可选）
  • color 阴影颜色（可选）
  • inset 内置阴影（可选）
.box {
  box-shadow: 5px 5px 10px 10px #000;
}
  1. text-shadow: h-shadow v-shadow blur color;
.box {
    text-shadow: 5px 5px 10px #000;
}
  1. background-size: 值如下
  • 100px 100px 具体值
  • 100% 100% 宽高百分比（相对于所在容器）
  • cover 以合适的比例把图片整个容器覆盖，但是容器不一定漏出整个图片
  • contain 保证图片纵横比例不变铺满容器的尺寸较小一个方向，另一边根据图片综合比例计算（当一边铺满后，另一边不一定铺满）
  1. background-clip: 值如下
  • border-box 裁切到边框
  • padding-box 裁切到 padding
  • content-box 裁切到内容区域
  • text 只填充文本（需要-webkit）

五、CSS3 过渡动画

<div id="box" class="box"></div>

.box {
      background: #00b38a;
      width: 200px;
      height: 200px;
      transition: all .5s linear 0s;
    }

    #box:hover {
      width: 300px;
      height: 300px;
    }

transition 属性

transition: all .5s linear 0s;

transition是一个合成属性，有以下属性合成：

  • transition-property: 要过渡的属性，默认 all
  • transition-duration: 过渡时间
  • transition-timing-function: 过渡效果，默认 linear
  • transition-delay: 动画延迟时间

六、CSS3 变形动画

CSS3的变形动画需要设置 transform 属性

transform: skew (0, 45deg);

常见的效果有，可以组合使用：

  • scale: 缩放
  • translate: 平移
  • rotate: 旋转
  • skew: 倾斜

transform-origin: 设置旋转动画的中心点位置；

  • 水平： left center right
  • 竖直：top center bottom*

示例：

#box:hover {
  width: 300px;
  height: 300px;
  transform: scale(2, 0.5);
}

 #box:hover {
  width: 300px;
  height: 300px;
  transform: translate(100px, 100px);
 }
#box:hover {
    width: 300px;
    height: 300px;
    transform:rotate(360deg);
}
#box:hover {
  transform: skew(0, 45deg);
}

七、关键帧动画

CSS3 中使用 @keyframes 定义关键帧动画，使用 animation 属性调用；

html代码：

<div class="box" id="box"></div>

CSS定义关键帧动画：

@keyframes shake {
    0% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(-0deg);
    }
    50% {
        transform: rotate(-45deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

调用关键帧动画：

.box {
    width: 120px;
    height: 300px;
    background: url(clock.png) no-repeat;
    margin: 20px auto;
    transform-origin: center top; /*设置旋转元素的基点位置*/
    animation: shake 2s linear 0s infinite; /*调用关键帧动画*/

}

animation 属性详解：
animation 是一个合成属性，由以下属性合成：

  • animation-name: 运动轨迹名称 @keyframes 定义一个轨迹名称
  • animation-duration: 运动轨迹运动时间
  • animation-timing-function: 运动效果 (linear ease-in ease-out..)
  • animation-delay: 延迟时间
  • animation-iteration-count: 动画执行次数，默认1，infinite 无数次