###less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

###Less编译工具
koala 官网:www.koala-app.com

###less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

###less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载

###less中的嵌套规则
1.基本嵌套规则

            #wrap{

                #inner{

                }

            }

<div id="wrap">

<div id="inner"></div>

</div>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/less">

            *{

                margin: ;

                padding: ;

            }

            #wrap{

                position: relative;

                width: 300px;

                height: 300px;

                border: 1px solid;

                margin:  auto;

                #inner{

                    width: 100px;

                    height: 100px;

                    background: pink;

                    position: absolute;

                    left: ;

                    right: ;

                    top: ;

                    bottom: ;

                    margin: auto;

                }

            }

        </style>

        <script src="../less/less.min.js"></script>

    </head>

    <body>

        <div id="wrap">

            <div id="inner"></div>

        </div>

    </body>

</html>

less基本嵌套规则

*{

    margin: ;

    padding: ;

}

#list{

    list-style: none;

    line-height: 30px;

    width: 300px;

    background: pink;

    margin:  auto;

    li{

        height: 30px;

    }

    a{

        float: left;

        &:hover{

             /*&代表父级*/

            color: red;

        }

    }

    span{

         float: right;

    }

}

2.&的使用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/index1.css"/>

    </head>

    <body>

        <div id="wrap">

            <div id="inner"></div>

        </div>

    </body>

</html>

html引入

//定义变量

@zero:;

//定义id选择器

@selector:#wrap;

//定义宽

@w:width;
 //颜色选择
  background: url("../img/zdy.jpg");
//变量的延迟加载
.class {

  one: ;

}

.class .brass {

  three: ;

}

###less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合

.juzhong{

}

#box1{

    .juzhong;

}

#box2{

    .juzhong;

}

2.不带输出的混合

.juzhong(){

    position: absolute;

    left: ;

    right: ;

    bottom: ;

    top: ;

    margin: auto;

}

#box1{

    width: 100px;

    height: 100px;

    background: pink;

    .juzhong;

}

#box2{

    width: 100px;

    height: 100px;

    background: deeppink;

    .juzhong;

}

3.带参数的混合

.juzhong(@w,@h,@c){

    position: absolute;

    left: ;

    right: ;

    bottom: ;

    top: ;

    margin: auto;

    width: @w;

    height: @h;

    background: @c;

}

#box1{

    .juzhong(100px,100px,pink);

    z-index: ;

}

#box2{

    .juzhong(200px,200px,deeppink);

}

4.带参数并且有默认值的混合

.juzhong(@w:100px,@h:100px,@c:pink){

    position: absolute;

    left: ;

    right: ;

    bottom: ;

    top: ;

    margin: auto;

    width: @w;

    height: @h;

    background: @c;

}

#box1{

    //默认值

    .juzhong;

    z-index: ;

}

#box2{

    .juzhong(200px,200px,deeppink);

}

5.带多个参数的混合

6.命名参数

.juzhong(@w:100px,@h:100px,@c:pink){

    position: absolute;

    left: ;

    right: ;

    bottom: ;

    top: ;

    margin: auto;

    width: @w;

    height: @h;

    background: @c;

}

#box1{

    .juzhong();

    z-index: ;

}

#box2{

    .juzhong(@h:200px;@c:deeppink;);

}

7.匹配模式

*{

    margin: ;

    padding: ;

}

/*向上的三角*/

.triangle(top,@w:10px,@c:pink){

    border-width:@w;

    border-color: transparent  transparent  @c transparent ;

    border-style:dashed dashed solid dashed  ;

}

/*向下的三角*/

.triangle(bottom,@w:10px,@c:pink){

    border-width:@w;

    border-color: @c transparent  transparent   transparent ;

    border-style:solid dashed dashed  dashed  ;

}

/*向左的三角*/

.triangle(left,@w:10px,@c:pink){

    border-width:@w;

    border-color:  transparent @c  transparent   transparent ;

    border-style: dashed solid dashed  dashed  ;

}

/*向右的三角*/

.triangle(right,@w:10px,@c:pink){

    border-width:@w;

    border-color:  transparent   transparent   transparent @c;

    border-style: dashed  dashed  dashed  solid;

}

