less基础知识总结
- 1. 预处理器及less注释
- 2. 变量
- - 2.1 声明
  - 2.2 使用
  - - 2.2.1 属性
    - 2.2.2 url
    - 2.2.3 引入文件
  - 2.3 变量的延迟加载(Lazy Loading)
- 3. 嵌套规则
- 4. 混合(Mixins)
- - 4.1 普通混合
  - 4.2 参数
  - 4.3 匹配模式
  - 4.4 arguments
- 5. 运算
- 6. 避免编译
- 7. 继承
高级

less基础知识总结

1. 预处理器及less注释

种类

less
Sass
stylus

使用
其实，我们在vscode下下载一个插件easy less就可以直接写less代码了，我们需要引入他编译后的css代码，当然这里还有其他用法

命令行
浏览器端(注意引入文件的位置:代码的下面) 点击

注释

以 // 开头的注释，不会被编译到css文件中
以 /**/ 包裹的注释会被编译到css文件中

2. 变量

2.1 声明

使用@来声明一个变量

2.2 使用

2.2.1 属性

普通属性值

调用:@变量

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);// Usage
a,
.link {color: @link-color;
}
a:hover {color: @link-color-hover;
}
.widget {color: #fff;background: @link-color;
}

选择器和属性名

调用:@{ 变量 }

选择器

// Variables
@mySelector: banner;// Usage
.@{mySelector} {font-weight: bold;line-height: 40px;margin: 0 auto;
}

属性名

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

属性作为变量用$来选取属性(less的版本需要 > 3)

.widget {color: #efefef;background-color: $color;
}// 会编译成
.widget {color: #efefef;background-color: #efefef;
}// 还需要注意变量的延迟加载
.block {color: red; .inner {background-color: $color; }color: blue;
}
// 编译成
.block {color: red; .inner {background-color: $color; }color: blue;
}

2.2.2 url

调用：url("@{url}")

// Variables
@images: "../img";// Usage
body {color: #444;background: url("@{images}/white-sand.png");
}

2.2.3 引入文件

// Variables
@themes: "../../src/themes";// Usage
@import "@{themes}/tidal-wave.less";

2.3 变量的延迟加载(Lazy Loading)

当一个块级作用域加载完毕，再去赋值变量

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

输出

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

3. 嵌套规则

父子：基本嵌套规则
平级：&的使用（平级）

&所决定的而是选择器和选择器之间有没有空格，&所代表的就是父级选择器

.link {& + & {color: red;}& & {color: green;}&& {color: blue;}&, &ish {color: cyan;}
}

输出

.link + .link {color: red;
}
.link .link {color: green;
}
.link.link {color: blue;
}
.link, .linkish {color: cyan;
}

4. 混合(Mixins)

详情点击

4.1 普通混合

可以把选择器直接当做一个混合
并通过.name或者.name()来进行调用

把选择器当做混合

.a, #b {color: red;
}
.mixin-class {.a();
}
.mixin-id {#b();
}

输出

.a, #b {color: red;
}
.mixin-class {color: red;
}
.mixin-id {color: red;
}
/* 当然我们还可以通过 .a ,或者 .a() 来进行调用 */

4.2 参数

1. 不带输出的混合

详情点击

什么是不带输出的混合呢？
我们定义的混合，不会被编译到最终的css文件中
语法
使用.name(){ }来定义混合就可以了

定义混合

.my-mixin {color: black;
}
.my-other-mixin() {background: white;
}
.class {.my-mixin;.my-other-mixin;
}

输出

.my-mixin {color: black;
}
.class {color: black;background: white;
}

我们会发现带括号的没有被编译

2. 带参数的混合

我们可以想混合混合定义参数
并在调用的时候传递，着优点想我们的函数

定义混合

.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}

调用混合

#header {.border-radius(4px);
}
.button {.border-radius(6px);
}

3. 带参数并且有默认值的混合

参数还可以有默认值

定义

.border-radius(@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}

调用
如果我们不传参的话，可以不加括号进行调用

#header {.border-radius;
}

4. 带多个参数的混合

在最新版的less中，多个参数可以用逗号隔开，也可以用分号隔开
混合可以携带多个参数

定义并调用

