zoukankan      html  css  js  c++  java
  • less学习笔记三

    1、嵌套规则

    Less使用嵌套规则来代替或者结合css的级联样式

    <section class="section-nested">
        <h2 class="h-nested">this is a nested head</h2>
        <article class="article-nested">
         this is a nested article.
        </article>
    </section>
        
    .section-nested{color:@light-blue;}
    .section-nested .h-nested{font-size:16px;}
    .section-nested .article-nested{background-color:@nice-blue;}

    Less中嵌套写法如下,更加简洁,并且能模仿出HTML中的结构。

    .section-nested{
        color:@light-blue;
        .h-nested{
                font-size:16px;
            }
        .article-nested{
                background-color:@nice-blue;
            }
    }                

    可以使用这种方法将伪选择器绑定到混合类中,如下典型的clearfix

    .clearfix {
      display: block;
      zoom: 1;
    
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

    &代表当前选择器的父级。

    2、嵌套指令和冒泡

    指令media或者keyframe等可以使用选择器一样嵌套方式。指令放在上面,作用于同一规则集合中的其他元素的相关命令保持不变,这就是冒泡的含义。

    条件指令例如@Media, @supports @document同样可以有选择器复制在它们的内容体中。

    .section-nested{
        @media screen{
            color:green;
            @media(min-768px){
                .h-nested{color:red;}
            }
        }
        @media tv{
            color:black;
        }
    }
    /**outputs**/
    @media screen {
      .section-nested {
        color: green;
      }
    }
    @media screen and (min- 768px) {
      .section-nested .h-nested {
        color: red;
      }
    }
    @media tv {
      .section-nested {
        color: black;
      }
    }

    其余的非条件指令例如 font-face或keyframes,同样可以冒泡,内容体不发生改变。

    .meng{
        color:yellow;
        @font-face{
            src:made-up-url;
        }
        padding:2px;
    }
    
    /**outputs**/
    .meng {
      color: yellow;
      padding: 2px;
    }
    @font-face {
      src: made-up-url;
    }

    3、运算

    数学运算+, -, *, / 可在任何数字,颜色或变量中应用。可能的话,数学运算会把单位考虑进去,在加、减或者比较之前转化成数字。结果中会使用运算表达式中最左边明确规定的单位类型。如果转换不能实现或者没有意义,单位会被忽略。不能转换的例子:px to cm or rad to %.

    // numbers are converted into the same units
    @conversion-1: 5cm + 10mm; // result is 6cm
    @conversion-2: 5 - 3cm - 5mm; // result is 1.5cm,第一个5没有单位,结果使用的是最左边第一次出现的单位cm,5mm也被转换为0.5cm来参与运算
    
    // conversion is impossible
    @incompatible-units: 5 + 5px - 1mm; // result is 6.22047244px
    
    // example with variables
    @base: 5%;
    @filler: @base * 2; // result is 10%
    @other: @base + @filler; // result is 15%
    
    .conversion{
        @conversion-1;
        height:@conversion-2;
        margin:@base @filler @other;
        padding:@incompatible-units;
    }
    /**outputs*/
    .conversion {
         6cm;
        height: 1.5cm;
        margin: 5% 10% 15%;
        padding: 6.22047244px;
    }

    乘法和除法运算时不会转换数字。多数情况下做乘除法时没有意义的,一个长度乘以另一个长度,得到一个面积,css不支持制定的面积样式。

    less会在数字上做运算,并把明确规定的单位赋值给结果。

    @multiply: 1cm * 3mm; // result is 3cm
    .conversion{
        @conversion-1;
        height:@conversion-2;
        margin:@base @filler @other;
        padding:@incompatible-units;
        border:@multiply solid black;
    }
    /**outputs**/
    .conversion {
         6cm;
        height: 1.5cm;
        margin: 5% 10% 15%;
        padding: 6.22047244px;
        border: 3cm solid black;
    }

    颜色colors会被分割为红,绿,蓝,透明度四个维度。运算时在每一个维度单独进行计算。

    例如,用户对两个颜色做加法运算,结果中的绿色维度等于输入颜色的绿色维度数据之和。用户用一个数字乘以颜色数据,每一个颜色维度的数据都得以与之相乘。

    颜色的运算经常会产生不合法的数据。如果某个颜色数据的结果大于ff或者小于00,此数据将会四舍五入为ff或00.如果透明度的运算结果大于1.0或者小于0.0,它也会四舍五入为1.0或0.0.

    @color1: #224488 / 2; //results in #112244
    @color2: #112244 + #111; // result is #223355
    @color3: #fff+#555;
    .conversion{
        color:@color1;
        background-color:@color2;
        border-color:@color3;
    }
    
    /**outputs**/
    .conversion {
        color: #112244;
        background-color: #223355;
        border-color: #ffffff;
    }

    4、Escaping,转义,允许你使用任意字符作为变量或属性的值

    5、Function,函数

    Less提供了各种各样的函数,用来转换颜色,操纵字符和做数据运算。函数参考中有相关的文档。

    @basecolor: #f04615;
    @ 0.5;
    
    .conversion {
       percentage(@width); // returns `50%`
      color: saturate(@basecolor, 5%);
      background-color: spin(lighten(@basecolor, 25%), 8);
    }
    
    /**outputs**/
    .conversion {
         50%;
        color: #f6430f;
        background-color: #f8b38d;
    }

    6、Scope 变量范围,变量和混合类首先在本地查找,找不到时编译器会在它的父级范围内查找。

    @var: red;
    
    header {
      @var: white;
      h1 {
        color: @var; // white
      }
    }
    
    /**outputs**/
    .header {
        color: #6c94be;
    }
    header h1 {
        color: white;
    }

    变量和混合类不需要在它被使用之前定义,也可以在被引用之后定义,上面等价于

    @var: red;
    
    header {
    
      h1 {
        color: @var; // white
      }
      @var: white;
    }

    这是一种懒加载的处理方式:变量是懒加载的,不需要在被引用之前定义。

    一个变量被定义多次时,从当前范围中向上查找,最后一个定义的将被使用。

    @var: red;
    
    header {
      @var: white;
      h1 {
        @var:blue;
        color: @var;
      }
      @var:yellow;
    }
    /**outputs**/
    
    header h1 {
        color: blue;
    }
  • 相关阅读:
    第一节:SpringMVC概述
    SpringMVC【目录】
    Windows 系统快速查看文件MD5
    (error) ERR wrong number of arguments for 'hmset' command
    hive使用遇到的问题 cannot recognize input
    Overleaf支持的部分中文字体预览
    Understanding and Improving Fast Adversarial Training
    Django2实战示例 第十三章 上线
    Django2实战示例 第十二章 创建API
    Django2实战示例 第十一章 渲染和缓存课程内容
  • 原文地址:https://www.cnblogs.com/Youngly/p/6803009.html
Copyright © 2011-2022 走看看