Less预处理——变量和嵌套

Less预处理——变量和嵌套

系列文章目录



一、less 变量

1、选择器变量

让选择器变成动态的

index.html 文件

  • id 和 class 选择器
javascript">  <div id="wrap">
      Hello Less!
  </div>
  <div class="wrap">
      Hello World!
  </div>

index.less 文件

  • 第一种是 确定了 选择器的类型(id 选择器)
  • 第二种是 不确定 选择器的类型(id/class 选择器)
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;

@{mySelector} {
    color: #***c;
    width: 50%;
}

.@{wrap} {
    color: skyblue;
    width: 50%;
}

#@{wrap} {
    color: aqua;
    width: 50%;
}

index.css 文件

  • 自动转义后的 css 文件
#wrap {
  color: #***c;
  width: 50%;
}
.wrap {
  color: skyblue;
  width: 50%;
}
#wrap {
  color: aqua;
  width: 50%;
}

2、属性变量

减少代码书写量

index.html 文件

备注:这是一个公共的HTML结构,以下测试均使用该结构。

  <div id="wrap">
      Hello Less!
  </div>

index.less 文件

  • 属性变量,设置属性
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;

// 属性变量
@borderStyle: border-style;
@solid: solid;

@{mySelector} {
    @{borderStyle}: @solid;
}

index.css 文件

  • 自动转义后的 css 文件
#wrap {
  border-style: solid;
}

3、url 变量

项目结构改变时,修改其变量就可以

index.less 文件

@images: "../../img";

body {
    background: url("@{images}/xxx.png");
}

index.css 文件

  • 自动转义后的 css 文件
body {
  background: url("../../img/xxx.png");
}

4、声明变量

结构:@name: {属性: 值}

使用:@name()

示例:超出的内容,使用 ... 表示

index.less 文件

@Rules: {
       width: 60px;
       height: 30px;
       border: 1px solid #***c;
       /*第一步: 溢出隐藏 */
       overflow: hidden;
       /* 第二步:让文本不会换行, 在同一行继续 */
       white-space: nowrap;
       /* 第三步:用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;
}
#wrap {
    @Rules();
}

index.css 文件

  • 自动转义后的 css 文件
#wrap {
  width: 60px;
  height: 30px;
  border: 1px solid #***c;
  /*第一步: 溢出隐藏 */
  overflow: hidden;
  /* 第二步:让文本不会换行, 在同一行继续 */
  white-space: nowrap;
  /* 第三步:用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
}

5、变量运算

  • 加减法时,以第一个数据的单位为基准
  • 乘除法时,注意单位一定要统一
  • 注意添加空格

index.less 文件

@width: 300px;
@color: #***c;
#wrap {
    width: @width - 20;
    height: @width - 20 * 2;
    margin: (@width - 200) * 2;
    color: @color*1;
    background-color: @color + #111;
}

index.css 文件

  • 自动转义后的 css 文件
#wrap {
  width: 280px;
  height: 260px;
  margin: 200px;
  color: #*********;
  background-color: #dddddd;
}

6、变量的作用域

就近原则

index.less 文件

@var:@a;
@a:100%;
#wrap {
    width: @var;
    @a:9%;
    border: 1px solid #***c;
}

index.css 文件

  • 自动转义后的 css 文件
#wrap {
  width: 9%;
  border: 1px solid #***c;
}

7、用变量去定义变量

index.less 文件

@fond:@var;
@var:'fond';
#wrap::after {
    content: @var;
}

index.css 文件

  • 自动转义后的 css 文件
#wrap::after {
  content: 'fond';
}

二、Less 嵌套

1、& 的使用

&:代表的上一层选择器的名字

index.html 文件

  • 多层级的嵌套
<div class="center">
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

index.less 文件

  • &:代表的上一层选择器的名字
  • 可写可不写
.center {
    width: 100px;
    height: 100px;
    background: red;
    & #list {
        width: 50px;
        height: 50px;
        background: skyblue;
        li {
            width: 20px;
            height: 20px;
            background: #***c; 
        }
    }
}

index.css 文件

  • 自动转义后的 css 文件
.center {
  width: 100px;
  height: 100px;
  background: red;
}
.center #list {
  width: 50px;
  height: 50px;
  background: skyblue;
}
.center #list li {
  width: 20px;
  height: 20px;
  background: #***c;
}

2、媒体查询

index.less 文件

#main {
    @media screen {
        @media (max-width: 768px) {
            width: 100px;
        }
    }
    @media tv {
        width: 2000px;
    }
}

index.css 文件

  • 自动转义后的 css 文件
@media screen and (max-width: 768px) {
  #main {
    width: 100px;
  }
}
@media tv {
  #main {
    width: 2000px;
  }
}

3、小技巧:添加私有样式

示例:实现样式从隐藏到显示的切换

index.less 文件

#main {
    &.show {
        display: block;
    }
}

.show {
    display: none;
}

index.css 文件

  • 自动转义后的 css 文件
#main.show {
  display: block;
}
.show {
  display: none;
}

index.html 文件

  • 获取 main 节点,实现样式从隐藏到显示
const main = document.getElementById('main')
main.classList.add("show")

这里是 前端杂货铺,期待您的 三连 + 关注

转载请说明出处内容投诉
CSS教程_站长资源网 » Less预处理——变量和嵌套

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买