LESS
1、注释
// 不会被编译/**/ 会被编译
2、变量
@bgColor:yellow; .border{ border:2px solid pink;}h1{ width:80%; height:60px; .border; color: #000; ...
LESS
1、注释
// 不会被编译
/**/ 会被编译
2、变量
@bgColor:yellow;
.border{
border:2px solid pink;
}
h1{
width:80%;
height:60px;
.border;
color: #000;
background:@bgColor;
span{
font-size: 12px;
font-weight: 700;
}
}
3、嵌套
nav.top{
background:#333;
height: 50px;
ul{
display: flex;
width:960px;
height: 50px;
margin: 0 auto;
li{
a{
display: block;
line-height: 50px;
padding:0 20px;
color: #fff;
&:hover{
color: #000;
}
}
&:hover{
background:pink; //表示鼠标悬浮在li元素上的颜色改变
}
}
/* li:hover{
background:pink;
} */
}
}
4、运算
@w:960px;
.box{
width:@w/2 - 100;
}
5、混合
.title{
font-family: '楷体';
font-size:20px;
background: pink;
}
.box{
width:100px;
height:100px;
.title;
}
5.1 混合（带参数，传递参数）
.border(@borderWidth:1px,@borderColor:#ccc){
border:@borderWidth solid @borderColor;
}
.box{
.border(10px,#000);
width:100%;
height:50px;
}
.box2{
width:400px;
height:400px;
.border(5px,red);
}
6、匹配
//bootstrap3以及之前版本基于less开发的，之后版本基于sass开发的
//公共样式 @_表示公共样式
.btn(@_){
display:inline-block;
text-align: center;
background: #09c;
color: #fff;
}
.btn(sm){
padding:3px 8px;
font-size: 14px;
border-radius: 2px;
box-shadow: 3px 3px 3px #333;
}
.btn(md){
padding:4px 10px;
font-size: 16px;
border-radius: 4px;
box-shadow: 4px 4px 4px #333;
}
.btn(lg){
padding:5px 15px;
font-size: 18px;
border-radius: 4px;
box-shadow: 5px 5px 5px #333;
}
6.1 匹配（更灵活的匹配，带参数）
.btn(@_,@bgColor,@color){
display:inline-block;
text-align: center;
}
.btn(sm,@bgColor,@color){
padding:3px 8px;
font-size: 14px;
border-radius: 2px;
box-shadow: 3px 3px 3px #333;
background: @bgColor;
color: @color;
}
.btn(md,@bgColor,@color){
padding:4px 10px;
font-size: 16px;
border-radius: 4px;
box-shadow: 4px 4px 4px #333;
background: @bgColor;
color: @color;
}
.btn(lg,@bgColor,@color){
padding:5px 15px;
font-size: 18px;
border-radius: 4px;
box-shadow: 5px 5px 5px #333;
background: @bgColor;
color: @color;
}
//调用匹配
.btn1{
.btn(lg,#000,#fff);
}
7、避免编译:使用'~'符号避免编译
.box{
width:'~100px + 300px*2px';
}
8、@arguments 包含所有传递进去的参数
.border(@borderWidth,@borderStyle,@borderColor){
border:@borderWidth @borderStyle @borderColor;
border:@arguments;
}
.box{
.border(1px,solod,red);
}
Sass
//sass，不兼容css,且语法严格
$width: 200px; //必须有空格
.box
width: $widtg
height: 500px
//scss 兼容css语法
$color:red;
.box{
background: $color;
}
//scss全局变量与局部变量
$color:pink; //全局变量
.box{
$bgcolor:yellow; //局部变量
color:$color;
background: $bgcolor;
}
