CSS预处理器之less0731

CSS预处理器之less

1.基础内容

1.1什么是CSS预处理器?

• CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处
  简而言之: CSS预处理器就是升级版CSS
• 2.常见的CSS预处理器 :Less、 Sass 、Stylus

1.2 为什么需要less?

• CSS的语法虽然简单, 但它同时也带来一些问题
• CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念

1.3 什么是less(Leaner Style Sheets)?

• Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。
• 一句话：用类似JS的语法去写CSS

1.4 less基本使用

第一种用法

• 在浏览器中直接运行
  编写less文件-->引入less文件-->引入less.js-->运行

• 注意点:

  • <link rel="stylesheet/less" href="css/index.less">  注意和引入css区别
    

  • 一定要先引入less.css再引入less.js

    如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效

第二种用法

• 提前预编译(解决性能问题)
  编写less文件-->利用工具转换为css文件-->引入css文件
  考拉客户端: http://koala-app.com/index-zh.html
  开源中国 : https://tool.oschina.net/less
  构建工具配置loader自动编译
  注意点:
  无需引入less.js, 无需在服务端运

1.5 注释

• less中的注释和JS中的注释一样, 也有单行注释和多行注释
  less中单行注释和多行注释最大的区别在于: 是否会被编译
  单行注释不会被编译(不会出现在编译后的文件中)
  多行注释会被编译 (会出现在编译后的文件中)

2.变量定义与使用

2.1基本使用

• /*
  1.什么是变量?
  和js中的概念基本一样
  
  2.less中定义变量的格式
  @变量名称: 值;
  
  3.less中使用变量的格式
  @变量名称;
  @w: 400px;
  @h: 200px;
  
  4.和js一样可以将一个变量赋值给另外一个变量
  @变量名称 : @变量名称;
  @h: @w;
  
  5.和js一样less中的变量也有全局变量和局部变量
  定义在{}外面的就是全局的变量, 什么地方都可以使用
  定义在{}里面的就是局部变量, 只能在{}中使用
  
  注意定: less中的变量是延迟加载的, 写到后面也能在前面使用
  
  6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响(后定义的覆盖先定义的)
    和js一样在访问变量时会采用就近原则
  */
  

2.2 变量插值(基本不用)

• @size: 200px;
  @w: width;
  @s: div;
  /*
  1.什么是变量插值?
  在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量
  如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式
  
  2.变量插值的格式
  格式: @{变量名称}
  */
  @{s}{
    @{w}: @size;
    height: @size;
    background: red;
  }
  

3. less中的运算

