精华内容
下载资源
问答
  • less变量定义规则
    千次阅读
    2021-01-24 21:32:56

    在less文件中,任何数字、颜色或变量都能参与运算,less提供了+、-*、/算术的运算。

    代码示范:

    /*在less里写*/
    @width:10px + 5;
    div {
    /*其实就变成了15px的边框*/
    	border:@width solid skyblue;
    }
    /*甚至还可以带小括号,比如说下面这种 和数学中的一样,先算小括号再去相乘*/
    width:(@width + 5) * 2;
    

    也可以定义一个变量:

    @baseFont:50;
    div {
    /*就等同于88/50 但要记得需要有其中一个数值带单位*/
    /*如果两个数值都没有单位,那的出来的值也没有单位*/
    	width:88rem / @baseFont;
    }
    

    注意点:

    • 运算符中间左右必须有空格隔开 1px + 5;
    • 对于两个不同单位值之间的运算,运算结果的值会取第一个值的单位 18rem + 5px,单位就是rem,不是px;
    • 如果两个值之间只有一个值有单位,则运算结果就取该单位

    现在的less语法中,除法需要加()或.,比如:
    但不推荐.的写法,会提示波浪线错误,更推荐小括号()

    .box {
    	width(100 / 3.65rem);
    	height:50 ./ 3.65rem;
    }
    
    更多相关内容
  • Less变量

    2020-05-10 18:36:41
    以@开头定义变量,并且使用时直接输入@名称。 2.选择器变量 作为选择器的变量在使用的时候需要添加大括号{},变量的前面可以添加选择操作符。 3.属性变量 属性变量使用的时候也需要添加大括号{} 4.变量的作用域...

    Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言,使css更容易维护和扩展。他不是一个直接使用的语言,而是一个生成css的语言。Less可以运行在Node或浏览器端。

    1.普通变量
    以@开头定义变量,并且使用时直接输入@名称。
    在这里插入图片描述
    2.选择器变量
    作为选择器的变量在使用的时候需要添加大括号{},变量的前面可以添加选择操作符。
    在这里插入图片描述
    在这里插入图片描述
    3.属性变量
    属性变量使用的时候也需要添加大括号{}
    在这里插入图片描述
    在这里插入图片描述
    4.变量的作用域
    就近原则,不是指代码的位置,而是指代码的层级结构。
    如果是同一级后面的生效,类似于提升。
    不同级的变量,距离最近的生效。距离是指定义时的位置。

    展开全文
  • Less定义变量

    千次阅读 2019-10-04 22:29:38
    使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词...

    1. 定义:

    使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写,从第二个开始,单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……,当然也是可是使用香肠命名法用下划线“_”来命名。如,box_main,border_bottom,……

    2. 使用:

    在样式属性值中使用时,直接用 @variable 即可调用变量;

    在其他地方,包括选择器名称、属性名称、URL和@import语句使用时,变量必须以插值的形式使用,例如:

    复制代码
    @variable: 200px; //定义变量作为样式属性值使用
    @classname: .nav_a; //变量值不可用中划线,此变量作为插值用于选择器名称
    
    
    @{classname}{ //作为插值 必须加 {}
        width: @variable; //作为属性值直接调用
    }
    复制代码

    输出:

    .nav_a {
      width: 200px;
    }

    转载于:https://www.cnblogs.com/xiaozhang666/p/11331115.html

    展开全文
  • 关于 less 变量

    2016-04-05 16:32:02
    1 首先是 环境的配置 用koala 这个软件 然后将less文件拖进来就可以啦还要把js文件导入工程里面  2 然后在html里面导入 link rel="stylesheet/less" href="less/demo1.less"> script src="js/less....

    1 首先是 环境的配置 用koala 这个软件 然后将less文件拖进来就可以啦还要把js文件导入工程里面 

    2 然后在html里面导入 <link rel="stylesheet/less" href="less/demo1.less"> <script src="js/less.min.js"></script>  

    3在html页面写上 <body><header> <h1>你好!</h1></header><footer class="width"> <h1>da rwr </h1></footer></body>

    4 less 里面配置

    @red:blue;
    @baise:yellow;
    header,footer{
      background: @red;
      h1{
        color:@baise;
      }
    }
    //作为选择器
    @kuandu:width;
    .@{kuandu}{
      @{kuandu}:180px;
    }
    //作为url
    @imgurl:"https://www.baidu.com/img";
    header{
      background:greenyellow url("@{imgurl}bdlogo.png") no-repeat;
      height:300px;
    }
    //定义多个变量名称一样是  会使用最新定义的哪一个 也就是统计目录下离他最近的那个
    5 这是less文件的内容 下面会自动编译的css文件类容

    header,
    footer {
      background: #0000ff;
    }
    header h1,
    footer h1 {
      color: #ffff00;
    }
    .width {
      width: 180px;
    }
    header {
      background: #adff2f url("https://www.baidu.com/imgbdlogo.png") no-repeat;
      height: 300px;
    }
    
    6 就可看到页面



    展开全文
  • less 变量

    2020-05-19 16:12:39
    less是一种css的扩展语言,一般需要less.js工具将less样式转换成css样式 变量可以替换多次重复出现的属性或者属性值,这样在修改需求时只需要在这一处修改变量值,可以提高工作效率 1、替换多次重复出现的属性的值 ...
  • less快速入门------变量学习

    千次阅读 2020-07-04 22:10:28
    一,什么是less变量? 1.less作为css的预处理器,和其他编程一样,有变量的概念。 二,less如何定义变量? 1.less定义变量的方式 : 使用符号@ 例如 @blue:#5B83AD; @mySelector:width; @commonFontSize:16px; 2.注意...
  • 一、less简介 less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展 less的中文官网:
  • Less变量、混合

    千次阅读 2018-09-05 19:35:04
    Less特性 注释 ...Less中使用@变量定义变量。需要注意的是,作为属性及选择器的时候,变量名需要放在{}中。 1.作为属性 @bg: background-color; .box{ width: 600px; height: 400px; ...
  • less定义&基本语法

    2022-09-04 18:28:54
    less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,以/**/包裹的注释会被编译到css文件中(css和less通用)定义:混合就是将一系列属性从一个规则集引入到另一个规则集的方式。2.作为选择器和属性名...
  • 前段时间自己开发的一个手机端音乐项目的时候遇到一个问题,如何用vue脚手架+less修改变量的方式去改变项目的主题色。 有看过ElementUI 和Vant里面的一些教程,需要安装其他依赖插件,然后配置Webpack相关的配置,...
  • 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 ...
  • Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 Less 中文网:http://lesscss.cn Less 中文文档:...
  • 定义一个变量两次或多次时,只会使用最后定义变量less会从当前的作用域中向上搜索。并且取最新定义变量值作为自己的值。 1.普通的变量 (1)定义方式:@ (2)实例: /*less*/ @width: 10px; @height: @...
  • CSS less优化

    2020-12-02 07:30:46
    less变量 (variables),引用(mixins),表达式(operations),嵌套规则(nested rules)来扩展css开发   变量 (variables)重复使用的值可以定义变量的形式,方便更改哈例子如下: #header { color: #4D926F;...
  • strongerHuang 2 变量定义位置的区别 相信很多朋友在大学的时候都学过C和C++,学过C++的朋友都知道,上面那段代码变量定义的位置是很合理的。 但不知道大家了解过C89和C99的区别,区别的内容还是有很多,针对本文说...
  • CSS3中的calc()函数以及在less中的使用

    千次阅读 2020-08-07 21:39:19
    less中使用calc()函数 如下less定义的两个变量,并使用cal()函数来计算: @containerHeight: 500px; @inputHeight: 50px; .content { position: absolute; /* 写法1 */ top: ~"calc(@{containerHeight}/2 - @{...
  • css-即使导入了“ variables.less”,“变量名错误”仍未定义我今天开始使用LESS。 但这有点奇怪。 此代码不起作用。 我收到一个错误:! Variable Name Error: @linkColor in a is undefined.我的引导程序:@import ...
  • Less变量,变量是指没有固定的值,这个值是可变的,在CSS中的一些颜色和数值等会经常使用到。 Less变量命名规范: 必须有@为前缀 变量名不能包含特殊字符 变量名不能以数字开头,但可以以数字结尾 大小写敏感(变量...
  • 定义变量 1.CSS 的变量声明和使用 定义 3 个变量,:root 使得所有人可访问 :root{ --base:yellow; --spacing:10px; --blur:10px; } 使用上面定义变量作为属性值: img{ filter:blur(var(--blur)); ...
  • less开发指南

    2020-09-25 03:37:36
    LESS(是.less后缀名的文件) 包含一套自定义的语法及一个解析器,我们根据这些语法定义自己的样式规则,为 CSS 加入程序式语言的特性,如变量、继承、运算、嵌套等,更方便CSS的编写和维护
  • 学习less 官网 中文网 http://www.1024i.com/demo/less/ Webstrom 插件 Lessc less.less less.css 编译less文件成css 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World ...
  • LESS

    2021-06-12 05:56:35
    LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!变量很容易理解:@nice-blue: #5B83AD;@light-blue: ...
  • CMakeList常用变量规则查询笔记

    千次阅读 2021-05-12 17:56:52
    常用的变量规则① 预定义变量② 系统信息③ 主要开关选项④ 环境变量⑤ 常用规则2. 项目组织结构3. 自定义搜索规则4. 条件控制if…elseif…else…endifwhile…endwhileforeach…endforeach5. 打印信息6. 包含其他...
  • 变量(Variables) 基本使用方式: @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } 编译为: #header { width: 10px; height: 20px; } 混合(Mixins) ...
  • Less基础

    2020-12-12 12:08:30
    @变量名 Less变量只能定义一次,不能重复定义,否则后面的会类似于js的变量提升,覆盖前面的变量。 作为属性值的变量不能添加大括号({}) @width :10px; @height: @width + 10px; #header { widht: @width; ...
  • 2. 变量不仅可以控制CSS规则里的值,还可以用于其他地方,例如 选择器名,属性名,URLs,@import语句 选择器名 先定义一个变量 变量应用于选择器,因为举得例子是类选择器,所以 @ 前面是 ‘.’ ,当是id选择器的...
  • less基本规则以及在vue中使用less的基本概念vue中使用lessless的注释less的嵌套规则与&less对于串行选择器的嵌套规则表示外部串行选择器的&标识符less中的变量与运算less中的变量less中的运算less中的混合...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,181
精华内容 11,272
热门标签
关键字:

less变量定义规则