分享一些在项目中好用的一些CSS辅助函数，可以直接应用到你自己的样式代码中，传送门。这些函数当然不是CSS原生写法，有分为sass语法和less语法两套，大家可以自行选择复制或者下载。下面罗列的均是scss语法。less语法请查看传送门1、_clearfix %clearfix {
&:after,
&:before {
content: " ";
转载
2024-08-18 15:42:55
88阅读
使用less一段时间了，之前一直用sass，有时间把项目中用到的方法写下来，好记性不如烂笔头。1. 变量
值是变量
选择器是变量 属性是变量 图片url是变量 1)值是变量签名为 @变量名：值。一般我们会把全局用的单独封装一个文件，例如全局换肤颜色，公共组件的css样式。使用时候直接使用 签名。 @toolbar-hover: #F7F5FF;
@toolba
转载
2024-08-08 15:41:55
422阅读
less函数使用
原创
2017-02-23 19:41:46
1911阅读
LESS自带有很多的函数，之前已经为大家介绍过两次有关LESS函数的小知识了，相比大家应该对之前介绍的有所了解了。下面依旧为大家介绍LESS的函数，附加着一些小例子。 mod(number, number)取余 返回第一个参数对第二参数取余的结果。返回值与第一个参数单位相同，第二个参数单位被忽略。这个函数也可以处理负数和浮点数。参数：数字，浮点数;数字，浮点数。返回值：数字，取余的结果。
转载
2024-04-30 21:55:17
126阅读
1.Less 嵌套规则.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
.container h1 {
font-size: 25px;
color: #E45456;
}
.container
转载
2024-07-21 07:13:12
74阅读
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。使用方式两种使用方式：第一种全局安装less，利用命令编译less;第二种直接引入less.js.npm安装npm install -g less
npm install -g
转载
2024-04-28 16:18:51
478阅读
less里面的内置函数一、if()函数二、boolean()函数三、escape()函数四、length()五、extract()函数六、range()函数七、each()函数八、数学函数1. ceil---向上取整2. floor---向下取整3. percentage---取百分比的4. round---四舍五入5. sqrt---开平方6. abs---取绝对值7. min---取最小
转载
2024-03-17 22:59:24
69阅读
说到&符号，前几章的介绍中都已经遇到过了，比如说.box-part1&:before{}。 先说说伪类，由于伪类在css中使用“:”（冒号）来引用的，而“:”（冒号）在less是用来属性和变量赋值的特殊符号，所以less给出了一个新的策略“&”符号。而伪类在css中是附属在某个实际存在的模块上的类，也可以说是和这个模块连接起来的类，所以用&连接符也是最恰当
1、其他函数 color()接受字符串，将字符串转为十六进制值 convert（数值，转换的单位）转换两个单位之间的数值，如长度单位，时间单位，角度单位等convert（20cm,px） default();如果没有匹配到对应的条件则走此条件： .my(a){ @x:1; } .my(b){ @x:2; } .my(@y)when
转载
2024-06-20 19:07:48
42阅读
LESSLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。1.安装$ npm install -g less复制代码LESS的编译常用的分为两种：开发环境下(开发项目的时候);我们基于less-2.5.3.min.js进行编译：基于link把less文件导入，但是erl的值必须是
转载
2024-05-08 19:27:59
361阅读
1、官方介绍Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。试想如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给Html标
转载
2024-05-09 14:12:38
364阅读
讲函数之前先说说我对“混合”的理解，“混合”官网称作mixin，理解为可以把一个集合体嵌入到另一个集合体中、也可以把两个集合体捏合成一个集合体，而这个集合体就称作mixin。举个例子：.cls { background:#000000;} 这是最常见class选择器的样式，但在less认为，这就是一个mixin。 除去上面的废话，先来看看函数的语法：1、函数（语法：.aaa(参数) {
最近项目用到 less 来做 css 预处理器，之前公司项目是用的 sass，所以抽空针对 less，重新了解了一番。1. Less 的由来[Less 中文官方网站]：http://lesscss.cn/官网：http://lesscss.org/在 Web 发展的这几年，有了 webpack 来做构建，所以为了让 CSS 富有逻辑性，短板(在语法更新时，每当新属性提出，浏览器的兼容又会
转载
2024-06-14 06:09:29
51阅读
数学函数ceil()函数作用：向上取整 例子： Less中编写div{
width:ceil(2.5px);
}编译结果div{
width:3px;
}floor()函数作用：向下取整 例子： Less中编写div{
width:floor(2.5px);
}编译结果div{
width:2px;
}percentage()函数作用：将浮点数转换为百分比 例子： Less中编写div{
转载
2024-03-27 09:35:59
76阅读
运算符 Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点： 1. 运算数与运算符间必须用空格分隔； 2. 以第一个运算数的单位作为运算结果的单位； Less源码： // 运算数与运算符间没有空格
@fail: 1px +2em;
.
转载
2024-09-10 12:17:06
53阅读
1.动态样式语言导致样式文件的修改和维护困难！ 动态样式语言：在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。 常见的动态样式语言：(1)Sass/SCSS(2)Stylus(3)Less 注意：浏览器只能解析标准的CSS样式语言！所有动态样式语言的源文
大多数URL方案的URL语法都建立在这个由9部分构成的通用格式上：scheme://user:password@host:port/path;params?query#frag方案：http或者https 主机与端口：http://www.nihao.com:80/index.html 用户名和密码：ftp://joe:123@ftp.edu/pub
一，LESS
1,条件判断
在less中我们可以通过条件判断实现渲染不同的样式，有点像switch，不是通过if实现的，而是when实现的
在when方法中添加条件时，不需要单位
当判断相等时，使用等号（=）实现，没有（== 和 ===）
判断多个条件时，使用and关键字，配合when使用 when and
判断非语句，使用not ,when not
2,函数-Math
在less中我们可以像JS
转载
2024-07-02 05:26:59
100阅读
函数库函数库包含了许多函数，这一切有以下九种： ① 其它函数； ② 字符串函数； ③ 长度相关函数； ④ 数学函数； ⑤ 类型函数； ⑥ 颜色值定义函数； ⑦ 颜色值通道提取函数； ⑧ 颜色值运算函数； ⑨ 颜色混合函数一、其它函数Color()函数 解析颜色，将代表颜色的字符串转换为十六进制的颜色值。body{
background:color(“#f60”)
}
转载
2024-04-07 14:16:47
55阅读
Less（Leaner Style Sheet）是一门向后兼容的CSS扩展语言1 变量less可以定义变量，在编译时自动将变量名替换为用户定义的值。使用@定义和使用变量，变量声明可以在开头，也可以在使用变量后，不一定需要预先声明：// 变量
@link-color: #428bca; //sea blue
// 用法
.link {
color: @link-color;
}.link {
转载
2024-02-22 18:02:59
135阅读
