Less
vs code 使用less
-
**在扩展包搜索 less ,找到 easy less **
-
安装完后重启
-
文件>首选项>设置
-
搜 less或less.compile,点击 Easy LESS configuration或less找到 setting.json
-
在json配置中加入,less.compile(less配置)
"less.compile": { "compress": false,//是否压缩 "sourceMap": false,//是否生成map文件,有了这个可以在调试台看到less行数 "out": true, // 是否输出css文件,false为不输出 "outExt": ".css", // 输出文件的后缀,小程序可以写'wxss' }
less安装
$ npm install -g less
1、变量
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
请注意,变量实际上是“常量”,因为它们只能定义一次。
可变插值
选择器名称,属性名称,URL和@import
语句。
// Variables
@my-selector: banner;
// Usage
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
变量名
也可以使用变量名称定义变量:
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
编译为:
content: "I am fnord.";
2、混合蛋白
一组属性集中到一个规则中,另一些规则可通过该规则来使用这些属性
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
.bordered;
}
3、嵌套规则
类似于HTML结构,&代表当前选择器的父对象,也可表示产生重复的类名
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
}
&也可表示产生重复的类名、多&、更改选择器的顺序、组合爆炸
//重复的类名
.parent{
&-son{
}
&-daughter{
}
}
.parent .parent-son{}
.parent .parent-daughter{}
//多&
.parent{
&&{}
& &{}
&+&{}
&,&{}
}
.parent.parent{}//交集选择器
.parent .parent{}//后代选择器
.parent+.parent{}//兄弟选择器
.parent,.parent{}//并集选择器
//更改选择器的顺序
.parent{
.son{
.like &{
color:yellow;
}
}
}
.like .parent .son{
color:yellow;
}
//组合爆炸
p, a{
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
a + p,
a + a
{
border-top: 0;
}
4、嵌套指令和冒泡
media
、font-face
、keyframe
可以与选择器相同的方式嵌套,指令放在最上面,并且相对于同一规则集中其他元素的相对顺序保持不变。这称为起泡。
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
}
@media screen {
.screen-color {
color: green;
}
}
@media screen and (min-width: 768px) {
.screen-color {
color: red;
}
}
}
font-face
、keyframe
只冒泡,身体没有改变
5、运作方式
算术运算+
,-
,x
, /
可以在任意数量,颜色或可变的操作。
数学运算会在加,减或比较它们之前考虑单位并转换数字。结果为最左侧有明确说明单位的单位类型。
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm
如果转换是不可能的或没有意义,则将忽略单位。
@incompatible-units: 2 + 5px - 3cm; // result is 4px
乘法和除法不会转换数字。Less将按原样对数字进行运算,并为结果明确指定单位类型。
@base: 2cm * 3mm; // result is 6cm
对颜色进行的操作始终会产生有效的颜色。如果结果的某个颜色尺寸最终大于ff
或小于00
,则该尺寸将四舍五入为ff
或00
。如果alpha最终大于1.0
或小于0.0
,则将alpha舍入为1.0
或0.0
。
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
6、转义(试了不行)
转义允许您将任意字符串用作属性或变量值。除插值外,里面的任何东西~"anything"
或~'anything'
按原样使用。
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
结果是:
.weird-element {
content: ^//* some horrible but needed css hack;
}
7、职能
Less提供了各种功能,可以转换颜色,操纵字符串和进行数学运算。
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
}
8、命名空间和访问器
#header a {
color: orange;
#bundle > .button;
}
9、范围
Less的作用域与编程语言非常相似。首先在本地查找变量和混入,如果找不到,编译器将在父作用域中查找
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
10、延伸
Extend是一个Less伪类,它将合并的选择器与匹配其引用的选择器合并。
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
产出
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
扩展语法
扩展要么附加到选择器,要么放置在规则集中。看起来像是带有选择器参数的伪类(可选),后跟关键字all
:
它可以包含一个或多个要扩展的类,以逗号分隔。
.e:extend(.f) {}
.e:extend(.g) {}
// the above an the below do the same thing
.e:extend(.f, .g) {}
扩展附加到选择器
附加到选择器的扩展看起来像一个普通的伪类,带有选择器作为参数。一个选择器可以包含多个extend子句,但是所有扩展都必须在选择器的末尾。
- 在选择器之后扩展:
pre:hover:extend(div pre)
。 - 选择器和扩展之间允许有空格:
pre:hover :extend(div pre)
。 - 允许多个扩展:
pre:hover:extend(div pre):extend(.bucket tr)
-请注意,这与pre:hover:extend(div pre, .bucket tr)
- 这是不允许的:
pre:hover:extend(div pre).nth-child(odd)
。扩展必须是最后一个。
如果规则集包含多个选择器,则它们中的任何一个都可以具有extend关键字。在一个规则集中扩展的多个选择器:
.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
// body
}
扩展“全部”
当在扩展参数中最后指定all关键字时,它告诉Less将该选择器作为另一个选择器的一部分进行匹配。将复制选择器,然后仅将选择器的匹配部分替换为扩展名,从而创建一个新的选择器。
例:
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
产出
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
减少CSS大小
使用扩展代替Mixins
.my-inline-block() {
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.my-inline-block {
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
组合样式/更高级的混音
替代mixin的方法-mixins仅可用于简单的选择器
如果有两个不同的html块,需要应用相同的样式,可以使用扩展来关联两个区域。
li.list > a {
// list styles
}
button.list-style {
&:extend(li.list > a); // use the same list styles
}
混合蛋白
.a, #b {
color: red;
}
.mixin-class {
.a();括号可要可不要
}
.mixin-id {
#b();括号可要可不要
}
不输出混音
如果要创建一个mixin,但又不想输出该mixin,则可以在其后加上括号。
.my-mixin {这个输出
color: black;
}
.my-other-mixin() {这个不输出
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
输出
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
受保护的命名空间
如果名称空间具有保护,则仅当保护条件返回true时,才使用由其定义的混合。命名空间保护的评估方式与mixin的保护方式完全相同,因此接下来的两个mixin的工作方式相同:
#namespace when (@mode=huge) {
.mixin() { /* */ }
}
#namespace {
.mixin() when (@mode=huge) { /* */ }
}
default
对于所有嵌套的名称空间和mixin,假定该函数具有相同的值。永远不会评估以下mixin,因此保证其警惕之一是错误的:
#sp_1 when (default()) {
#sp_2 when (default()) {
.mixin() when not(default()) { /* */ }
}
}
参数混合
该@arguments
变
@arguments
在mixin内部有特殊含义,它包含调用mixin时传递的所有参数。如果您不想处理单个参数,这将很有用:
.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;
}