less

everfight 发布于2019-08-30 14:08 / 2932人阅读

摘要：一使用方法直接引入好处能获取客户端的数据，从而进一步计算。坏处在客户端解析造成性能浪费，不利于维护。五混合混合将一个定义好的引入到另一个中，从而简单实现继承中的所有属性。

一、使用方法 1.1直接引入less.js

好处：能获取客户端的数据，从而进一步计算。
坏处：在客户端解析less造成性能浪费，不利于维护。

1.2koala编译器

每次都要打开软件

1.3在服务器环境编译node npm

对于初学者可能比较生疏
vue项目在用less时，在style里边写：

1.4在编译器中实时编译

配置稍微麻烦

二、less是什么？

官方：一种动态样式语言：
变量、继承、运算、函数
我的理解：一个写css的工具，更加的灵活的统筹全局更加方便的计算。

三、嵌套

嵌套：我们可以在一个选择器中嵌套一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。


    

.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:500px;
        height:500px;
        background:#ff0000;
    }
}

四、变量

变量：变量允许我们多带带定义一系列通用的样式，然后在需要的时候去调用所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
变量作用域：一个或括号就是一个作用域。

@width：200；
@height：200；
@background：#ff0000；

    

.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:@width*1px;
        height:@height*1px;
        background:@background;
    }
}

五、混合 5.1混合：

将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

.clearFix{
    *zoom:1;
    &:after{
        content:"";
        display:block;
        clear:both;
    }
}
.classa{
    border:1px solid #ff0000;
}
.classb{
    .classa;
    .clearFix;
}

5.2带参数的混合

.classa（@color）{
    border:1px solid @color;
}
.classb{
    .classa（#ff0000）;
}

5.3带默认参数的混合

.classa（@width:1px,@style:solid）{
    border:@width @style #ff0000;
}
.classb{
    .classa（1px,dotted）;
}

六、arguments变量

arguments变量，代表了所有的参数（在不在乎参数顺序的时候使用）

.classa（@width:1px,@style:solid）{
    border:@arguments #ff0000;
}
.classb{
    .classa（1px,dotted）;
}

七、模式匹配

.border(left,@width:1px){
    border-left:@width solid #333;
}
border(right,@width:1px){
    border-right:@width solid #333;
}
.border(@_,@width:1px){
    width:100px;
}
.box1{
    .border(left,5px)
}
.box2{
    .border(right,5px)
}

八、Math函数

round(5.5)    四舍五入 6
ceil（2.4）    向上取整 3
floor（2.6）    向下取整 2

九、命名空间

.red{
    .button{
        background：red；
    }
}
.blue{
    .button{
        background：red；
    }
}
.box{
    .red > .button;
}

十、注释

// 这种注释方法不会被编译到css文件里面去（通常用于生产环境）
/*
这种注释会被解析到css文件里面去
*/

十一、关联

@import “global.less”

十二、避免编译

.box{
    width：@rem;
    font:(12/@rem)~"/"(20/@rem) "宋体")
}

参考链接

http://www.bootcss.com/p/less...

专线服务 idc机房托管 less less2 html使用less linux密令less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115801.html

#Less# less相关知识点总结

摘要：是一门预处理语言，它扩展了语言，增加了变量函数等特性，使更易维护和扩展。所以在生产环境中，我们需要事前把文件编译为正常的后，在相应文件中引入，以后用户访问的都是编译好的，为不是拿现编译的。代码编译为的结果 Less和CSS的区别 HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。LESS是一门CSS预处理语言，它扩展了CSS语言，增加了...

meteor199 2019-08-30 15:43 评论0 收藏0
less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

MkkHou 2019-08-02 15:58 评论0 收藏0
less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

codercao 2019-08-29 13:53 评论0 收藏0
CSS预编译语言Less的用法总结

摘要：例如解析现在流行的预编译语言和的优点简单，易于维护，管理更加容易高效的进行开发使用实现配色将变得非常容易。变量避免编译，有时候需要输出一些不正确的语法或者使用一些不认识的专有语法，在前面加入。对于刚接触的预编译的前端，我推荐用。 1、什么是Less？ less官网：Less is More , Than CSS -少即是多，比CSS 官网gitHub：https:/...

vboy1010 2019-08-29 15:21 评论0 收藏0
less学习之Bootstrap

摘要：学习笔记之目录说明源代码里面的目录是这样的只给出部分文件顾名思义，为整个定义的全局变量。定义在中使用的灰色和品牌颜色。这部分定义的主要色成功失败警告等等。之后也定义了默认背景色。 less学习笔记之bootstrap 目录说明源代码里面的目录是这样的(只给出部分)： .csscomb.json │ .csslintrc │ alerts.less │ badges.less ...

widuu 2019-08-30 15:55 评论0 收藏0