.mixin(@color) {color-1: @color;
}
.mixin(@color; @padding:2) {color-2: @color;padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {color-3: @color;padding-3: @padding;margin: @margin @margin @margin @margin;
}
.some .selector div {.mixin(#008000);
}

输出

.some .selector div {color-1: #008000;color-2: #008000;padding-2: 2;
}

通过看参数我们似乎发现了一个缺点
- 定义多个参数的话，传递一个参数，他只能传到第一个参数
- 但是如果我想传递一个参数，这个参数值传递到padding中呢，下面要看命名参数

5. 命名参数

在传递参数的时候指定将参数传递给谁

.mixin(@color: black; @margin: 10px; @padding: 20px) {color: @color;margin: @margin;padding: @padding;
}
.class1 {.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {.mixin(#efca44; @padding: 40px);
}

输出

.class1 {color: #33acfe;margin: 20px;padding: 20px;
}
.class2 {color: #efca44;margin: 10px;padding: 40px;
}

4.3 匹配模式

详情点击
什么是匹配模式呢？
这就相当于一个钥匙开一把锁，我们有很多锁，想要开哪个锁，用哪个钥匙就可以了

在less中我们定义几种样式，这些样式上都有一个标识
我们通过这些标志就能用上这些样式

定义混合

.mixin(dark; @color) {color: darken(@color, 10%);
}
.mixin(light; @color) {color: lighten(@color, 10%);
}
.mixin(@_; @color) {display: block;
}

调用混合

@switch: light;.class {.mixin(@switch; #888);
}

令我们吃惊的是@_,我们并没有调用它，为什么他的样式会在里面呢？

@_表示的是无论我们调用谁，他都会跟过来

4.4 arguments

通俗的来说他的意思是将所有变量的值都打包到这里

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {-webkit-box-shadow: @arguments;-moz-box-shadow: @arguments;box-shadow: @arguments;
}
.big-block {.box-shadow(2px; 5px);
}

输出

.big-block {-webkit-box-shadow: 2px 5px 1px #000;-moz-box-shadow: 2px 5px 1px #000;box-shadow: 2px 5px 1px #000;
}

5. 运算

less中还可以进行一些简单的运算

width:(10px + 10)
/* 或者写成下面的两种形式
width:(10 + 10)px
width:(10 + 10px)
*/

6. 避免编译

加上~ " ",引号里的内容就不会被编译

7. 继承

语法

不支持参数，相当于在需要的样式前增加并集选择器
&:extend(选择器)，括号内调用混合 *all 把所有的相同名称的样式都继承下来

定义继承

nav ul {&:extend(.inline);background: blue;
}
.inline {color: red;
}

输出

nav ul {background: blue;
}
/*在inline后面添加了nav ul*/
.inline,
nav ul {color: red;
}

优缺点

性能比混合高
灵活度比混合低

高级

高级方面主要看一些函数，官网

less基础知识总结相关推荐

嵌入式Linux的OTA更新，基础知识和实现
嵌入式Linux的OTA更新,基础知识和实现 OTA updates for Embedded Linux, Fundamentals and implementation 更新的需要一旦嵌入式Li ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
嵌入式linux编程,嵌入式Linux学习笔记 - 嵌入式Linux基础知识和开发环境的构建_Linux编程_Linux公社-Linux系统门户网站...
注:所有内容基于友善之臂Mini2440开发板一.嵌入式Linux开发环境的构建嵌入式开发一般分为三个步骤: 1.编译bootloader,烧到开发板 2.编译嵌入式Linux内核,烧到开发板 3 ...
《计算机网络应用基础》模拟试卷(六),《计算机与网络应用基础知识1》模拟试卷...
<计算机与网络应用基础知识1>模拟试卷 (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 <计算机与网络应用基础知识1& ...
python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结视学算法 | 作者知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...
python常用变量名_python基础知识整理
Python Python开发 Python语言 python基础知识整理序言:本文简单介绍python基础知识的一些重要知识点,用于总结复习,每个知识点的具体用法会在后面的博客中一一补充程序: 一 ...
计算机基础知识掌握欠缺,《计算机基础知识》实验教学改革探讨.pdf
<计算机基础知识>实验教学改革探讨.pdf Science& TechnologyVision 科技视界科技探·索·争鸣计<算机基础知识>实验教学改革探讨 ...
python计算wav的语谱图_Python实现电脑录音（含音频基础知识讲解）
前言今天开始进入近期系列文章的第一篇,如何用 Python 来实现录音功能. 在开始"造轮子"之前,个人一直强调一个观点,如果有些东西已经有了,不妨直接去 github 上搜,用 ...
计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...
文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识第一部分一.单项选择题 1.世界上第一台电子数字计算机取名为( ). A.UNIVAC B.EDSAC C.E ...
java 前端基础知识_【计算机·知识】关于前端的计算机基础知识
原标题:[计算机·知识]关于前端的计算机基础知识作为一个刚刚入门的程序猿,你是否对专业知识有足够的了解?今天新闻君带你走进前端的世界. 前端的语言接触起来相对于后端的语言要容易不少,但前端的语言也有 ...

less基础知识总结

目录

less基础知识总结

1. 预处理器及less注释

2. 变量

2.1 声明

2.2 使用

2.2.1 属性

2.2.2 url

2.2.3 引入文件

2.3 变量的延迟加载(Lazy Loading)

3. 嵌套规则

4. 混合(Mixins)

4.1 普通混合

4.2 参数

4.3 匹配模式

4.4 arguments

5. 运算

6. 避免编译

7. 继承

高级

less基础知识总结相关推荐

最新文章

热门文章