IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Less知识整理 -> 正文阅读

[JavaScript知识库]Less知识整理


Less


介绍

less对于css,很像jquery对于js,让原生内容简化,代码写的少,但是实现的功能却更多。

同时,less的表达,也更像js 。比如变量,嵌套,封装,函数,映射,作用域等等。

所以,学习的时候,可以结合css和js来学习less,更容易理解。同时,在本篇中,我也会不断提醒这一点。

官网

https://less.bootcss.com/

less对于css样式的表达,是通过各种各样的符号来实现的。

比如@ , & , ( ) , { } , [ ] , $等,这让less更像css和js封装的混合体。

本篇就以符号位主线,对less内容进行整理。

安装

less.js是一个js库,需要在node环境下安装和使用。

// node环境下安装
npm install less -g

#or:

yarn global add less

less不能直接被浏览器识别,需要转换为css样式,这要用到less-loader进行编译,

这里有个最大的坑,就是要注意less-loader的版本,一般使用5版本。

npm install less-loader@5

#or:

yarn add less-loader@5

目前,less主要在前端框架中使用,还需要一些额外的webpack配置:

Vue-cli中使用less点击查看

React中配置less点击查看


嵌套

less可以像dom结构一样嵌套书写:

比如当前一组dom结构

<div class="box">
    <div class="box1"></div>
</div>
<div class="box2"></div>

用less给该组dom写样式,就可以这样写:

.box {
    width: 100px;
    heigth: 100px;
    
    .box1 {
        width: 50px;
        height: 50px;
    }
}

.box2 {
    width: 100px;
    heigth: 100px;
}

这样就表示了.box和.box1类样式的父子关系,.box和.box2的兄弟关系。

如果这里把.box2写到.box中,.box2的样式是不会生效的,因为结构错乱了。


注释

注释,分为注释单行和注释多行。这和js的注释方法是一致的。

// 注释单行用//表示

// @width: 100px;

// 注释多行,用/**/表示

/*.box {
    width: @width;
}*/

@

普通变量

// 定义一个宽度变量
@width: 100px;

// 使用变量
.box {
    width: @width; // width: 100px;
}

// 定义一个新变量,值是@width

@height: @width;

.box {
    height: @height; // height: 100px;
}

// 这一点,和js是一致的。

变量插值-选择器

@one-class: btn;

.@{one-class} {
    width: 100px;
}

// 编译结果为

.btn {
    width: 100px;
}

变量插值-urls

@urls: "../images";

.box {
    background: url("@{urls}/huaban.png");
}

// 编译结果为

.box {
    background: url("../images/huaban.png");
}

这里还有个常用的用法。

比如,当前页面中需要用到很多次设置背景图片,图片的地址相同,但是名称不同,

就可以结合mixins 这样来做:

.setbg(@url) {
    background-image: url("../images/@{url}");
}

假如此时.box元素需要设置一个“huaban.png”的图片:

.box {
    .setbg("huaban.png");
}

// 编译结果为:

.box {
    background-image: url("../images/huaban.png");
}

变量插值-import

@themes: "../../src/themes";

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

// 编译结果为

@import "../../src/themes/tidal-wave.less";

变量插值-属性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

// 编译结果为

.widget {
  color: #0ee;
  background-color: #999;
}

可变变量

就是通过@的叠加,实现深层次的变量赋值

@primary: pink;

.box {
    @color: primary;
    
    .box1 {
        color: @@color; // color: pink;
    }
}

延迟计算

less中的变量,可以先使用,后定义和赋值。

.box {
    color: @primary;
}

@primary: pink;

// 编译结果为

.box {
    color: pink;
}

这里有一个类似于js的作用域和变量提升的问题,

一个{ }就相当于一个局部作用域,

当同一个变量名称被多次赋值,那么该变量最终的值,

就是在该作用域下的最后被赋予的那个值。

比如:

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

// 编译结果为

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

这有点像css的自定义属性,

顺便延申阅读:css自定义属性

$ 变量属性

$会把已经存在的属性当作变量来使用。

通过属性,获取到对应的属性值。

比如:

.box {
    width: 100px;
    height: $width; // height: 100px;
}

// or:

.box {
    width: 100px;
    
    .box1 {
        width: $width; // width: 100px;
    }
}

变量属性同样存在同个作用域的取值问题:

它会使用该作用域内的最后一个该属性的值作为自己的值。

.box {
    color: blue;
    
    .box1 {
        background-color: $color; // background-color: pink;
    }
    
    color: pink;
}

Mixins

mixin,就是混合,或者混入。在整个前端的内容中,会时不时的看到这个概念。

它的作用是,把一些公用的内容抽取出来进行封装,供别的内容调用。

别的地方来调用,就会把这些公用的内容插入到调用元素的内容中,这个过程,就叫混合。

基础mixins

比如我们定义一个.bordered类:

.bordered {
    border: 1px solid red;
    border-radius: 4px;
}

现在.box类中也要用到.bordered里的属性,就可以在.box中调用.bordered:

.box {
    width: 100px;
    height: 100px;
    .bordered();
}

此时.box经过编译,就会变成:

