• less实用语法


    一. 变量

     1 @ 10px;
     2 @height: @width + 10px;//带单位的加减, 以运算符左边单位为主
     3 
     4 #header {
     5    @width;
     6   height: @height;
     7 }
     8 编译为
     9 #header {
    10    10px;
    11   height: 20px;
    12 }

    二. 代码片段(混合) 

    .center(@type:absolute){//定义代码片段center,其中()可以不带;带()表示是代码片段, 不生成最终代码, 而不带表示class, 会生成代码
      position: @type;//参数可以多个
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    
    .wrapper{
      position: relative;
      height: 300px;
       300px;
      background: red;
      .inner{
         100px;
        height: 100px;
        background: yellow;
        .center();//执行代码片段
      }
    }

    3 映射: 从代码片段中获取某个属性

    1 #color(){
    2   danger: red;
    3   success: yellow
    4 }
    5 .wrapper{
    6   position: relative;
    7   height: 300px;
    8    300px;
    9   background: #color()[danger];
    }

    4嵌套时候 &表示父级   >表示直接子元素

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

    .a { li {
    &.demo { color: red } } }

    5 转义~: 字符串作为属性值或变量值时候, 要用转义;

    6函数:

    (1). if(condition, result1, result2)

     1 @some: foo;
     2 
     3 div {
     4     margin: if((2 > 1), 0, 3px);
     5     color:  if((iscolor(@some)), @some, black);
     6 }
     7 //Result:
     8 
     9 div {
    10     margin: 0;
    11     color:  black;
    12 }

    (2)darken(颜色, 百分百) lighten()

     1 // 颜色加深案例
     2 
     3 .color(){ //定义很多颜色主题
     4   red: #f40;
     5   green: green;
     6 }
     7 
     8 @color: .color()[red]; // 确定当前主题
     9 
    10 div{
    11   .size();
    12   margin:10px;
    13 }
    14 .demo1{
    15   background: @color;
    16 }
    17 .demo2{
    18   background: darken(@color,10%); //不断加深
    19 }
    20 .demo3{
    21   background: darken(@color,20%);//不断加深
    22 }
  • 相关阅读:
    数据结构C语言实现----折半查找
    数据结构C语言实现----顺序查找
    数据结构C语言实现----图
    数据结构C语言实现----树
    数据结构C语言实现----循环队列
    数据结构C语言实现----销毁一个队列
    数据结构C语言实现----出队伍操作
    数据结构C语言实现----入队列操作
    数据结构C语言实现----创建一个队列
    数据结构C语言实现----栈的实例
  • 原文地址:https://www.cnblogs.com/dangdanghepingping/p/14467936.html
Copyright © 2020-2023  润新知