• //想要让一个元素居中  传统做法
  
  div{
      width: 200px;
      height: 200px;
      background: blue;
      position: absolute;
      left: 50%;
      /*以下的方式不利于编码, 因为需要我们自己口算元素宽度的一半是多少*/
      /*margin-left: -100px;*/
      /*以下的方式不利于兼容, 因为transform属性是CSS3新增的, 只有支持C3属性的浏览器才可以使用*/
      /*transform: translateX(-50%);*/
      /*在CSS3中新增了一个calc函数, 可以实现简单的+ - * / 运算*/
      /*margin-left: calc(-200px / 2);*/
      margin-left: calc(-200px * 0.5);
  }
  
  /*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/
  //margin-left: (-200px * 0.5);
  margin-left: (-200px / 2);
  

4.less中的混合

4.1 不带参数的混合

• /*
  1.什么是less中的混合(Mix in)?
  将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可
  在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来
  本质就是ctrl+c  --> ctrl + v
  
  2.less中混合的注意点:
  如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码
  如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码
   */
  
  .center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .center(){
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .father{
    width: 300px;
    height: 300px;
    background: red;
    .center();
    .son{
      width: 200px;
      height: 200px;
      background: blue;
      .center();
    }
  }
  

4.2 带参数的混合

• // 这里就是带参数的混合
  /*
  .whc(@w, @h, @c){
    width: @w;
    height: @h;
    background: @c;
  }
   */
  // 这里就是带参数的混合, 并且带默认值
  .whc(@w:100px, @h:100px, @c:pink){
    width: @w;
    height: @h;
    background: @c;
  }
  .box1{
    //直接传递参数
    .whc(200px, 200px, red);
    // 这里是给混合的指定形参传递数据
    .whc(@c:red);
  }
  .box2{
    .whc(300px, 300px, blue);
  }
  

4.3 混合的可变参数

• /*
  1.less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参,不用一个一个传
  传递参数如下1  不传递参数就写...如下2
  但是比如transition 需要至少接受两个参数,为了不错误,就先传递两个参数,在写... 如3
  
  2.less中的...表示可以接收0个或多个参数
  如果形参列表中使用了..., 那么...必须写在形参列表最后
  */
  /*
  1.....
  .animate(@name, @time, @mode, @delay){
    //transition: @name @time @mode @delay;
    transition: @arguments;
  }
  
  2.
  .animate(...){
    //transition: @name @time @mode @delay;
    transition: @arguments;
  }
  3.
  */
  .animate(@name, @time, ...){
    //transition: @name @time @mode @delay;
    transition: @arguments;
  }
  div{
    width: 200px;
    height: 200px;
    background: red;
    //transition: all 4s linear 0s;
    //.animate(all, 4s);
    .animate(all, 4s, linear, 0s);
  }
  div:hover{
    width: 400px;
    height: 400px;
    background: blue;
  }
  

4.4 混合中的匹配模式及通用匹配模式

• /*
  混合的匹配模式:
  就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
  
  @_: 表示通用的匹配模式
  什么是通用的匹配模式?
  无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码。
  比如我们实现一个三角形无论上下左右都得写width,height, border-style,而通过通用的匹配模式,就能把这些重复的代码写在一个里面,减少代码冗余.
  .triangle(Down, @width, @color){
    width: 0;
    height: 0;
    border-width: @width;
    border-style: solid solid solid solid;
    border-color: @color transparent transparent transparent;
  }
  */
  //我们来通过less实现一个三角形
  .triangle(@_, @width, @color){
    width: 0;
    height: 0;
    border-style: solid solid solid solid;
  }
  //下三角
  .triangle(Down, @width, @color){
    border-width: @width;
    border-color: @color transparent transparent transparent;
  }
  //下三角
  .triangle(Top, @width, @color){
    border-width: @width;
    border-color: transparent transparent @color transparent;
  }
  //左三角
  .triangle(Left, @width, @color){
    border-width: @width;
    border-color: transparent @color transparent transparent;
  }
  //右三角
  .triangle(Right, @width, @color){
    border-width: @width;
    border-color: transparent transparent transparent @color;
  }
  div{
    //.triangle(Down, 80px, green);
    //.triangle(Top, 80px, green);
    //.triangle(Left, 80px, green);
    .triangle(Right, 80px, green);
  }
  

5.less中导入其他less文件

• @import "triangle.less";
  @import "triangle"; 可以不加后缀

6.less中的内置函数

• <script>
      /*
      由于less的底层就是用JavaScript实现的,
      所以JavaScript中常用的一些函数在less中都支持
      */
      // 混杂方法
      /*
      image-size("file.jpg"); // => 100px 50px
      image-width("file.jpg"); // => 100px
      image-height("file.jpg"); // => 50px
  
      // 单位转换
      convert(9s, "ms"); // => 9000ms
      convert(14cm, mm); // => 140mm
      convert(8, mm); // => 8
  
      // 列表
      @list: "A", "B", C, "D";
      length(@list); // => 4
      extract(@list, 3); // => C
      */
      // 数学
      /*
      ceil(2.1); // => 3 向上取整
      floor(2.1); // => 2 向下取整
      percentage(.3); // => 30% 转百分比
      round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
      sqrt(25cm); // => 5cm 取平方根
      abs(-5cm); // => 5cm 取绝对值
      pi(); // => 3.141592653589793 圆周率π
      max(3px, 42px, 1px, 16px); // => 42px
      min(3px, 42px, 1px, 16px); // => 1px
      */
      // 字符串
      /*
      replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
      */
      // 判断类型
      /*
      isnumber(56px); // => true 是否含数字
      isstring("string"); // => true
      iscolor(#ff0); // => true
      iscolor(blue); // => true
      iskeyword(keyword); // => true
      isurl(url(...)); // => true
      ispixel(56px); // => true
      isem(7.8em); // => true
      ispercentage(7.8%); // => true
      isunit(4rem, rem); // => true 是否为指定单位
      isruleset(@rules); // => true 是否为变量
      */
      // 颜色操作
      /*
      增加饱和度
      saturate(color, 20%)
      减少饱和度
      desaturate(color, 20%)
      增加亮度
      lighten(color, 20%)
      减少亮度
      darken(color, 20%)
      降低透明度
      fadein(color, 10%)
      增加透明度
      fadeout(color, 10%)
      设置绝对不透明度(覆盖原透明度)
      fade(color, 20%)
      旋转色调角度
      spin(color, 10)
      将两种颜色混合，不透明度包括在计算中。
      mix(#f00, #00f, 50%)
      与白色混合
      tint(#007fff, 50%)
      与黑色混合
      shade(#007fff, 50%)
      灰度，移除饱和度
      greyscale(color)
      返回对比度最大的颜色
      contrast(color1, color2)
      */
      // 颜色混合
      /*
      每个RGB 通道相乘，然后除以255
      multiply(color1, color2);
      与 multiply 相反
      screen(color1, color2);
      使之更浅或更暗
      overlay(color1, color2)
      避免太亮或太暗
      softlight(color1, color2)
      与overlay相同，但颜色互换
      hardlight(color1, color2)
      计算每个通道(RGB)基础上的两种颜色的平均值
      average(color1, color2)
      */
  
  </script>
  

7.less中的层级结构

在less中使用伪元素和伪类

• /*如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
    例如以下代码: .father .son
  */
  .father{
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*
    .son{
      // 这里的&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可
      如果不加&,就会变成这样 .father .son :hover多了一个空格
      */
      &:hover{
        background: skyblue;
      }
      width: 200px;
      height: 200px;
      background: blue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
     
  
    &::before{
      content: "子元素";
      display: block;
      background: yellowgreen;
      width: 100px;
      height: 100px;
    }
  }
  

8. less中的继承

• .center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /*
  1.less中的继承和less中混合的区别
  1.1使用时的语法格式不同 .father:extend(.center){}
  1.2转换之后的结果不同(混合是直接拷贝, 继承是并集选择器)
  */
  .father:extend(.center){
    width: 300px;
    height: 300px;
    background: red;
    //.center;
    .son:extend(.center){
      width: 200px;
      height: 200px;
      background: blue;
      //.center;
    }
  }
  

9.less中的条件判断

• /*
  less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码
  when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断
  检查函数在上面
  */
  /*
  .size(@width,@height) when (@width = 100px){
    width: @width;
    height: @height;
  }
   */
  // (),()相当于JS中的||
  /*
  .size(@width,@height) when (@width = 100px),(@height = 100px){
    width: @width;
    height: @height;
  }
   */
  // ()and()相当于JS中的&&
  /*
  .size(@width,@height) when (@width = 100px)and(@height = 100px){
    width: @width;
    height: @height;
  }
   */
  .size(@width,@height) when (ispixel(@width)){
    width: @width;
    height: @height;
  }
  div{
    .size(100px,100px);
    background: red;
  }