.box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 4px;
}

分组和封装

当混入样式多了之后,需要对这些样式进行分组,方便分开调用。

而且为了混入样式表达不那么混乱,还需要把它们封装在一起。

比如有下面两个mixins样式:

.btn {
    width: 70px;
    height: 30px;
    border: 1px solid #333;
    outline: none;
}

.colors {
    color: #fff;
    background-color: red;
}

把上面两个mixins都封装在==#mixins==类下面:

#mixins() { // 注意这里有个(), 并且下面的内容之间没有分号或者逗号
    .btn {
        width: 70px;
        height: 30px;
        border: 1px solid #333;
        outline: none;
    }

    .colors {
        color: #fff;
        background-color: red;
    }
}

接下来,.box类中需要使用到.colors中的所有样式,那么就可以这样使用了:

.box {
    width: 100px;
    height: 100px;
    #mixins.colors();
}

映射[]

从less@3.5开始,还可以把单个属性变量放入mixins中。

#colors() {
    primary: blue;
    secondary: red;
}

// 在.box类中使用mixins中的属性:

.box {
    color: #colors[primary]; // color: blue;
    background-color: #colors[secondary]; // background-color: red;
}

带参数的mixins

创建一个mixins:

.set-color(@my-color) {
    color: @my-color;
}

使用:

.box {
    .set-color(#fff);
}

// 编译为

.box {
    color: #fff
}

如果是多个参数,要用==;==隔开。这一点注意和函数的区别。

.set-color(@color1; @color2; ...) {
    ...
}

还可以给参数设定默认值:

.set-color(@my-color: pink) { 
    color: @my-color;
}

.box {
    .set-color(); // 不传参的时候,就执行默认值
}

// 编译为

.box {
    color: pink;
}

和插值变量结合的带参数的mixins 可以参考插值变量 urls中的例子。

mixins中存放选择器

存放普通选择器:

.mixins {
    .box1 {
        color: pink;
    }
}

.box {
    .mixins();
}

// 编译为

.box .box1 {
    color: pink;
}

和&结合:

.mixins {
    &:hover {
        background-color: pink;
    }
}

.btn {
    .mixins();
}

// 编译为
.btn:hover {
    background-color: pink;
}

@arguments

当某个属性会用到所有参数时,把参数都写一遍会很麻烦, 可以直接用@arguments代替。

.shadow(@x: 0; @y: 0; @blur: 2px; @color: #000) {
    box-shadow: @arguments;
}

.box {
    .shadow();
}

// 编译为

.box {
    box-shadow: 0 0 2px #000;
}

!important

当!important作用到mixins的执行时,会给它里面的所有属性都加上!important

.my-color {
    color: pink;
    font-size: 16px;
}

.box {
    .my-color() !important;
}

// 编译为

.box {
    color: pink !important;
    font-size: 16px !important;
}

函数mixins

类似于vue的computed,就是为了得到某个值而创建

.averge(@x, @y) {
    @result: ((@x + @y) / 2); // 取平均值
}

.box {
    width: .averge(16px, 50px)[@result];
}

// 编译为

.box {
    width: 33px;
}

when

用来完成判断和循环,类似js的when语法(写法上会有区别)。

// 创建一个带when的mixins

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

// 使用

.generate-columns(4);

// 输出结果

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

判断相等

.number-check(@a) when (@a = 5) { ... }

判断大小

.max(@a; @b) when (@a > @b) {width: @a}

且判断

.mixin(@a) when (@a > 0) and (@a < 5) { ... }

或判断

.mixin(@a) when (@a = 1) , (@a = 3) { ... }

非判断

.mixin(@a) when not (@a < 0) { ... }

&

在less嵌套结构中,用&表示用{ }包裹住当前选择器的那个选择器。

.box {
    &.box1 {
        width: 100px;
    }
}

此时,当前选择器是.box1,包裹住.box1的是.box,所以&就表示.box

而&.box1就是css中的.box.box1,即同时具有.box和.box1的那个元素

和伪类结合使用:

.btn {
    color: #fff;
    
    &:hover {
        color: pink;
    }
}

此时,当前选择器是:hover,包裹住:hover的是.btn,所以&就表示.btn

.btn:hover就表示.btn元素悬浮时的样式

/************************************/

// 清除浮动

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

既然&能够作为父级选择器存在,那么它就可以这样使用:

.box {
    width: 100px;
    
    &1 {
        width: 50px;
    }
}

// 相当于:

.box {
    width: 100px;
    
    .box1 {
        width: 50px;
    }
}

+ - * /

计算以加减法为主。

单位相同的加减计算,会先计算出数字,然后给数字加上该计量单位,得出最终结果:

@width: 20px + 50px; // 70px

less的计量单位遵循以左为主

单位不同的加减计算,如果有能转换成相同单位的,则先转换为相同单位,再进行计算;

如果不能转换成相同单位的,则先计算出数字,再把左边第一个计量单位作为最终的计量单位。

@long-unit: 5cm + 10mm; // 6cm

@new-unit: 5 - 2cm - 5mm; // 2.5cm

@other: 2 + 5px -3cm; // 4px

对于乘除运算,以简单计算为主。毕竟复杂的单位换算,意义不大。

@base: 5% * 2; // 10%

calc()

执行一些简单的计算。

@leng: 50vh/2;

.box {
    width: calc(50% + (@leng - 20px));
}

~

是转义符。符号后面的内容,在编译时,会保持原样进行输出。

~"(min-width: 768px)" 会被编译为 (min-width: 768px)

less@3.5版本后,有直接简写方式,这种转义符号就不需要了。


导入

导入.css文件

@import 'demo.css'; // 分号不要忘记写

导入.less文件

@import 'demo.less';

// 当导入.less文件时,.less后缀可以省略

@import 'demo';

内置函数

if

语法:

if(判断条件, a, b)

// 如果判断条件得到的结果为true,则执行a值。 否则,执行b值

// 类似于js中的if(判断条件) {return a} else {return b}

如果判断条件只有1个,那么就用==()==包裹住判断条件。不然可能会在某些less版本中报错。

.box {
    width: if((2 > 1), 10px, 20px);
}

// 编译为

.box {
    width: 10px;
}

if中的且判断:

if((true) and (2 > 1), a, b)

if中的或判断:

if((2 > 1) or (3 > 2), a, b)

if中的非判断:

if(not (true), a, b)

escape

用于url编码,通俗点讲就是把特殊符号转换成乱码的形式。

escape('a=1')

// 编码结果:

a%3D1

e

用于去除引用,简单说就是去掉引号,引号中是啥就输出啥

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);

