【前端自学(1)】Less

最新推荐文章于 2024-05-08 21:02:19 发布

原创最新推荐文章于 2024-05-08 21:02:19 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #less #前端

本文介绍Less预处理器的基础语法和特性，包括变量使用、混合方法、继承、条件判断及循环模拟等内容。

记录一下自学内容

文章目录

1 Less
2 总结

1 Less

Less是css预处理语言
vscode使用Easy Less插件之后，编译Less文件可以自动生成对应的css，注意Less里面//型注释不会在css中出现，/* */型注释会在css中出现
Less文件使用@标识公有变量，可以直接更改这些公有变量来避免大量手动更改属性，Less的变量是可运算的

//基本变量
@catimg:'../images';
@wrap:wrap;
@myselector:#wrap;

body{
  background: url('@{catimg}/cat.png')
}
@{myselector}{
  width: 20px;
  border: 1px;
} 
#@{wrap}{
  color: #ccc;
}
.@{wrap}{
  color: #ccc;
}

//声明变量
@background:{background: red;};
@Rules:{
  height: 200px;
  border: 1px green solid;
}

#main{
  @background(); //这里需要()调用
}
#wrap{
  @Rules();
}

//运算
@width:300px;
@color:#222;

#wrap{
  margin: (@width - 20)*5; //注意width和减号之间加上空格
  color: @color + #111;
}

//用变量定义变量 变量作用域 就近原则
@var:@a;
@a:100%;
#wrap{
  @a:10%; 
  width: @a; //这里是10%而不是100%
}

Less的嵌套和&

//嵌套和&的使用 &指代上一级目录
.main{
  width: 300px;
  height: 200px;
  .list{
    background-color: aliceblue;
    border-radius: 3px;
  }
  & #area{
    text-align: center;
  }
}

//css3媒体查询 less直接通过嵌套在元素内写出对应的width
#main{
  @media screen{
    @media (max-width:500px){
      width: 100px;
    }
  }
  @media tv {
    width: 2000px; //注意tv在css3已废弃
  }
}

Less中可以使用混合方法，注意方法前一定带上.或者#

//无参数方法
.Rules(){
  height: 200px;
  border: 1px green solid;
}//建议加上括号 以防混淆

#wrap{
  .Rules();//建议加上括号 以防混淆
}

//默认参数方法
.border(@a:10px,@b:50px,@c:10px,@color:#231){
  border: solid 1px @color;
  box-shadow: @arguments; //括号内的全部参数
}

.wrap2{
  .border();
}

//方法匹配，使用占位符@_
.test(right,@width:20px,@color:#000){
  border-color: transparent @color transparent transparent;
}

.test(left,@width:20px,@color:#000){ //这一项会被匹配
  border-color: transparent transparent transparent @color; 
}

.test(@_,@width:20px,@color:#000){ //这一项会被合并
  border-style: solid;
  border: @width;
}

.main{
  .test(left,50px,#999);
}

Less具有命名空间

//命名空间
#card(){ //方法可以是.也可以是#
  background: #732;
  .d(@w:300px){
    width: @w;
    #a(@h:300px){
      height: @h;
    }
  }
}

#warp{
  #card > .d > #a(100px);
  #card; //一定要先声明，且父方法不能加()
  .d(200px);
}

//less里面的判断
#card(){//这是一个命名空间
  //when and 相当于&&
  .border(@width,@color,@style) when (@width>100px) and (@color=#999){
    border: @style @color @width;
  }

  //when not 相当于!
  .background(@color) when not (@color >= #222){
    color: @color;
  }

  //when , 相当于||
  .font(@size:20px) when (@size<50px) , (@size>100px){
    font-size: @size;
  }
}

.main{
  #card > .border(200px,#999,solid);
  #card > .background(#111);
  #card > .font(40px) // 如果是#card > .font()直接为默认值20px
}

Less可以使用…和 !important

//类似es6的省略 可使用!important将优先级提到最高
.boxshadow(...){
  box-shadow: @arguments;
}
.textshadow(@a,...){
  text-shadow: @arguments;
}
.box{
  .boxshadow(1px,4px,30px,red)!important;
  .textshadow(1px,4px,30px,red); //两句输出一致
}

Less里面没有for循环，所以用递归充当for循环

//less用递归模拟for循环
.generate(@n,@i:1) when (@i<=@n){
  .column-@{i}{
    width: (@i*100%/@n);
  }
  .generate(@n,(@i+1)); //递归
}
.generate(4);

Less可以拼接属性

//拼接,和空格 
//css属性里面逗号代表先后执行->前面样式不存在了再执行后面的(即同一种类)
//css属性里面空格代表这些样式同时存在(即不同种类)
.box(){
  border-radius+: 10%;//+用来进行,拼接
  transform+_: scale(2);//+_用来拼接空格
}

#main{
  .box();
  border-radius+: 20%;//拼接 相当于在属性里加,
  transform+_: rotate(25deg);//拼接 相当于在属性里加空格
}

Less可以使用extend继承

//Less继承
.animation{
  transition: all;
  .hide{
    transform: scale(0);
  }
  :hover{
    background-color: red;
  }
}
#con{
  &:extend(.animation .hide); //只继承了hide
}
#con2{
  &:extend(.animation all); //继承animation里面的全部属性
}
#con3{
  &:extend(.animation); //只继承了transition属性
}

//继承是比较麻烦的写法，一般还是运用上面提到的那些混合方法
.animation(){
//再次注意，如果上面的animation没有加(),css文件会多一个animation对象
  transition: all;
  .hide{
    transform: scale(0);
  }
}

#main{
  .animation()//效果和继承all一样
}

Less导入相关

//某个less文件下
//导入别的less
@import 'antd';
//导入别的less且不对其编译
@import (reference) 'bootstrap';
//导入别的less且设置该less文件只能被导入一次
@import (once) 'foo';
//导入别的less且设置该less文件能被导入多次
@import (multiple) 'nav';
@import (multiple) 'nav';