less 使用特性-变量

xbynet 发布于2019-08-29 11:13 / 856人阅读

1. 变量

</>复制代码 
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

output:

</>复制代码 
#header {
  color: #6c94be;
}

1.1. 选择器

</>复制代码 
// Variables
@my-selector: banner;
// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

output:

</>复制代码 
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

1.2. URLs

</>复制代码 
// Variables
@images: "../img";
// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

1.3. Import Statements

</>复制代码 
// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

1.4 属性

</>复制代码 
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

output:

</>复制代码 
.widget {
  color: #0ee;
  background-color: #999;
}

2. Mixins

</>复制代码 
.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

output:

</>复制代码 
button:hover {
  border: 1px solid red;
}

3. 作用域

</>复制代码 
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

云服务器 GPU云服务器 html使用less 不使用变量 php 使用数组变量 js全局变量无法使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111509.html

大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
学习Less-看这篇就够了

摘要：在网上讨论看来，与相比于功能更为丰富，但对于学习成本以及适应时间，稍胜一筹，这也是我选择的原因。如果你也是的使用者，还需要配合进行处理，具体可见我的这篇文章飞行手册，里面详细说明了的处理方式。原文链接前言 CSS的短板作为前端学习者的我们或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。而 CSS 作为一门标记性语言，可能给初...

hiyayiji 2019-08-29 13:59 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

kidsamong 2019-08-29 16:35 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

zhiwei 2019-08-23 11:36 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

RaoMeng 2019-08-02 11:22 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 评论0 收藏0