less学习

最新推荐文章于 2024-09-14 17:04:32 发布

niuyueyang

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量134

点赞数

分类专栏： less 文章标签： less

本文链接：https://blog.csdn.net/qq_33332184/article/details/90405103

版权

less 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

@width:300px;
@color:#222;
@bgColor:skyblue;
@mySelector:#app;
@bd:border-style;
@mySelector1:input;
@Rules:{
  height: 100px;
  background-color: #333;
}
@import './main.less';
//变量
#wrap{
  color:@color;
  background-color: @bgColor;
}

//选择器
@{mySelector}{
  @{bd}:1px solid #333;
}

//嵌套
//& ：代表的上一层选择器的名字，此例便是header
#header{
  .title{
    color: #333;
  }
  &_content{
    background-color: aqua;
  }
  &:after{
    font-family: "Adobe Arabic";
  }
}

//媒体查询
//唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。
#main{
  @media screen{
    @media(max-width:768px){
      width:100px
    }
  }
}

//定义自己的私有样式
#main{
  &.show{
    display: block;
  }
}
.show{
  display: none;
}

//无参数方法
//`.` 与 `#` 皆可作为 方法前缀。
.card { // 等价于 .card()
  background: #f6f6f6;
  -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
  box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#app{
  .card;
}

//有参数
.border(@a:10px,@b:50px,@c:30px,@color:#000){
  border:solid 1px @color;
  box-shadow: @arguments;//指代的是 全部参数
}
#main{
  .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
  .border(0px);
}
#content{
  .border;//等价于 .border()
}

#card(){
  background-color: red;
  .d(@w:300px){
    width: @w;
    #a(@h:300px){
      height: @h;
      width:@w;
    }
  }
}

#wrap{
  #card;
  .d();
  #a(100px);
}
#main{
  #card .d()
}
#con{
  //不得单独使用命名空间的方法
  //.d() 如果前面没有引入命名空间 #card ，将会报错

  #card; // 等价于 #card();
  .d(20px); //必须先引入 #card
}

//js to css
@content:~'`"aaa".toUpperCase()`';
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"Math.round(Math.random() * 100) px";
  &:after{
    content:@content;
  }
  height: ~"`window.innerHeight` px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}