css之less学习笔记


1.1.less介绍:less将css动态化,比如具有变亮,继承,运算,函数。less可以运行在客户端(支持IE6),也可以借助Node.js或者Rhino在服务器端运行。

(本人为目前接触过Rhino)。


2.1变量。变量支持单独定义通用样式,在需要的时候调用,在全局样式调整的时候只需要修改几行代码。

  例如:

        @color:red;

        #header{ color: @color; }

        h2{ color: @color; }

     以上三行代码等价于:

       #header{ color:red; }

       h2{ color: red; }


2.2混合.混合可以将定义好的一个class A已入到另一个 class B中,从而实现B继承A的所有属性。还可以带参数调用。

 例如:

     .rounded-corners (@radius: 5px) {

               border-radius: @radius;

               -webkit-border-radius: @radius;

               -moz-border-radius: @radisu;

                }

        #header{ .rounded-corners; } 

         #footer{ .rounded-corners; }

          以上代码等价于:

          #header{

                border-radius: 5px;

               -webkit-border-radius: 5px;

               -moz-border-radius: 5px;

              }

         ..............;

2.3嵌套规则。在一个选择器中嵌套另一个选择器来实现继承,大大减少代码量。

  例如:

     #header{

             h1{

                        font-size: 28px;

                        color: red;      

                }

               p{

                           font-size: 26px;

                           a{

                                        text-decoration: none;     

                                        &:hover{

                                                         border-radius: 4px;                                       

                                                         }                 

                                   }

                         }

                  }

以上代码等价于:

    #header h1{ font-size: 28px; color: red; }

    #header p{ font-size: 256px; }

    #header p a { text-decoration: none;  }

    #header p a:hover{ border-radius: 4px; }











评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值