目录
1 变量
1.1 选择器变量
1.2 属性变量
1.3 url变量
1.4 声明变量
1.5 变量的运算
1.6 变量的作用域
1.7 变量定义变量
2 嵌套
2.1 简单嵌套
2.2 & 的使用
2.3 媒体查询
3 混合
3.1 无参数方法
3.2 默认参数方法
3.3 方法的匹配模式
3.4 方法的命名空间
3.5 方法的条件筛选
3.6 数量不定的参数
3.7 方法使用 !inportant
3.8 循环方法 (递归调用)
3.9 属性拼接
3.10 基于混合的映射
4 继承
4.1 extend 关键字的使用
4.2 all 全局搜索替换
4.3 减少代码的重复性
5 条件表达式
5.1 带条件的混合
5.2 类型检测函数
5.3 单位检测函数
6 函数
7 导入
7.1 导入但是不编译
7.2 once 导入相同的文件只会执行一次
7.3 multiple 导入相同的文件可以执行多次
1 变量
1.1 选择器变量
【less】
@mySelecxtor: #sp;
@wrap: warp;
@{mySelecxtor} {
font-size: 60px;
font-family: 'Courier New', Courier, monospace;
color: yellow;
}
.@{wrap} {
width: 100px;
height: 100px;
}
#@{wrap} {
width: 200px;
height: 200px;
}
【css】
#sp {
font-size: 60px;
font-family: 'Courier New', Courier, monospace;
color: yellow;
}
.warp {
width: 100px;
height: 100px;
}
#warp {
width: 200px;
height: 200px;
}
1.2 属性变量
【less】
@borderStyle: border-style;
@solid: solid;
.wrap{
@{borderStyle}: @solid;
}
【css】
.warp {
border-style: solid;
}
1.3 url变量
当有相同的根目录时，使用这个比较方便
【less】
@images: "../images";
.box1 {
background: url("@{images}/111.jpg");
}
【css】
.box1 {
background: url("../images/111.jpg");
}
1.4 声明变量
类似于声明一个函数，使用时，加小括号调用
【less】
@background: { background: #000; }
#main {
@background();
}
【css】
#main {
background: #000;
}
1.5 变量的运算
在less中变量可以进行 + - * / 运算
【less】
@color: blue;
@border: 5px + 10; // 在连接运算的时候，注意添加空格
h1 {
font-size: @border *2 ;
color: @color;
}
.box {
font-size: @border + 10;
font-family: 楷体;
}
【css】
h1 {
font-size: 30px;
color: blue;
}
.box {
font-size: 25px;
font-family: 楷体;
}
1.6 变量的作用域
会优先使用距离自己更近的变量及其的值
【less】
@new: @a;
@a: 10px;
#main {
width: @new;
@a: 20px;
}
#sidebar {
width: @new;
}
【css】
#main {
width: 20px;
}
#sidebar {
width: 10px;
}
1.7 变量定义变量
【less】
@fond: @var;
@var: '666';
#wrap::after{
content: @fond;
}
【css】
#wrap::after {
content: '666';
}
2 嵌套
2.1 简单嵌套
【less】
.container {
width: 100%;
height: 100%;
#wrap {
width: 200px;
height: 300px;
li {
width: 100px;
height: 100px;
}
a {
color: pink;
}
}
}
【css】
.container {
width: 100%;
height: 100%;
}
.container #wrap {
width: 200px;
height: 300px;
}
.container #wrap li {
width: 100px;
height: 100px;
}
.container #wrap a {
color: pink;
}
2.2 & 的使用
& 表示当前选择器的父级
【less】
#content {
a {
color: pink;
&:hover {
color: red;
}
}
}
【css】
如果不加 & 符，就会把 :hover 当作一个选择器
#content a {
color: pink;
}
#content a:hover {
color: red;
}
2.3 媒体查询
【less】
#main {
@media screen {
@media (max-width: 768px) {
width: 100px;
}
}
}
【css】
@media screen and (max-width: 768px) {
#main {
width: 100px;
}
}
3 混合
3.1 无参数方法
【less】
在这边.card 和 .card()是等价的，为了区分，建议使用函数名加括号的方式
.card() {
background-color: yellow;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#wrap {
.card();
}
【css】
#wrap {
background-color: yellow;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
3.2 默认参数方法
【less】
.border(@a:10px, @b:50px, @c:30px, @color: red) {
border: 1px solid @color;
box-shadow: @arguments; // @arguments 表示使用全部参数
}
#wrap2{
.border()
}
【css】
#wrap2 {
border: 1px solid red;
box-shadow: 10px 50px 30px red;
}
3.3 方法的匹配模式
【less】
.triangle(top, @width: 20px, @color: green) {
border-color: @color transparent transparent transparent;
}
.triangle(right, @width: 20px, @color: green) {
border-color: transparent @color transparent transparent;
}
.triangle(bottom, @width: 20px, @color: green) {
border-color: transparent transparent @color transparent;
}
.triangle(left, @width: 20px, @color: green) {
border-color: transparent transparent transparent @color;
}
.triangle(@_, @width: 20px, @color: green) {
border-style: solid;
border: @width;
}
#main {
.triangle(bottom, 50px, blue);
}
@_ 是 Less 中的一个占位符参数，它的作用是接受任意数量的无名参数。在这个例子中，我们使用了这个占位符参数来定义 .triangle 类，使得它可以接受不同的方向参数（top、right、bottom、left）以及可选的宽度和颜色参数。这样我们就可以轻松地创建各种形状和颜色的三角形，而不需要针对每种情况都定义一个新类。
【css】
#main {
border-color: transparent transparent blue transparent;
border-style: solid;
border: 50px;
}
3.4 方法的命名空间
【less】
#card {
background: red;
.d(@w: 300px){
width: @w;
#a(@h: 300px) {
height: @h;
}
}
}
#wrap3 {
#card > .d > #a(100px); // 使用 > 号时，父元素不能加括号
}
#wrap4 {
#card > .d(100px);
}
【css】
#card {
background: red;
}
#wrap3 {
height: 100px;
}
#wrap4 {
width: 100px;
}
3.5 方法的条件筛选
【less】
#c {
// when and &&
.border1(@width, @color, @style) when (@width >= 100px) and (@color = red) {
border: @width @style @color;
}
// when not !
.border2(@width, @color, @style) when not (@width < 100px) {
border: @width @style @color;
}
// 逗号分隔符 ||
.border3(@width, @color, @style) when (@width > 100px), (@color = red) {
border: @width @style @color;
}
}
#mainN {
#c>.border1(100px, red, solid);
}
【css】
#mainN {
border: 100px solid red;
}
3.6 数量不定的参数
【less】
... 为ES6中的扩展运算符
.boxSha(...) {
box-shadow: @arguments;
}
#mainN2 {
.boxSha(1px 2px 3px red);
}
【css】
#mainN2 {
box-shadow: 1px 2px 3px red;
}
3.7 方法使用 !inportant
【less】
.test {
color: red;
margin-left: 30px;
}
.M {
.test() !important;
}
【css】
.M {
color: red !important;
margin-left: 30px !important;
}
3.8 循环方法 (递归调用)
【less】
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-@{i} {
width: (@i / @n) * 100%;
}
.generate-columns(@n, (@i + 1));
}
【css】
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
3.9 属性拼接
+代表逗号 +_ 代表空格
【less】
.b() {
box-shadow+: inset 1px 1px 2px #555;
}
.Mi {
.b();
box-shadow+: 1px 1px 2px #aa2828;
}
// -----------------------------------------
.Animation() {
transform+_: scale(2);
}
.Mai {
.Animation();
transform+_: rotate(15reg);
}
【css】
.Mi {
box-shadow: inset 1px 1px 2px #555, 1px 1px 2px #aa2828;
}
.Mai {
transform: scale(2) rotate(15reg);
}
3.10 基于混合的映射
【less】
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
【css】
.button {
color: blue;
border: 1px solid green;
}
4 继承
4.1 extend 关键字的使用
【less】
.a {
color: rgb(208, 0, 255);
.b {
letter-spacing: 40px;
font-weight: bold;
}
}
.main{
font-size: 40px;
&:extend(.a);
&:extend(.a .b);
}
【css】
.a,
.main {
color: #d000ff;
}
.a .b,
.main {
letter-spacing: 40px;
font-weight: bold;
}
.main {
font-size: 40px;
}
4.2 all 全局搜索替换
【less】
#main1 {
width: 200px;
}
#main1 {
&::after{
content: 'less is good';
}
}
#wrap:extend(#main1 all) {
width: 300px;
}
继承所有的 #main1
【css】
#main1,
#wrap {
width: 200px;
}
#main1::after,
#wrap::after {
content: 'less is good';
}
#wrap {
width: 300px;
}
4.3 减少代码的重复性
【less】
.Method {
width: 200px;
&::after{
content: 'less is good';
}
}
#M {
.Method
}
【css】
#M {
width: 200px;
}
#M::after {
content: 'less is good';
}
5 条件表达式
5.1 带条件的混合
比较运算符： = > < >= <=
【less】
.mixin(@a) when(lightness(@a) >= 50%) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50%) {
background-color: white;
}
.mixin(@a) {
color: @a;
}
.class1 {
.mixin(#ddd)
}
.class2 {
.mixin(#555)
}
【css】
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
5.2 类型检测函数
【less】
/*
检测值的类型：
iscolor
isnumber
isstring
iskeyword
isurl
....
*/
.mixin1(@a: #fff; @b:0;) when(iscolor(@a)) {
background-color: @a;
}
.mixin2(@a: #fff; @b:0;) when(isnumber(@b)) {
background-color: @b;
}
.class3 {
.mixin1(#ddd, 10);
.mixin2(#ddd, 10);
}
【css】
.class3 {
background-color: #ddd;
background-color: 10;
}
5.3 单位检测函数
/*
检测值的单位；
ispixel
ispercentage
isem
isunit
......
*/
6 函数
这边只介绍一个 color() 函数，用的时候直接查官网就行了
【less】
body {
color: color("#fff"); // color函数
}
【css】
body {
color: #fff;
}
7 导入
在一个 .less文件中导入其它 .less文件
@import './nav.less';
7.1 导入但是不编译
@import (reference) './bootstrap.less';
7.2 once 导入相同的文件只会执行一次
@import (once) './bootstrap.less';
@import (once) './bootstrap.less'; // 不会执行了
7.3 multiple 导入相同的文件可以执行多次
@import (multiple) './bootstrap.less';
@import (multiple) './bootstrap.less'; // 也会执行
参考文章
您阅读本篇文章共花了：
发表评论