使用less(变量,混合,匹配,运算,嵌套)的方法介绍

如何使用less及一些常用的(变量,混合,匹配,运算,嵌套)

less的介绍及编译工具

什么是less

1.LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

less的编译工具

1. Koala 考拉 --编译的时候如果没有建CSS文件夹 Koala会自动给你生成一个
   如何设置语言
   
   如何编译
   -

2. 让webstorm支持less编译:

3. 安装node.js --- 这是一个包管理工具 以后还会用到

4. WIN+R

5. 输入 npm install less

6. .....

less的语法

Ps:下面的知识点会用到上面的知识点 (比如说在混合中会用到变量 加深印象^_^)

1. 注释

2. // 只在less中显示
   

3. /**/ 会在编译好的css文件中显示

4. 变量

5. less中的写法

   @ly_width:100px;
   .box {
   width:@ly_width;
   }

6. 编译后在css中显示的是

   .box {
   width:100px;
   }

7. 定义变量用@

8. 混合

9. 解决border-radius兼容

   .border_radius (@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   -ms-border-radius: @radius;
   -o-border-radius: @radius;
   border-radius: @radius;
   }

10. less中的写法

    @ly_width:100px;
    @ly_height:200px;
    @ly_color:green;
    .border(@border_width:3px;) {
    border:@border_width solid red;
    }
    .one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border();
    }

11. 编译后在css中显示的是

    .one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 3px solid #ff0000;
    }

12. less中的写法

    @ly_width:100px;
    @ly_height:200px;
    @ly_color:green;
    .border(@border_width) {
    border:@border_width solid red;
    }
    .one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border(1px);
    }

13. 编译后在css中显示的是

    .one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 1px solid #ff0000;
    }

14. 先上less中的代码 如果想在.one中应用.border的样式怎么办?

    @ly_width:100px;
    @ly_height:200px;
    @ly_color:green;
    .border {
    border:1px solid red;
    }
    .one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    }

15. 写成下面的样子

    @ly_width:100px;
    @ly_height:200px;
    @ly_color:green;
    .border {
    border:1px solid red;
    }
    .one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border;
    }

16. 编译后在css中显示的是
    .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

17. 不带参数的混合

18. 带参数的混合---不带默认值 (可以传多个参数,以逗号或者分号隔开,推荐用分号 下面以一个参数为例)

19. 带参数的混合---带默认值 (可以传多个参数 下面以一个参数为例)

20. 在解决css3兼容性时候经常用到

21. 匹配模式

22. less中的写法

    //定义上,下,左,右边框的样式
    .border(top;@border_width:5px;@border_color:red){
    border-top:@border_width solid @border_color;
    }
    .border(bottom;@border_width:5px;@border_color:red){
    border-bottom:@border_width solid @border_color;
    }
    .border(left;@border_width:5px;@border_color:red){
    border-left:@border_width solid @border_color;
    }
    .border(right;@border_width:5px;@border_color:red){
    border-right:@border_width solid @border_color;
    }
    //如果想写通用的样式 可以在下面的代码中写 格式是固定的 
    .border(@_,@border_width:5px;@border_color:red){
    border-color:yellow;
    }
    .border_use1 {
    //选择和if差不多 如果是left就调用上面对应的
    .border(left);
    }
    .border_use2 {
    //选择和if差不多 如果是right就调用上面对应的
    .border(right);
    }

23. 编译后在css中显示的是

    .border_use1 {
    border-left:5px solid #ff0000;
    border-color:yellow;
    }
    .border_use2 {
    border-right:5px solid #ff0000;
    border-color:yellow;
    }

24. 可以理解成if 和上面的混合有些相似

25. 运算

26. less中的写法

    @ly_width:100px;
    .one {
    width:@ly_widht + 100;
    }

27. 编译后在css中显示的是

    .one {
    width:200px;
    }

28. 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算...

29. 嵌套

30. html结构

    <p class="one">
    <p class="two"></p>
    </p>

31. less中的写法

    @ly_width:100px;
    @ly_height:200px;
    @ly_color:red;
    .one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .two {
     background-color: green;
    }
    }

32. 编译后在css中显示的是

    .one {
    width: 100px;
    height: 200px;
    background-color: #ff0000;
    }
    .one .two {
     background-color: green;
    }

33. 可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性

34. @arguments变量

35. less中的写法

    //和前面提到的混合一起举个栗子 
    .border(@border_width;@border_style;@border_color){
    border:@arguments;
    }
    .one {
    .border(1px;solid;red);
    }

36. 编译后在css中显示的是

    .one {
    border:1px solid #ff0000;
    }

37. 可以包含所有的变量,将变量一起处理