less

目录

• less 语法
• 偷懒式 页面放大缩小两套样式
• 滚动条
• 渐变线性按钮
• base.less(不完整)
• 彩色文字
• less - @imgUrl
• nth-child(2)

彩色文字

span{
    color: transparent;
    background-image: linear-gradient(135deg, deeppink, dodgerblue);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -moz-box-decoration-break: clone;
  }

less - @imgUrl

color:@HFFFFFF;.FNBackground(@url:'@{img}/index/bgIndex.png',@c:@H231F3C);

nth-child(2)

&:nth-child(2){
  transform:scale(1.1);
}

less 语法

when
.px(@name, @px) when not (@name=font-size){ @{name}:@px * @scale * 1px;}
.px(@name, @px) when (@name=font-size){ @{name}:@px * @scale;}

偷懒式

• 页面放大缩小两套样式

   .funcLess(@scale:1){.......px*@scale}
   @media screen and (min-width: 1441px){
       .funcLess()
   }
   @media screen and (max-width: 1440px){
       .funcLess(@scale:0.8)
   }

滚动条

&::-webkit-scrollbar {display: none;}
overflow: -moz-scrollbars-none;

[学习来源_用css修改scroll样式](https://blog.csdn.net/Wz1135640/article/details/79025364)

渐变线性按钮

padding:1px;border: none;
border-radius: 4px;
background-clip: content-box,padding-box;
background-image: -o-linear-gradient(#fff,#fff),-o-linear-gradient(312deg, rgba(0,125,255,1), rgba(95,0,232,1));
background-image: linear-gradient(#fff,#fff),linear-gradient(138deg, rgba(0,125,255,1), rgba(95,0,232,1));

base.less

// COLOR
  @HE1E2E6:#E1E2E6; // border颜色
  @H8656C6:#8656C6; // main主色调
  @HC7C8CC:#C7C8CC;
  @HFFFFFF:#FFFFFF;
  @HDADCE8:#DADCE8;
  @H5F00E8:#5F00E8;
  @H007DFF:#007DFF;
  @H7C8B9C:#7C8B9C;
  @H185EFA:#185EFA;
  @HF2F3FA:#F2F3FA;
  
  // FONT_SIZE
  @F20:20;
  @F24:24;
  @F32:32;
  @F40:40;
  @F48:48;
  
  // PX2REM => (未引入px2rem 750*1334)
  // .px(width,200) .px4(padding,20,30,20,30)
  @F:200;
  .px(@name, @px){ @{name}:@px / @F * 1rem;}
  .px4(@name, @px1,@px2,@px3,@px4){ @{name}:@px1 / @F * 1rem @px2 / @F * 1rem @px3 / @F * 1rem @px4 / @F * 1rem;}
  
  // RESET
  input::-webkit-input-placeholder{color:@HC7C8CC;}
  input:-moz-placeholder{color:@HC7C8CC;}
  input::-moz-placeholder{color:@HC7C8CC;}
  input:-ms-input-placeholder{color:@HC7C8CC;}
  textarea::-webkit-input-placeholder{color:@HC7C8CC;}
  textarea:-moz-placeholder{color:@HC7C8CC;}
  textarea::-moz-placeholder{color:@HC7C8CC;}
  textarea:-ms-input-placeholder{color:@HC7C8CC;}
  input:focus, textarea:focus{outline:none;}
  
  // STYLE
  .clrMain{color:@H8656C6;}
  .clrAssist{color:@HC7C8CC;}
  .clrHint{color:#999;}
  .clrImport{color:#f00;}
  .bgPage{background:@HF2F3FA;}
  
  // STYLE CSS
  .flex{display:-webkit-box;display:-ms-flexbox;display:flex;}
  .flexItem{-webkit-box-flex:1;-ms-flex:1;flex:1}
  .boxSizing{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
  
  // FN_ADD FUNC
  .FNGradual(@c1,@c2,@dir:left){
    background:-webkit-linear-gradient(@dir, @c1, @c2); background:linear-gradient(@dir, @c1, @c2);}
  .FNTranAll(@t:0.4s){ -webkit-transition:all @t;-o-transition:all @t;transition:all @t;}
  .FNPosition(@pos:absolute,@top:50%,@left:50%,@tx:-50%,@ty:-50%){
    position:@pos;top:@top;left:@left;transform:translate(@tx, @ty);}
  .FNBackground(@url:'',@pos:center center){ background:url("@{url}") no-repeat @pos / contain;}