// 结果

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

% format

==%(string, arguments …)==用于格式化字符串。

第一个参数是一个包含占位符的字符串。占位符以百分号 % 开头,

后面跟着字母 sSdDaA。后续的参数用于替换这些占位符。

如果你需要输出百分号,可以多用一个百分号来转义 %%

使用大写的占位符可以将特殊字符按照 UTF-8 编码进行转义。

此函数将会对所有的特殊字符进行转义,除了 ()'~! 。空格会被转义为 %20

小写的占位符将原样输出特殊字符,不进行转义。

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

// 格式化结果:

format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

replace

用来替换字符串中的字符。

有4个参数,原字符串要被替换的字符用来替换的字符串匹配规则

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

// 替换结果

"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

@list

列表,数组。

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

// 结果

n: 4

extract

获取list列表中的数据

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

// 结果

value: coconut;

range

获取范围值。

有3个参数:

开始的值 :比如1或者1px,可选,默认为1

结束的值 :比如5或者5px,必须

增加幅度 :每次增加的值,可选,默认为1

value: range(4); // 从1开始,每次增加1,一直增加到4

// 结果:

value: 1 2 3 4;
value: range(10px, 30px, 10); // 开始值为10px,结束值为30px,每次增加10

// 结果:

value: 10px 20px 30px;

each

枚举,遍历

有2个参数:

list :可枚举对象,如数组,对象等

枚举规则 :枚举时执行的内容

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

// 编译为:

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

如果list是对象

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

// 结果:

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

ceil

类似于js的Math.ceil()

ceil(2.4)

// 结果

3

floor

类似于js的Math.floor()

floor(2.4)

// 结果

2

percentage

把数字变成百分比

percentage(0.5)

// 结果

50%

round

四舍五入。有2个参数:

1. 数字

2. 要保留的小数点后几位,默认为0,即结果取整数

round(1.67)

// 结果

2
round(1.67, 1)

// 结果

1.7

sqrt

开平方,取正数平方根

sqrt(25cm)

// 结果

5cm

abs

取绝对值

abs(25cm)

// 结果

25cm
abs(-1)

// 结果

1

pow

语法:pow(a, b) 表示a的b次幂

pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)

// 结果

1cm
0.0016
5
NaN
NaN%

mod

取余。语法:mod(a, b) 表示a % b的值

mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);

// 结果

NaNcm;
5cm
-1%;

min

取最小值

min(5, 10)
min(3px, 42px, 1px, 16px)

// 结果

5
1px

max

取最大值

max(5, 10)
max(3%, 42%, 1%, 16%)

// 结果

10
42%

isnumber

去掉符号后,是否为number类型

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

isstring

是否为字符串类型

isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false

iscolor

是否为颜色值

iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false
iscolor(7.8%);     // false
iscolor(keyword);  // false
iscolor(url(...)); // false

isunit

验证单位

isunit(11px, px);  // true
isunit(2.2%, px);  // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em);  // false
isunit(#ff0, pt);  // false
isunit("mm", mm);  // false

image-size

获取图片尺寸

包含两个宽高字段,image-width , image-height

image-size("file.png")

// 结果

10px 10px

data-uri

转化资源地址

data-uri('../data/image.jpg')

// 结果

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==')

// 在浏览器看到的结果为

url('../data/image.jpg')

还可以设置转化后的图片类型等参数

data-uri('image/jpeg;base64', '../data/image.jpg')
data-uri('image/svg+xml;charset=UTF-8', 'image.svg')

// 结果

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==')
url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E")
    
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 12:53:24  更:2022-03-06 12:55:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:25:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码