织梦 帝国 php cms 媒体网站 哪个,网站建设效益,网络维护,一个app网站目录 一、什么是less二、基本使用2.1 基本语法2.2 变量插值2.3 延迟加载2.4 属性名变量2.5 嵌套2.6 父选择器 三、混合3.1 普通混合3.2 带参数的混合3.3 命名参数3.4 arguments 变量3.5 匹配模式 四、运算五、继承5.1 继承格式5.2 继承all 六、避免编译七、命名空间和访问符八、… 目录 一、什么是less二、基本使用2.1 基本语法2.2 变量插值2.3 延迟加载2.4 属性名变量2.5 嵌套2.6 父选择器 三、混合3.1 普通混合3.2 带参数的混合3.3 命名参数3.4 arguments 变量3.5 匹配模式 四、运算五、继承5.1 继承格式5.2 继承all 六、避免编译七、命名空间和访问符八、映射 一、什么是less ~~~~~~ Less(Leaner Style Sheets 精简样式表) 是一种动态样式语言属于 css 预处理器的范畴它扩展了 CSS 语言增加了变量、Mixin、函数等特性使 CSS 更易维护和扩展Less 既可以在 客户端 上运行 也可以借助 Node.js 在服务端运行。 Less 编译工具
Koala(opens new window)vscode 的 Easy LESS 插件
二、基本使用
2.1 基本语法
多行注释保留单行注释不被保留在编译生成的 CSS 中 声明变量作为普通属性值使用
/*
多行注释保留
*/
// 单行注释不被保留在编译生成的 CSS 中
width:100px;
.outer{width: width100px;height: width100px;border: 1px solid red;.inner{margin: 0 auto;margin-top: 50px;width: 50px;height: 50px;background-color: orange;}
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet typetext/css href../css/01.css/
/head
bodydiv classouterdiv classinner/div/div
/body
/html2.2 变量插值
变量用于选择器名、属性名、URL、import语句
/*
变量用于选择器名、属性名、URL、import语句
*/
selector:outer;
// 需要添加 {}
.{selector}{height: 200px;width: 200px;background-color: orange;
}
property: color;.widget {{property}: #0ee;background-{property}: #999;
}images: ../img;// Usage
body {color: #444;background: url({images}/white-sand.png);
}themes: ../../src/themes;// Usage
import {themes}/tidal-wave.less;2.3 延迟加载
当一个变量被声明多次会取最后一次的值并从当前作用域往外寻找变量。
//当一个变量被声明多次会取最后一次的值并从当前作用域往外寻找变量。
var:0;
.outer{var:1px;.inner{var:2px;height: 200px;width: 200px;background-color: orange;border: var solid black;var:3px;}width: 300 * var;height: 300 * var;
}
.outer {width: 300px;height: 300px;
}
.outer .inner {height: 200px;width: 200px;background-color: orange;border: 3px solid black;
}2.4 属性名变量
您可以很容易地将属性看作是使用$prop语法的变量
// 您可以很容易地将属性看作是使用$prop语法的变量
.outer{width: 200px;height: width;border: 1px solid black;
}
2.5 嵌套
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
//Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
.outer{width: 200px;height: 200px;border: 1px solid black;width:50px;height:50px;.inner1{width: width;height: height;background-color: orange;}.inner2{width: width;height: height;background-color: red;}
}2.6 父选择器
在嵌套规则中 表示父选择器常用于给现有选择器添加伪类。
//在嵌套规则中 表示父选择器常用于给现有选择器添加伪类。
// 如果没有 会被编译成后代选择器 .inner1 :hover。
.outer{width: 200px;height: 200px;border: 1px solid black;margin: 0 auto;position: relative;.inner1{width: 100px;height: 100px;background-color: orange;transition: 0.2s linear;position: absolute;top: 50px;left: 50px;:hover{box-shadow: 0 0 20px black;}}
}
如果没有 会被编译成后代选择器 a :hover。
除此之外 还能用于生成重复类名
//除此之外 还能用于生成重复类名
.box{-demo{width: 200px;height: 200px;background-color: red;}
}三、混合
3.1 普通混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式可理解为复制粘贴
//混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式可理解为复制粘贴。
.test{width: 100px;height: 100px;background-color: orange;
}
.outer{width: 200px;height: 200px;border: 1px solid black;.inner1{.test()}
}.test {width: 100px;height: 100px;background-color: orange;
}
.outer {width: 200px;height: 200px;border: 1px solid black;
}
.outer .inner1 {width: 100px;height: 100px;background-color: orange;
}3.2 带参数的混合
混合带参数参数需要按顺序传递//1.混合带参数参数需要按顺序传递
.border1(width,style,color){border: width style color;
}
.outer{width: 200px;height: 200px;.border1(1px,solid,black);
}.outer {width: 200px;height: 200px;border: 1px solid black;
}混合带参数并有默认值 需注意的是就算有默认值也要按顺序传递
//2.混合带参数并有默认值
.border2(width:2px,style,color:red){border: width style color;
}
.outer{.inner1{width: 100px;height: 100px;.border2(1px,solid);}
}3.3 命名参数
可以在向混合传参是指定参数名称从而不需要按顺序传入
//可以在向混合传参时指定参数名称从而不需要按顺序传入
.border1(width:2px,style,color){border: width style color;
}
.outer{width: 200px;height: 200px;.border1(style:solid,color:black);
}3.4 arguments 变量
arguments 变量包含了传入的所有参数
//arguments 变量包含了传入的所有参数
.box-shadow(x: 0, y: 0, blur:20px, color: #000){box-shadow: arguments;
}
.outer{height: 200px;width: 200px;border: 1px solid black;.box-shadow(0,0,color:red);
}3.5 匹配模式
在多个相同的混合中(参数个数必须相同)匹配特定的混合。
.mixin(dark, color) {color: darken(color, 10%);
}
.mixin(light, color) {color: lighten(color, 10%);
}
// _ 表示匹配所有
.mixin(_, color) {display: block;
}switch: light;.class {.mixin(switch, #888);
}.class {color: #a2a2a2;display: block;
}四、运算
计算结果以操作数最左侧的单位类型为准
//计算结果以操作数最左侧的单位类型为准
conversion-1: 5cm 10mm; // 6cm
conversion-2: 2 - 3cm - 5mm; // -1.5cm
conversion-3: 3.1 * 2cm; // 6.2cm
conversion-4: 4px / 2; // 4px / 2// conversion is impossible
incompatible-units: 1cm - 1px; // 0.97354167cm// example with variables
base: 5%;
filler: base * 2; // 10%
other: base filler; // 15%color: #224488 / 2; // #112244body{background-color: #112244 #111; // #223355
}
五、继承
5.1 继承格式
继承可让多个选择器应用同一组属性最终编译为并集选择器 其性能比混合高但灵活性比混合低
/*
继承可让多个选择器应用同一组属性最终编译为并集选择器
其性能比混合高但灵活性比混合低
*/
.inner1{:extend(.inner);background-color: orange;
}
.inner{width: 50px;height: 50px;
}
.inner1 {background-color: orange;
}
.inner,
.inner1 {width: 50px;height: 50px;
}5.2 继承all
可理解为把 all 前的选择器出现的地方全都替换为 extend 前的选择器 即把 .test 替换为 .replacement 生成一个新的选择器应用样式且不破坏原有的选择器
/*
可理解为把 all 前的选择器出现的地方全都替换为 extend 前的选择器
即把 .test 替换为 .replacement 生成一个新的选择器应用样式且不破坏原有的选择器
*/
.box.inner1{width: 200px;height: 200px;background-color: orange;
}
.inner2:extend(.inner1 all){}.box.inner1,
.box.inner2 {width: 200px;height: 200px;background-color: orange;
}
六、避免编译
通过加引号可以避免 Less 编译直接把内容输出到 CSS 中
//通过加引号可以避免 Less 编译直接把内容输出到 CSS 中
.outer{width: 200px 100px;height: 200px;background-color: orange;
}.outer {width: 200px 100px;height: 200px;background-color: orange;
}七、命名空间和访问符
有时出于组织结构或仅仅是为了提供一些封装的目的你希望对混合mixins进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合mixins和变量置于 #bundle 之下为了以后方便重用或分发
#bundle() {.button {display: block;border: 1px solid black;background-color: grey;:hover {background-color: white;}}.tab { ... }.citation { ... }
}现在如果我们希望把 .button 类混合到 #header a 中我们可以这样做
#header a {color: orange;#bundle.button(); // 还可以书写为 #bundle .button 形式
}八、映射
从 Less 3.5 版本开始你还可以将混合mixins和规则集rulesets作为一组值的映射map使用。
#colors() {primary: blue;secondary: green;
}.button {color: #colors[primary];border: 1px solid #colors[secondary];
}.button {color: blue;border: 1px solid green;
}learn more
