zoukankan      html  css  js  c++  java
  • less 的几个规则

    1.变量的延迟加载

    @var: 0;
    .class {
        @var: 1;
        .brass {
            @var: 2;
            three: @var;// 3less延迟加载,先读取完在加载
            @var: 3;
        }
        one: @var;// 1
    }

    2.混合  就是将一系列属性从一个规则集引入到另一个规则集的方式

      变量使用@定义

    .yanse(B, @w: 10px, @c: red) {/* 可以传递形参,还可以设置默认值 :后面为默认值 */
        color: pink;
       @w;
       height: 200px; }
    .yanse(A, @w: 10px, @c: red) {/* 可以传递形参,还可以设置默认值 :后面为默认值 */
        color: pink;
       @w;
       height: 100px; }
    .inner { 
      .yanse(A, 100px, color: pink); // 第一个参数传递A的时候用的就是.yanse里面A的那一个
    }
    .inner2
    {
      .yanse(B, 200px);/*设置宽度,颜色使用默认值*/
    }
    .inner3 {
       .yanse(A, @c: black);/*高度默认值,设置第二个颜色为black*/
    }

    3.计算

    div {
        width: (100 + 100px);/*最终width是200px 只要有一个写单位就可以了*/
    }

    4.继承  继承被附在选择器后面或放置在规则集,它看起来就像一个在关键字extend后具有可选参数的伪类

    .p{
        span{
            color:red
        }
    }
    .subClassOne{
        color: blue;
        &:extend(.p span);/*继承可以嵌套*/
    }
    /*最终编译为*/
    .p span,.subClassOne {
        color: red;
    }
    
    /*被继承的选择器写在后面*/
    .subClassOne{
        color: blue;
        &:extend(.p span);
    }
    .p{
        span{
            color:red
        }
    }
    /*最终编译为*/
    .p span,.subClassOne {
        color: blue;
    }

      继承与混合区别

        继承性能比混合高

        灵活度比混合低

    5.避免编译

    /*~""波浪号双引号是不让less编译 因为浏览器自己可以编译cacl表达式*/
    
    div {
        width: (100 + 100px);
        padding: cacl(100px + 100);
    }
    /*编译成*/
    div {
        width: (100 + 100px);
        padding: 200px;
    }
    /*不让less编译*/
    div {
        width: (100 + 100px);
        padding: ~"cacl(100px + 100)";
    }
    /*编译成*/
    div {
        width: (100 + 100px);
        padding: cacl(100px + 100);
    }
  • 相关阅读:
    万网免费主机wordpress快速建站教程-域名绑定及备案
    java小算法—大衍数列
    Core Data使用之一(Swift): 保存
    Swift 添加到TableView实现动画效果
    Swift 动态创建提示框
    Swift分割字符串
    Swift去除两边的特定字符(空格或其它)
    windows 属性
    String 输出{}
    c# 正则表达式的用户
  • 原文地址:https://www.cnblogs.com/zhangning187/p/lessgzzj.html
Copyright © 2011-2022 走看看