zoukankan      html  css  js  c++  java
  • less

     1 /*定义变量*/
     2 @rColor: red;
     3 @gColor: purple;
     4 @bFSize: 100px;
     5 
     6 .box1{
     7   color: @rColor;
     8   font-size: @bFSize;
     9 }
    10 
    11 .box2{
    12   color: @gColor;
    13   font-size: @bFSize;
    14 }
     1 @rColor: red;
     2 @bWith: 200px;
     3 
     4 .box{
     5   background-color: @rColor;
     6    @bWith;
     7   height: @bWith + 100;
     8   h1{
     9      color: green;
    10   }
    11   div{
    12      @bWith / 2;
    13     height: @bWith / 1.5;
    14     background-color: deepskyblue;
    15     h2{
    16       color: goldenrod;
    17     }
    18   }
    19 }
     1 @w: 300px;
     2 @h: 50px;
     3 
     4 h1, h2{
     5   border: 1px solid #000;
     6 }
     7 
     8 h1{
     9    @w - 100;
    10   height: @h + 100;
    11 }
    12 
    13 h2{
    14    @w / 3;
    15   height: @h * 3;
    16 }
     1 .yuanJiao(@radius: 20px, @rotate: 0){
     2    border-radius: @radius;
     3    transform: rotate(@rotate);
     4 }
     5 
     6 .box1, .box2{
     7    200px;
     8   height: 200px;
     9   margin: 10px;
    10 }
    11 
    12 .box1{
    13   background-color: green;
    14   .yuanJiao();
    15 }
    16 
    17 .box2{
    18   background-color: red;
    19   .yuanJiao(60px, 120deg);
    20 }

    http://lesscss.cn/ 上编写了一些函数

     1 .radius(leftTop, @w: 30px){
     2     border-top-left-radius: @w;
     3 }
     4 
     5 .radius(rightTop, @w: 30px){
     6   border-top-right-radius: @w;
     7 }
     8 
     9 .radius(leftBottom, @w: 30px){
    10   border-bottom-left-radius: @w;
    11 }
    12 
    13 .radius(rightBottom, @w: 30px){
    14   border-bottom-right-radius: @w;
    15 }
    16 
    17 .radius(@w: 30px){
    18   border-radius: @w;
    19 }
    20 
    21 
    22 div{
    23    200px;
    24   height: 200px;
    25   margin: 20px;
    26 }
    27 
    28 // .box1{
    29 //   background-color: red;
    30 //   .radius(leftTop);
    31 // }
    32 .box1{
    33   background-color: red;
    34   .radius(leftTop, 100px);
    35 }
    36 
    37 .box2{
    38   background-color: green;
    39   .radius(rightBottom, 100px);
    40 }
    41 
    42 .box3{
    43   background-color: blue;
    44   .radius(leftBottom, 100px);
    45 }
    46 
    47 .box4{
    48   background-color: purple;
    49   .radius(rightBottom, 100px);
    50 }
    1 @import "pipei";
    2 @import "hunhe";
    3 @import "hanshus";
    4 // 引入
    5 @import "qiantao";
    6 /*hhhhhh*/
    7 @import "yunsuan";
  • 相关阅读:
    原生js实现简单的全屏滚动
    原生拖拽js利用localstorage保存位置
    vue组件利用formdata图片预览以及上传
    手机端原生js实现下拉刷新数据
    读啥技术服务支持
    涂鸦壁纸技术服务支持
    JAVA基础面试题
    JAVA编程入门
    DOS常用命令及进制转换
    JS基础(事件的绑定)
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11179114.html
Copyright © 2011-2022 走看看