Less 变量

更新日期: 2019-10-10阅读: 2.5k标签: less

概念

使用 @ 符号定义变量,变量分配使用 : 完成。 

声明格式:@变量名:变量值 。

通常看到很多重复的相同的值,我们可以通过使用变量来避免。Less中的变量和其他编程语言一样,可以实现值的复用,同样的它也有作用域,简单的来说就是变量的作用域就是局部变量和全局变量的概念;变量作用域采用的是就近原则,也就是说我们需要先查找自己本身是否有这个变量,如果有就使用自身变量,没有的话就查找上一级父元素,以此类推。


可变插值

  • 选择器名插值(可以引用任何变量)
  • 属性名插值(可以引用任何变量)
  • URL插值(用来保存URL,并在url()中使用它)
  • import 插值(import语句中,用来保存路径的变量)
  • 媒体查询插值


导入语句

版本:1.4.0

句法: @import "@{themes}/tidal-wave.less";

注意:在v2.0.0之前,我们仅考虑在根范围或者当前范围内声明的变量,并且在查找变量时仅考虑当前文件和调用文件。

    // 变量
    @themes: "../../src/themes";
    
    // 用法
    @import "@{themes}/tidal-wave.less";


属性

版本:1.6.0

    @property: color;
    
    .widget {
      @{property}: #0ee;
      background-@{property}: #999;
    }
    
    // 编译为
    .widget{
        color: #0ee;
        background: #999;
    }


变量名

可以使用变量名称定义变量。

    @fnord:  "I am fnord.";
    @var:    "fnord";
    content: @@var;
    
    // 编译为
    content: "I am fnord.";


延迟加载

变量是延迟加载的,无需在使用前声明。

    .lazy-eval-scope {
      width: @var;
      @a: 9%;
    }
    
    @var: @a;
    @a: 100%;
    
    // 编译为
    .lazy-eval-scope {
      width: 9%;
    }


默认变量

有时候我们会请求默认变量:一种仅在尚未设置变量的情况下才可以设置的功能,不需要这个功能是因为我们可以通过在后面放置定义来轻松覆盖变量。


链接: https://fly63.com/article/detial/5839

LESS 原理,一款css的预处理程序Less的使用

LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

如何将less编译成css文件__less自动编译成css的方法总结

作为css的预处理less,拥有着比css更快捷方便,扩展了css的变量、Mixin、函数等特性,使 CSS 更易维护和扩展。下面是介绍如何将less文件转换成css文件。

vscode如何将less编译到指定css目录中

使用vscode的搬砖猿,想要在vscode编辑器里面很方便的编译less文件,需要在扩展商店里面下载一款名叫Esay LESS的超好用扩展,配置我们的LESS,我们需要在.vscode文件夹中建立一个settings.json的文件

less文件转换为css文件

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。本文主要介绍less文件如何转化为css文件

less相关知识点总结

HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。

css媒体查询aspect-ratio宽高比在less中的使用

css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下:注意三点:

移动端开发rem布局之less+媒体查询布局的原理步骤和心得

less:是一门css扩展语言,也成为css预处理器,引入了变量,mixin(混入)、运算以及函数等功能,首先写一个common.less文件,专门用于媒体查询,其中常用的屏幕大小单位有

Less导入选项

Less 提供了CSS @import CSS规则的几个扩展,以提供更多的灵活性来处理外部文件。使用 @import(reference)导入外部文件,但除非被引用

less循环和合并

Loops语句允许我们多次执行一个语句或一组语句。在Less中,mixin可以自称,与 Guard表达式和模式匹配组合使用时,这个递归mixin可以创建各种迭代/循环结构。

less的使用几个技巧

让这个box范围内的全部包进来,这样的话就完美的进行调节,再也不用到处找第几行第几个,我刚才在哪个位置给覆盖了。一看便知!小米诺基亚等公司,都有自己的主色调。如果每次加一个#e23615太麻烦,而且如果诺基亚要搞活动!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!