less
vscode生成html模板
vscode： ！号 + tab键 生成html模板改为 html:5 + tab键 生成html模板
HBuilderX less编译
在less文件上单击鼠标右键--点击外部命令--点击less编译,每次修改完less代码都要重新编译一下
vscode less 编译
安装Easyless 插件,书写完less文件后,ctrl + s 保存后即可生成对应的css文件,之后如果修改less文件的代码时ctrl + s 保存后即可同步更新到css文件
注释
less中的注释
/*这是注释，这种注释在生成的css文件里是可以看见的*/
// 这也是注释,这种注释在生成的css文件里是不可以看见的
变量
@变量名:变量值
@background1:red;
表示:background1 变量的值为红色
@w:200px
表示: w变量的值为200px
@c:color
表示:c变量的值为:color 样式名
- 用变量去定义一个属性名的时候,在用的时候,一定要给这个名字加上一对大括号
@images:"../images"(定义路径时,该路径一定要写在引号中)
表示: images变量表示 该 ../images 路径
用变量去定义一个路径的时候,在用的时候,一定要给这个路径加上一对大括号
示例less文件
@background1:#000;
@w:200px;
@c:color;
@images:'../images';
.one{
width:@w;
height:100px;
background-color:@background1;
}
.two{
width:@w;
height:100px;
@{c}: #000;
background-image:url("@{images}/1.jpeg");
}
/*这是注释，这种注释在生成的css文件里是可以看见的*/
//这也是注释,这种注释在生成的css文件里是不可以看见的
示例less文件生成的css文件
.one {
width: 200px;
height: 100px;
background-color: #000;
}
.two {
width: 200px;
height: 100px;
color: #000;
background-image: url("../images/1.jpeg");
}
/*这是注释，这种注释在生成的css文件里是可以看见的*/
混合(类似于js中的函数,在less中存在混合提升,声明的混合可以在less任何地方调用)
-
写法1:把另一个选择器的名字放在这个样式里,这个样式就会具有放入的选择器的样式
不带参数的混合代码会在对应的css文件中显示
示例的less样式
.common{
font: size 20px;
line-height:30px;
background-color:red;
color:#fff;
}
.demo{
width:100px;
height:30px;
.common;
}
示例less样式对应生成的css样式
.common {
font: size 20px;
line-height: 30px;
background-color: red;
color: #fff;
}
.demo {
width: 100px;
height: 30px;
font: size 20px;
line-height: 30px;
background-color: red;
color: #fff;
}
- 混合带参数(带参数的混合代码不会在对应的css文件中显示)
示例less代码
.border(@w,@style,@color){
border:@w @style @color;
}
//带参数的混合代码不会在对应的css文件中显示
.demo1{
background-color:#008c8c;
.border(2px,solid,orange);
}
示例less代码对应的css代码
.demo1 {
background-color: #008c8c;
border: 2px solid orange;
}
- 混合带参数,参数可以带值(混合不传值时,用的是默认参数，混合传值时,用的是传入的参数)
示例less代码
.bac(@color:blue){
// 这里@color参数的默认值为 blue
background-color:@color
}
.demo2{
.bac();
}
混合不传值时,用的是默认参数
示例less代码对应的css代码
.demo2 {
background-color: blue;
}
示例less代码
.bac(@color:blue){
background-color:@color
}
.demo2{
.bac(orange);
}
混合传值时,用的是传入的参数，这里@color形参对应的实参为 orange
示例css代码
.demo2 {
background-color: orange;
}
-
混合带多个参数
示例less代码 .border(@w:2px,@style:solid,@color:red){ border:@w @style @color; } .demo2{ .border(@w:1px,@color:blue) //传入值时,形参就取传入的值,不传入值时,形参就取默认值 }示例less代码对应的css代码 .demo2 { border: 1px solid blue; }示例less代码 .border(@w:2px,@style:solid,@color:red){ border:@w @style @color; } .demo2{ .border(@color:blue) }示例less代码对应的css代码 .demo2 { border: 2px solid blue; } -
混合处理样式兼容
示例less代码 .boxShaow(@left:5px,@top:2px,@z:5px,@color:orange){ -webkit-box-shadow:@left,@top,@z,@color; -moz-box-shadow:@left,@top,@z,@color; -ms-box-shadow:@left,@top,@z,@color; -o-box-shadow:@left,@top,@z,@color; box-shadow:@left,@top,@z,@color; } .demo2{ .boxShaow(); }示例css代码 .demo2 { -webkit-box-shadow: 5px, 2px, 5px, orange; -moz-box-shadow: 5px, 2px, 5px, orange; -ms-box-shadow: 5px, 2px, 5px, orange; -o-box-shadow: 5px, 2px, 5px, orange; box-shadow: 5px, 2px, 5px, orange; }
匹配模式(if判断)
边框制作三角形
.angle{
width:0;
height:0;
overflow:hidden;
// 兼容IE6以下的最小高度
border-width:10px;
border-color:transparent transparent red transparent;
//这里为上三角
border-style:solid;
}
示例less代码(这里top、left、bottom、right为条件)
表示调用.triangle 时,如果传入的条件为 top,那么执行.triangle匹配模式(条件)为top的混合
表示调用.triangle 时,如果传入的条件为 left,那么执行.triangle匹配模式(条件)为left的混合
表示调用.triangle 时,如果传入的条件为 right,那么执行.triangle匹配模式(条件)为right的混合
表示调用.triangle 时,如果传入的条件为 bottom,那么执行.triangle匹配模式(条件)为bottom的混合
.triangle(top,@w,@color){
border-width:@w;
border-color:transparent transparent @color transparent;
border-style:solid;
}
.triangle(bottom,@w,@color){
border-width:@w;
border-color:@color transparent transparent transparent;
border-style:solid;
}
.triangle(left,@w,@color){
border-width:@w;
border-color:transparent @color transparent transparent;
border-style:solid;
}
.triangle(right,@w,@color){
border-width:@w;
border-color:transparent transparent transparent @color;
border-style:solid;
}
.triangle(@_,@w,@color){
//公用的样式,需要放到下面这个class里面,第一个参数是固定格式(@_),这里的@_可以填top、bottom、left、right
// 例如填left值,.triangle会将公共样式与匹配到left匹配模式中的样式都添加到使用.triangle的样式中
width:0;
height:0;
overflow:hidden;
}
.demo3{
.triangle(left,@w:10px,@color:blue);
}
表示调用.triangle 时,如果传入的条件为 top,那么执行.triangle匹配模式为top的混合
表示调用.triangle 时,如果传入的条件为 left,那么执行.triangle匹配模式为left的混合
表示调用.triangle 时,如果传入的条件为 right,那么执行.triangle匹配模式为right的混合
表示调用.triangle 时,如果传入的条件为 bottom,那么执行.triangle匹配模式为bottom的混合
示例less代码对应的css代码
.demo3 {
border-width: 10px;
border-color: transparent blue transparent transparent;
border-style: solid;
width: 0;
height: 0;
overflow: hidden;
}
嵌套
- & 代表上一层的选择器,即父级选择器
示例less代码
.demo4{
width:200px;
height:100px;
h1{
color:#000;
a{
color:orange;
&::before{
content:"你好";
display:inline-block;
background-color:#000;
}
}
}
&:hover{
background-color:blue;
}
}
示例less代码对应的css代码
.demo4 {
width: 200px;
height: 100px;
}
.demo4 h1 {
color: #000;
}
.demo4 h1 a {
color: orange;
}
.demo4 h1 a::before {
content: "你好";
display: inline-block;
background-color: #000;
}
.demo4:hover {
background-color: blue;
}
写html代码时,嵌套的越浅越好,因为浏览器的蜘蛛会爬你的网页,如果嵌套的越深,会降低嵌套内容的权重
- 写html代码时,嵌套的越浅越好,因为浏览器的蜘蛛会爬你的网页,如果嵌套的越深,会降低嵌套中内容的权重
运算(注意运算符号前后应该加上空格,否则会报错,运算规则同数学上的运算规则)
示例less代码
@v:200px;
.demo6{
width:@v + 100
}
示例less代码对应的css代码
.demo6 {
width: 300px;
}
示例less代码
@v:200px;
.demo6{
width:@v - 100
}
示例less代码对应的css代码
.demo6 {
width: 100px;
}
示例less代码
@v:200px;
.demo6{
width:@v * 100
}
示例less代码对应的css代码
.demo6 {
width: 20000px;
}
示例less代码
@v:200px;
.demo6{
width:@v / 100
}
示例less代码对应的css代码
.demo6 {
width: 2px;
}
不希望less编译
示例less代码
.demo7 {
// IE浏览器中的透明度使用方法,表示该元素的透明度为0.5
filter: ~'alpha(opacity:50)';
}
不希望less编译的less代码,将其放入 ~'' 中
例如 ~'不希望less编译的代码'
示例less代码对应的css代码
.demo7 {
filter: alpha(opacity:50);
}
