Less 变量

时间: 2019-10-10阅读: 392标签: 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%;
    }


默认变量

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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5839

less的使用几个技巧

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

css和less的区别是什么?

css和less的区别是什么?下面本篇文章就来给大家介绍一下css和less,以及它们之间的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Less导入选项

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

less循环和合并

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

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

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

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

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

less文件转换为css文件

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

less相关知识点总结

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

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

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

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

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

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广