美文网首页
less学习与总结

less学习与总结

作者: Gopal | 来源:发表于2017-11-17 11:28 被阅读11次

Less是什么
Less是一种动态的样式语言,Less扩展了CSS的动态行为,比如说,设置变量(variables)、混合书写模式(mixins)、操作(operations)和功能(functions)等等,而且Less使用了现有的CSS语法。

疑问:将less转换成CSS需要配置什么?
Less有什么用呢?,直接看下面

变量

注意:在Less中的变量实际上就是一个“常量”,因为它只能被定义一次
Less

@color: #ffffff;
@color: #dddddd;
#header: {
    color: @color;
}

Css

#header {
      color:#dddddd;
 }

上面的代码中很明显的说明了后面的@color覆盖了前面的@color
另外,变量还有计算的功能

混入(Mixins)
混入就是一种嵌套,它允许你将一个类嵌入到另一个类中,而被嵌入的这个类也被称为一个变量。

个人理解:就是你自己行一个类(就当做一个变量吧或者有时候可以认为它是一个带有参数的functions),然后将这个类嵌入到另一个类中当做它的属性

Less

  .common(@radius:5px) {
    border-radius: @radius;
  }

  #header {
    .common;
  }

  #footer {
    .common;
  }

解析成CSS

  #header {
    border-radius: 5px;
  }

  #footer {
    border-radius: 5px;
  }

混入函数还有一个名词叫做“混入参数”,就是说可以接受变量参数

  .common(@radius) {
    border-radius: @radius;
  }

  #header {
    .common(10px);
  }

  #footer {
    .common(20px);
  }

解析成Css

  #header {
    border-radius: 10px;
  }

  #footer {
    border-radius: 20px;
  }

当然也可以不用带参数

嵌套规则
这里需要注意的是,&符号,在Less中嵌套有&解析的是同一个元素或者这个元素的伪类,没有&解析的是后代元素
Less

  .content {
    .footer {
      color: red;
    }
    &.header {
      color: #ffffff;
    }
  }

解析成CSS

  .content .footer{
    color: red;
  }

  .content.header {
    color: #ffffff;
  }

Function&Operations
注意:Less中的operations主要是针对任何数字、颜色、变量的操作,可以对其加减乘除或者更加复杂的运算。而function主要Color functions

命名空间
上面所说,我们把一些变量或者mixins组织起来,并将它封装,想用的时候把一部分取出来使用。

  #bundle {
    .button () {
      display: block;
      border: 1px solid black;
      background-color: grey;
      &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
  }

使用

  #header a {
    color: orange;
    #bundle > .button;
  }

变量范围——scope
采用就近原则,也就是说元素先找本省有没有这个变量存在,如果存在,就取得这个变量,不存在则寻找父元素,以此类推

  @var: red;

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

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

总结:上面只是常用的一些功能,less的功能远不仅仅是这些!

相关文章

  • 关于less和sass你了解多少!

    小编最近又学习了less和sass语言,下面是我对less与sass的一些异同的简单总结。 首先,le...

  • 第十三周第一天笔记之less

    less知识 简书链接less使用总结:less基础知识less使用总结2:less使用总结 单位px,em,re...

  • Less学习总结

    say hello & intro Less is More,Than CSS-少即是多,比CSS less介绍-...

  • Less学习总结

    Less是什么 Less类似于jQuery。 ——是一种css动态语言,属于css预处理语言的一种。它使用类似cs...

  • LESS的语法特性

    以下内容是我在学习和研究LESS时,对LESS的特性、重点和注意事项的提取、精练和总结,可以做为LESS特性的字典...

  • less学习与总结

    Less是什么Less是一种动态的样式语言,Less扩展了CSS的动态行为,比如说,设置变量(variables)...

  • less基础

    less less语法学习

  • less总结

    css-less和sass总结

  • less基础学习记录总结

    目录 变量 混合 带参数混合 嵌套规则 运算 Color函数 命名空间 作用域 Importing 变量 less...

  • less与sass的区别

    今天我们来谈谈less与sass的相同点与不同点。 一、less与sass分别是什么 1、less Less 是一...

网友评论

      本文标题:less学习与总结

      本文链接:https://www.haomeiwen.com/subject/dowdvxtx.html