精华内容
下载资源
问答
  • less定义函数
    2020-06-30 15:49:07
    $font-color-theme : #9c8084;//字体主题颜色默认
    
    @mixin font_color($color:$font-color-theme){/*通过该函数设置字体颜色,后期方便统一管理;*/
    	color:$color;
      [data-theme="theme1"] & {
        color:$font-color-theme1;
      }
    }
    
    .el-select-dropdown__list > .selected {
      @include font_color();
    }

     

     

    	%section {
    		display: flex;
    		justify-content: space-around;
    		align-content: center;
    		background: #fff;
    		border-radius: 10upx;
    	}
    
    .tj-sction {
    		@extend %section;
    		margin: 15upx 0;
    }

     

    更多相关内容
  • less 自定义函数

    千次阅读 2021-08-25 16:07:00
    vue-cli3以上配置 ... less: { javascriptEnabled: true } } } } vue-cli3以下版本 // module.rules { test: /\.less/, exclude: /node_modules/, use: ['style-loader', 'css-loader', { loader:

    vue-cli3以上配置

    module.exports = {
    css: {
        loaderOptions: {
          less: {
            javascriptEnabled: true
          }
        }
      }
     }
    

    vue-cli3以下版本

    // module.rules
    {
      test: /\.less/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader', {
        loader: 'less-loader',
        options: {
          javascriptEnabled: true
        }
      }],
    }
    
    .fun() {
        @functions: ~`(function() {
          this.setWidth = function() {
            return '';
          }
        })()`;
      }
      
    .fun();
    
    展开全文
  • less里面的内置函数

    2022-01-25 22:10:53
    less里面的内置函数一、if()函数二、boolean()函数三、escape()函数四、length()五、extract()函数六、range()函数七、each()函数八、数学函数1. ceil---向上取整2. floor---向下取整3. percentage---取百分比的4. ...

    一、if()函数

    • 根据条件返回两个值之一。
    • 参数:
    • (1)condition: 一个布尔表达式
    • (2)value1: 如果condition为真则返回一个值。
    • (3)value2:如果condition不为真则返回一个值。
    • if()—中间写法类似三元
    @w:50px;
    @h:50px;
    @max:-10;
    //if()---中间写法类似三元
    .box{
       width:if(@max>0,@w,@w * 2);
       height:if(@max>0,@w,@w * 2);
       border: 1px solid #000;
    }
    

    二、boolean()函数

    • 参数:condition: 一个布尔表达式
    • boolean()—返回true或者false
    @w:50px;
    @h:50px;
    @max:-10;
    //boolean()---返回true或者false
    @bool:boolean(@max>0);
    .box{
     width: if(@bool,@w,@w*2);
     height: if(@bool,@w,@w*2);
     border: 1px solid #000;
    }
    

    三、escape()函数

    • 将URL 编码应用于输入字符串中的特殊字符。
    • 参数::string要转义的字符串。
    • 返回:string不带引号的转义内容。
    	console.log(escape('a=1'));//a%3D1
    

    四、length()

    • length()—返回长度(值长度)
    //length()---返回长度(值长度)
    @str:red,blue,black;
    .box{
     width: length(@str);//3
    }
    

    五、extract()函数

    • extract()—返回集合值里面某个位置的值
    • 返回列表中指定位置的值。
    • 参数
    • (1)list—逗号或空格分隔的值列表。
    • (2)index—一个整数,它指定要返回的列表元素的位置。
    //extract()---返回集合值里面某个位置的值
    @str:red,blue,black;
    .box{
     background-color: extract(@str,2);//blue
    }
    

    六、range()函数

    • 生成跨越一系列值的列表
    • 参数
    • (1)start—(可选)起始值,例如 1 或 1px
    • (2)end— 最终值,例如 5px
    • (3)step—(可选)要增加的数量
    //range()---写一个参数,返回当前值以下的值
    range(4);//1 2 3 4
    range(10px,40px,10);//10px 20px 30px 40px
    

    七、each()函数

    • 将规则集的评估绑定到列表的每个成员。
    //each--遍历集合值,value指当前值,index当前值索引
    @str:red,blue,black;
    each(@str,{
     .box@{index}{
       background-color: @value;//绑定属性值@value
     }
    })
    //red blue black
    

    八、数学函数

    1. ceil—向上取整

    2. floor—向下取整

    3. percentage—取百分比的

    4. round—四舍五入

    5. sqrt—开平方

    6. abs—取绝对值

    7. min—取最小值

    8. max—取最大值的

    九、类型函数

    1. isnumber() 检测值是否是数字类型

    • 如果值是数字则返回true,否则返回false。
    • 参数:value—正在评估的值或变量。

    2. isstring() 检测是否是字符串

    • 如果值是字符串则返回true,否则返回false。
    • 参数:value—正在评估的值或变量。

    3. iscolor() 检测是否是颜色

    • 如果值是颜色则返回true,否则返回false。
    • 参数:value—正在评估的值或变量。

    4. isurl(url(…)) 检测是否是路径 url()

    • 如果值是 url返回true,否则返回false。
    • 参数:value—正在评估的值或变量。

    十、颜色定义函数

    1. rgb()

    • 从十进制红色、绿色和蓝色 (RGB) 值创建一个不透明的颜色对象。
    • 参数:
    • (1)red: 整数 0-255 或百分比 0-100%。
    • (2)green: 整数 0-255 或百分比 0-100%。
    • (3)blue: 整数 0-255 或百分比 0-100%。

    2. rgba()

    • 从十进制红色、绿色、蓝色和 alpha (RGBA) 值创建透明颜色对象。
    • 参数:
    • (1)red: 整数 0-255 或百分比 0-100%。
    • (2)green: 整数 0-255 或百分比 0-100%。
    • (3)blue: 整数 0-255 或百分比 0-100%。
    • (4)alpha:数字 0-1 或百分比 0-100%。

    3. hsl()

    • hsl(0,100%,50%)
    • 根据色调、饱和度和亮度 (HSL) 值创建不透明的颜色对象。
    • 参数:
    • (1)hue: 表示度数的整数 0-360。
    • (2)saturation:百分比 0-100% 或数字 0-1。
    • (3)lightness:百分比 0-100% 或数字 0-1。

    4. hsla()

    • hsla(0,100%,50%,0.5);
    • 从色调、饱和度、亮度和 alpha (HSLA) 值创建透明颜色对象。
    • 参数:
    • (1)hue: 表示度数的整数 0-360。
    • (2)saturation:百分比 0-100% 或数字 0-1。
    • (3)lightness:百分比 0-100% 或数字 0-1。
    • (4)alpha:百分比 0-100% 或数字 0-1。

    5. hsv()

    • hsv(0,100%,50%);
    • 从色调、饱和度和值 (HSV) 值创建不透明的颜色对象。
    • 参数:
    • (1)hue: 表示度数的整数 0-360。
    • (2)saturation:百分比 0-100% 或数字 0-1。
    • (3)value:百分比 0-100% 或数字 0-1。

    6. hsva()

    • hsva(0,100%,50%,0.5);
    • 从色调、饱和度、值和 alpha (HSVA) 值创建透明颜色对象。
    • 参数:
    • (1)hue: 表示度数的整数 0-360。
    • (2)saturation:百分比 0-100% 或数字 0-1。
    • (3)value:百分比 0-100% 或数字 0-1。
    • (4)alpha:百分比 0-100% 或数字 0-1。

    十一、颜色通道功能

    1. hue()—提取 HSL 颜色空间中颜色对象的色调通道。

    • hue(hsl(90, 100%, 50%));//90

    2. saturation()—提取 HSL 颜色空间中颜色对象的饱和度通道。

    • saturation(hsl(90, 100%, 50%));//100%

    3. lightness()—提取 HSL 颜色空间中颜色对象的亮度通道。

    • lightness(hsl(90, 100%, 50%));//50%

    4. red()—提取颜色对象的红色通道。

    • red(rgb(10, 20, 30));//10

    5. green()—提取颜色对象的绿色通道。

    • green(rgb(10, 20, 30));//20

    6. blue()—提取颜色对象的蓝色通道。

    • blue(rgb(10, 20, 30));//30

    7. alpha()—提取颜色中透明度。

    • alpha(rgba(10, 20, 30, 0.5));//0.5

    十二、颜色混合功能

    1. multiply()—将两种颜色相乘。

    • 将两种颜色相乘。两种颜色中的每一种颜色对应的 RGB 通道相乘,然后除以 255。结果是颜色更深。
    • multiply(#fff,#000);//#fff * #000最终颜色除255,颜色变深

    2. screen()—两个颜色混合,更浅

    3. overlay()—结合了multiply和的效果screen。有条件地使亮通道更亮,暗通道更暗。

    • overlay(rgb(138, 128, 128),rgb(241, 14, 14));//比暗色更暗,亮色更亮

    4. softlight()—两个色混合之后使得更柔和

    • softlight(rgb(109, 224, 42),#0ef1e6);//两个色混合之后更柔和

    5. hardlight()—高亮

    • hardlight(rgb(109, 224, 42),#0ef1e6);//高亮

    6. difference()—两个相减,如果是负值取反向

    • difference(rgb(109, 224, 42),#0ef1e6);//两个相减,负值 取反向

    7. exclusion()

    • exclusion(rgb(109, 224, 42),#0ef1e6) 混合色

    8. average()

    • average(rgb(109, 224, 42),#0ef1e6) 平均色

    9. negation()

    • negation(#ff6600, #000000); difference反方法
    展开全文
  • 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中编写Javascript函数 首先需要在Webpack中对less-loader设置 javascriptEnabled ,使其支持编写Javascript! // module.rules ... { test : /\.less/ , exclude : /node_modules/ , use : ...
  • 颜色值定义函数 rgb()函数 作用:通过十进制红色、绿色、蓝色三种值(RGB)创建不透明的颜色对象。 rgba()函数 作用:通过十进制红色、绿色、蓝色以及alpha四种值(RGBA)创建带alpha透明的颜色对象。 argb()函数 ...
  • } 还可以通过js改变变量的值,从而改变属性 ${this.name}是解析变量的写法 less中定义使用变量 less定义变量 @变量名:变量值 //定义变量 @test-width:200px; @test-height:300px; 使用 .testDiv{ width:@test-...
  • 引入less文件 (需要定义文件格式rel="stylesheet/less")2. 引入less编译器文件 用来动态加载less文件并创建style标签把CSS放到style标签里面2. less基本语法注释// 会被删除/**/ 不会被删除1. 变量 详细用法1. 变量...
  • LESS函数总结

    2021-05-20 20:18:35
    LESS函数总结3.1 String函数系列3.1.1 escape(@string)编码3.1.2 e(@string)转义3.1.3 %(string,arguments...)格式化字符串3.1.4 Replace替换3.2 list函数系列3.2.1 length函数3.2.2 extract函数3.3 Math函数系列...
  • 1.定义函数 .overflow(@line) when (isnumber(@line)){ text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @line; overflow: hidden; } 2.调用函数 .text{ ...
  • less变量

    2022-07-10 13:49:43
    Less介绍 、Less中的变量、Less的外部引入
  • less函数与循环

    2020-04-15 10:35:34
    函数定义 这个根据每个的设计稿和基础适配的font-size决定,我这里只是说传入参数生成对应的rem的值 @base:750 / 720 * 0.01; .px2rem(@name, @px) { @{name}: @px * @base * 1rem; } 函数调用 .px2rem...
  • LESS详解之函数(三)

    千次阅读 2013-11-13 08:46:55
    LESS自带有很多的函数,之前已经为大家介绍过两次有关LESS函数的小知识了,相比大家应该对之前介绍的有所了解了。下面依旧为大家介绍LESS函数,附加着一些小例子。
  • Less 函数

    2021-05-22 05:04:59
    LESS 映射具有值操作的 JavaScript 代码,并使用预定义函数来操纵样式表中的 HTML 元素。 它提供了操作颜色的几个功能,如圆函数,floor 函数,ceil 函数,百分比函数等。例子下面的例子演示了在 LESS 文件中使用...
  • 最近在做项目的时候遇到要使用css3动画的需求,本身直接手写多个@keyframes也是可以的,但是这样显得效率...//在定义函数的时候可以这么写 //这是一个可以通用的@keyframes .keyframesFunction (@name,@content){...
  • Less函数库大全

    千次阅读 2019-05-10 19:48:49
    字符串函数 (1)escape() 功能:将输入字符串的url特殊字符进行编码处理 不转义的编码:, / ? @ & + ’ ~ ! $ 转义的编码:# ^ ) ( } { | ; > < : ] [ = d:escape('#, ^, (, ), {, }, |, :, >, <, ...
  • // 定义混入方法时,需要在类选择器之后添加一个小括号 // 定义混入方法 .abc () { color: red; } .active { border: 1px solid blue; // 使用混入方法 ...混入的好处:把重复的代码抽离...定义一个less文件 // ..
  • LESS函数写CSS样式简单上手教程

    千次阅读 2019-10-18 16:19:48
    Less 是一门 CSS 预处理语言,它扩展了 CSS 的写法,增加了变量、函数等特性。 注意点: 在less中,完全兼容css的语法,所以可以直接在less文件中写css没问题 浏览器不认识less文件,需要需要使用less中的样式,...
  • less函数库(function)

    千次阅读 2020-12-03 09:49:50
    函数库(function) 1.其他函数 2.字符串函数 3.长度函数 4.数学函数 5.类型函数 6.颜色值定义函数 7.颜色值通道提取函数 8.颜色值运算函数 9.颜色混合函数
  • less函数使用

    2017-11-12 19:40:00
    }表示调用函数并给函数传递参数 语法 函数名(参数){  函数体 } 生成的css文件(example2.css) #header {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  -...
  • 在js中定义全局变量: 在需要用变量的地方这样用: 7.这样子写完之后就可以在js文件中配置和修改less中的变量了。在需要修改less变量的地方直接修改js文件中对应的变量。如果修改变量后不生效,可以使用这个方法 less...
  • 正确使用less以及less变量variables

    千次阅读 2020-02-21 19:50:52
    初见less 以//开始的注释不会被编译到css文件中 以/**/包裹的注释会被编译在css文件中 正确使用less 一、如何使用less less文件只有在被编译后才能被浏览器识别使用 二、less编译工具 1、koala 国人开发的全平台的...
  • less 函数 循环 变量写法

    千次阅读 2019-12-18 10:20:20
    案例上一个 覆盖element-ui按钮 less @primary: #3a70df; @danger: #df3a25; @success: #2fcd77; @warning: #fba13b; @white: #ffffff; @black: #000000; @textBlack: #383838; @ccc: #cccccc; @colorlist: @...
  • 关于less引入全局变量或者函数的问题总结 因为本认使用的是vue2 + vuecli4创建的项目,以下解决方案均为以下环境 最近考虑写一个公司字用的UI框架,就想着自己整理一下目前市面上常用的功能!css编译用了less,...
  • LESS 函数方法

    千次阅读 2018-04-22 15:22:17
    颜色定义 (Color Definition) 颜色操作 颜色混合 混合 (misc) // 字符转颜色 color("#CCC") //返回图像尺寸(示例尺寸100*50) image-size("file.jpg"); // =&gt; 10...
  • C++中如何定义函数对象

    千次阅读 2019-07-10 15:11:45
    C++中如何定义函数对象 尽管函数指针被广泛用于实现函数回调,但C++还提供了一个重要的实现回调函数的方法,那就是函数对象。函数对象(也称“算符”)是重载了“()”操作符的普通类对象。因此从语法上讲,函数对象...
  • less中使用css内置函数

    2021-06-21 17:55:52
    .select { width: min(430px, 100%);...css中这样使用,在less中,less认为min是自己定义函数,没定义会报错。 可以使用less转义字符~,原样输出。 .select { width: ~"min(430px, 100%)"; }
  • less 运算、函数

    千次阅读 2017-05-26 14:45:47
    **今天来说一下less的运算和函数less 运算还是比较简单的, 其函数主要是less为css添加了一些函数功能,也不是很难,记住它就行。如果实在记不住,知道有这个函数就行。**一、less 的运算less的运算很简单我直接上...
  • 创建函数时问题马上出现: ERROR 1418 (HY000): This routine has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe ...
  • CSS3中的calc()函数以及在less中的使用

    千次阅读 2020-08-07 21:39:19
    1. calc()函数 在css3中我们可以通过calc()函数来动态计算长度值,如: #div { width: calc(100% - 100px); } 它的语法是 calc(expression) expression参数是必须的,它是一个数学表达式,结果将采用运算后的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,254
精华内容 36,101
关键字:

less定义函数