less

   

  1.   Less和CSS的区别  

       HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。
      LESS是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。
    使用LESS基本上按照这样的步骤：编写LESS代码，使用NODE、JS或者是其他的工具把编写的LESS代码编译成我们平时看到的CSS代码(因为浏览器是无法解析LESS的语法的，所以编写完成的LESS代 码需要进行编译)。Less叫做预编译css,写好的less代码浏览器是不能直接渲染的，需要我们把它编译成为能渲染的css才可以。

  2.由于每一次加载页面都需要导入LESS插件，并且把LESS文件重新编译为CSS，很消耗性能，导致页面打开速度变慢。所以在生产环境中，我们需要事前把LESS文件编译为正常的CSS后，在相应文件中引入，以后用户访问的都是编译好的CSS，为不是拿LESS现编译的。生产环境下，我们需要事先把LESS编译成CSS方法：

1)使用Node编译这种方式是目前项目中最常用的方式,它是把我们的LESS文件编译成CSS文件，我们项目中直接的引入CSS文件即可

(2) 把LESS模块安装到全局NODE环境中

(3) 使用命令进行编译

   

   3.Less的基本语法

         less中的变量使用@。

                    

 1 //用变量存储公用的属性值
 2 @shadowColor: #000;
 3 .inner {
 4     box-shadow: 0 0 10px 0 @shadowColor;
 5 }
 6 
 7 
 8     @selector: box;
 9     @bgImg: "../img";
10     @property: color;
11     @name: "fung";
12     
13     //->LESS代码
14     .@{selector} {
15         width: 100px;
16         height: 100px;
17         @{property}: #000;
18         background: url("@{bgImg}/test.png");
19 
20         &:after {
21             display: block;
22             content: @@var;
23         }     混合(Mixins)

        所谓的混合其实是把某个选择器中的样式拷贝一份拿过来使用

                   

 1 //->LESS代码
 2 .public {
 3     width: 100px;
 4     height: 100px;
 5 }
 6 
 7 nav ul {
 8     .public;
 9     list-style: none;
10 }
11 
12 //->编译为CSS的结果
13 .public {
14     width: 100px;
15     height: 100px;
16 }
17 
18 nav ul {
19     width: 100px;
20     height: 100px;
21     list-style: none;
22 }

      带参数混合   

.border-radious(@radious) {
    border-radius: @radious;
    -moz-border-radius: @radious;
    -webkit-border-radius: @radious;
}

#header {
    .border-radious(4px);
}

.button {
    .border-radious(6px);
}

       给参数设置默认值

     

 1 .border-radious(@radious) {
 2     border-radius: @radious;
 3     -moz-border-radius: @radious;
 4     -webkit-border-radius: @radious;
 5 }
 6 
 7 #header {
 8     .border-radious(4px);
 9 }
10 
11 .button {
12     .border-radious(6px);
13 }

 

    模式匹配

  

.mixin(dark, @color) { // 这里前面没有带@所以可以作为标识
    color: darken(@color, 10%);
}
 
.mixin(light, @color) { // 只接受light为首参
    color: lighten(@color, 10%);
}
 
.mixin(@_, @color) { // 接受任意值
    display: block;
}
 
// 使用
@switch: light;
 
.class {
    .mixin(@switch, #888);
}
 

.class {
    color: #a2a2a2;
    display: block;
}

 

           嵌套

#header {

    color: black;

    .navigation {
        font-size: 12px;
    }

    .logo {
        width: 300px;
        &:hover {
            text-decoration: none;
        }
    }

}

 

 

 

        

 

posted @ 2019-07-25 17:10  啊啊啊于远文  阅读(546)  评论(0)  编辑  收藏  举报