less的基本使用_代码007(未授权)

本文介绍: 定义同一变量名称（名字）两次或多次后，less只会选择最后定义的！@bg–img : “路径1″;@bg–img : “路径2″;@bg–i m g : “路径3″;header {} // 结果为：background : url(“路径3″);

语法：@变量名: 值;

less:

// 1. 定义变量(全局变量)
@bgColor:white;
@Height:50rpx;
.contain{
    background-color: @bgColor;
 
}
.row{
    height:@Height;
    margin-left:@Height;
}

编译后的css:

.contain {
  background-color: white;
}
.row {
  height: 50rpx;
  margin-left: 50rpx;
}

注意：
最好尽量用全局变量，避免无法复用！
比如我写变量@Height:50rpx;在contain{}里面，而row{}里面的@Height变量不存在，导致出错，这是叫局部变量。

语法：@变量名: 属性名;

// 定义变量（属性名）
@bg-img:background-image;

div{
  @{bg-img}:路径;
}

div {
  background-image: 路径;
}

//定义类名
@demo:newClass;

.@{demo}-new{ // "-new"在类名基础上，新的类名 newClass-new
   @bg:rgb(0,0,0);
   background:@bg;
}
//div使用此类名
<div class="newClass-new">
	<p>demo</p>
</div>

.newClass-new {
  background: rgb(0,0,0);
}

// 链接可以为任何链接*注意放置的位置
@bg-img:"路径";

header{
  background:url(@bg-img);
}

header {
  background: url("路径");
}

@bg-img:"路径1";
@bg-img:"路径2";
@bg-img:"路径3";

header{
    background:url(@bg-img);
}
//  结果为：background: url("路径3");

//1.普通混合
.bor{
    background-color: aqua;
    width: 32rpx;
}
.poop{
    color:white;
    .bor;
}

.bor {
  background-color: aqua;
  width: 32rpx;
}
.poop {
  color: white;
  background-color: aqua;
  width: 32rpx;
}

// 2.不带输出的混合
.mymix{
    color:black;
}
.mymix-echa(){//css样式中不显示
    background-color: white;
 
}
.dad{
    width: 30rpx;
    height:30rpx;
}

.mymix {
  color: black;
}
.dad {
  width: 30rpx;
  height: 30rpx;
}

//3.带选择器的混合
.father(){
    &amp;:hover{
        background-color: white;
        font-size:32px;
    }
}
 
.child{ // 编译后的类名字后面多了:hover
    .father;
}
.son{ // 编译后的类名字后面多了:hover
    .father;
}

.child:hover {
  background-color: white;
  font-size: 32px;
}
.son:hover {
  background-color: white;
  font-size: 32px;
}

// 4.带参数的混合
.son(@width){
    width:@width;
}
.dad{
    .son(300px);//需要传一个参数进去
}

.dad {
  width: 300px;
}

//5.带参数的混合默认值
.son(@width:200px){
    width:@width;
}
.dad{
    .son();
}

.dad {
  width: 200px;
}

一个组合可以带多个参数，参数之间可以使用分号或者逗号来分割。
但是建议尽量使用分号来分隔，因为这逗号可以编译为参数分割或者css为列表分割。

//6.带多个参数的混合
.mini(@color;@padding:xxx;@margin:2){
    color-1:@color;
    padding-2:@padding;
    margin-3:@margin;
}
.div{
    .mini(1,2,3;something, ele);
}

.div {
  color-1: 1, 2, 3;
  padding-2: something, ele;
  margin-3: 2;
}

//7.arguments变量
.son3(@dd1:20px;@dd2:solid;@dd3:white){
    border:@arguments;
}
.div4{
    .son3();
}

.div4 {
  border: 20px solid white;
}

//8.得到混合中变量的返回值
.ave(@x,@y){
    @ave:(@x+@y);
}
.son{
    .ave(20px,40px);
    width:@ave;
}

.son {
  width: 60px;
}

//10.嵌套规则
.contain{
  .dad{
      width:30px;
      background-color: #fff;
      .son{
          border-radius: 40px;
      }
  }  
  .dad1{
      height:300px;
      background-color: black;
  }
}

.contain .dad {
  width: 30px;
  background-color: #fff;
}
.contain .dad .son {
  border-radius: 40px;
}
.contain .dad1 {
  height: 300px;
  background-color: black;
}

//11.父元素选择器&amp;
.bgcolor{
    background: black;
    a{
        color:#fff;
        &amp;:hover{
            color:blue;
        }
    }
}

.bgcolor {
  background: black;
}
.bgcolor a {
  color: #fff;
}
.bgcolor a:hover {
  color: blue;
}

// 12.改变选择器的顺序&amp;
.contain{
    h1&amp;{
        width:200px;
        height:300px;
    }
}
 
#son{
    ul{
        li{
            .contain&{
                height:100px;
                background-color: #fff;
            }
        }
    }
}

h1.contain {
  width: 200px;
  height: 300px;
}
.contain#son ul li {
  height: 100px;
  background-color: #fff;
}

// 13.运算
.contain{
    font-size:300px+200*2;
}

.contain {
  font-size: 700px;
}

当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？此时就需要命名空间

#mynamespace() { //加 () 表示不输出到css
   .home {...}
   .user {...}
}

#bgcolor(){ // 加()默认不输出
    background: #ffffff;
    .a{
        color: #888888;
        &:hover{
            color: green;
        }
        .b{
            background: red;
        }
    }
}
.bgcolor1{
    background: yellow;
    #bgcolor>.a;    // > 符号表示选中混合中的每一个样式
}
.bgcolor2{
    // #bgcolor>.a>.b;
    #bgcolor .a .b;  // 省略写法：将>换成空格即可
}

.bgcolor1 {
  background: yellow;
  color: #888888;
}
.bgcolor1:hover {
  color: green;
}
.bgcolor1 .b {
  background: red;
}
.bgcolor2 {
  background: red;
}

@baby:300px;

//16.引入
@import "../main"; //引入main.less文件
 
.contain-qq{
    width:@baby;
}

.contain-qq {
  width: 300px;
}

@import "main.less";
@import (reference) "main.less";  //引用LESS文件，但是不输出
@import (inline) "main.less";  //引用LESS文件，但是不进行操作
@import (once) "main.less";  //引用LESS文件，但是进行加工，只能使用一次
@import (less) "index.css";  //无论是什么格式的文件，都把它作为LESS文件操作
@import (css) "main.less";  //无论是什么格式的文件，都把它作为CSS文件操作
@import (multiple) "../main.less";  //multiple，允许引入多次相同文件名的文件
@import (multiple) "../main.less";  //multiple，允许引入多次相同文件名的文件

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

less 变量混合

目录

一、less 语法

1. 变量

1.1 基础用法

1.2 变量用作属性名

1.3 变量用作类名

1.4 变量用作链接

1.5 定义 多个变量

2. 混合

2.1 普通混合

2.2 不输出到css的混合

2.3 带选择器的混合

2.4 带参数的混合

2.5 参数有默认值的混合

2.6 多个 参数的混合

2.7 arguments变量

2.7 得到混合中的运算变量的返回值

3. 嵌套规则

3.1 基础用法

3.2 父元素 选择器&

3.3 改变选择器的顺序&

4. 运算

5. 命名 空间

6. 作用域

7. 引入

7.1 main.less

7.2 index.less

7.3 编译后的css

7.4 引入可携带参数

二、vue 配置less全局变量

发表回复取消回复

一、less语法