.triangle(@_,@w:10px,@c:pink){

    width: ;

    height: ;

    overflow: hidden;

}

#sanjiao{

    .triangle(top,50px,deeppink);

}

#sanjiao2{

    .triangle(bottom);

}

#sanjiao3{

    .triangle(left);

}

#sanjiao4{

    .triangle(right);

}

8.arguments变量

*{

    margin: ;

    padding: ;

}

.border(@w:10px,@style:solid,@c:deeppink){

    border: @arguments;

}

#wrap{

    width: 200px;

    height: 200px;

    background: pink;

    .border();

}

###less运算
在less中可以进行加减乘除的运算

#wrap{

    width:@w *  ;

    height: 200px;

    background: pink;

}

###less避免编译

*{

    margin: ;

    padding: ;

}

#wrap{

    width:~"calc(200px + 700px)";

}

###less继承

.juzhong(@w:100px,@h:100px,@c:pink){

    &:extend(.common all);

    width: @w;

    height: @h;

    background: @c;

}

#wrap{

    position: relative;

    margin:  auto;

    width: 400px;

    height: 600px;

    border: 1px solid;

}

#box1{

    .juzhong();

    z-index: ;

}

#box2{

    .juzhong(@h:200px;@c:deeppink;);

}

性能比混合高

灵活度比混合低

css----less预处理器的更多相关文章

  1. 前端知识体系之CSS及其预处理器SASS/LESS

    如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子: body ...

  2. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  3. 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  4. css的一种预处理器 sass

    之前觉得关于css什么的没什么,后来让别人给问住了...然后就悲催了... sass是一种css的预处理器,是一种函数式的css的编程: 主要还是看官网 http://www.w3cplus.com/ ...

  5. 详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    [大伽说]如何运维千台云服务器 »   CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...

  6. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  7. 20190421-那些年使用过的CSS预处理器（CSS Preprocessor）

    写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...

  8. 三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  9. css预处理器和后处理器

    因为我是前端刚入门,昨天看了一个大神写的的初级前端需要掌握的知识,然后我就开始一一搜索,下面是我对css预处理器和后处理器的搜索结果,一是和大家分享下这方面的知识,另一方面方便自己以后翻阅.所以感兴趣 ...

  10. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

随机推荐

  1. 3-Windows-CMD启动mysql服务-连接本地mysql服务-连接远程mysql服务

    转自: https://jingyan.baidu.com/article/84b4f565b77a5660f6da32d4.html 备注: 如果在连接远程mysql服务,无法连接时,可能是远程my ...

  2. locust性能测试框架随笔

    现在有很多的性能测试工具,比如说我们熟悉的loadrunner.jmeter.ab.webbench等等,这些工具如果对一个没用过的朋友来说,学习起来比较不容易,但是如果你能看懂python代码,会写 ...

  3. 微信小程序中实现左右滑动图片翻页

    页面代码 <swiper class="container" indicator-dots="{{indicatordots}}" autoplay=&q ...

  4. C++与JAVA语言区别

            转载自:http://www.cnblogs.com/cnryb/archive/2011/01/04/2004141.html "作为一名C++程序员,我们早已掌握了面向对 ...

  5. Vue.js 复选框

    demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 引用opencv异常

    1.异常AttributeError: module 'cv2.cv2' has no attribute 'xfeatures2d' 原因:**3.X以后OpenCv只包含部分内容,需要神经网络或者 ...

  7. 使用vue-cli脚手架和vue-router搭建项目（一）

    之前做的项目一直比较简单,并没有引入整个路由库.今天准备练习下

  8. leetcode-回溯③

    题77 回溯: class Solution: def combine(self, n: int, k: int) -> List[List[int]]: res = [] def backtr ...

  9. python 实现九九乘法表

    代码如下: # for九九表 for i in range(1,10): for j in range(1,10): if j<=i: print('{}*{}={}'.format(i,j,i ...

  10. 使用jQuery函数

    1选择器 1.1说明 选择器本身只是一个有特定语法规则的字符串, 没有实质用处,它的基本语法规则使用的就是CSS的选择器语法, 并对基进行了扩展,只有调用$(), 并将选择器作为参数传入才能起作用. ...