LESS 基础
LESS是一种动态语言,属于【CSS预处理语言】的一种
在 CSS 语法的基础上,为 CSS 加入【程序式语言的特性】
使CSS更加简洁、适应性更强、可读性更佳,更易于web的开发、维护。
扩展名
.less
设置输出路径
.less文件右键—设置输出路径—找到对应的css文件
1.变量
LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单
变量以@开头,变量名与变量值之间用【冒号】分隔
定义变量:
@skin:red;
使用变量
.box{
color:@skin;
}
注:如果变量需要镶嵌在字符串之中,就必须需要写在@{}之中。
背景图中的路径中的字符串
@url:"../static/base/images/";
.price{
color: @skin;
background:url("@{url}1.jpg");
}
属性名称中的字符串
@side : left;
.rounded {
border-@{side}-radius: 5px;
}
2、嵌套
.navbox{
height:40px;
background-color:@skin;
ul{
margin:0 auto;
}
li{
float:left;
a{
color:#fff;
}
}
}
.navbox ul {
margin: 0 auto;
}
.navbox li {
float: left;
}
.navbox li a {
color: #fff;
}
&可以用于指代父级
a{
color:#fff;
&:hover{
color:red;
}
}
a:hover {
color: red;
}
3.混入
是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样
不带变量的混入
//定义了一个混入
.whitebg{
background-color: #fff;
}
.tuijianbox{
//调用混入
.whitebg;
}
.remenbox{
.whitebg;
}
加小括号避免编译
.whitebg(){
background-color: #fff;
}
带参数的混入
//定义混入
.bg(@bgc){
width:100px;
height:100px;
background-color:@bgc;
}
.degnlu{
//调用混入时传入参数
.bg(#ff0000);
}
.footer{
.bg(#cccccc);
}
.degnlu {
width: 100px;
height: 100px;
background-color: #ff0000;
}
.footer {
width: 100px;
height: 100px;
background-color: #cccccc;
}
1)带参数但不带默认值 的混入,调用时必须传参,否则报错
2)带参数并且带有默认值的混入,调用时可以不传参,不传参时使用默认值 ,传参使用传入的参数
.bg(@bgc:#ffffff){
width:100px;
height:100px;
background-color:@bgc;
}
.degnlu{
.bg;
}
.footer{
.bg(#cccccc);
}
.degnlu {
width: 100px;
height: 100px;
background-color: #ffffff;
}
.footer {
width: 100px;
height: 100px;
background-color: #cccccc;
}
3)多个参数
- 定义混入时,参数逗号隔开
.box(@w:100px,@h:200px,@bgc:#ffffff){
width:@w;
height:@h;
background-color:@bgc;
}
- 调用时,一 一对应
.footer{
.box(200px,400px,red);
}
- 调用时如果不一一对应,就要命名参数
//调用时命名参数
.box(@bgc:red,@h:400px);
4)@arguments变量
作为一组值,指代所有的参数
.shadow(@x:0,@y:0,@blur:10px,@color:#000){
// box-shadow:@x @y @blur @color;
box-shadow:@arguments;
}
4.继承、扩展
:extend(“混入名”)
- 编译之后,联合声明
.center{
text-align: center;
}
.testbox1:extend(.center){
width:200px;
height:100px;
}
.testbox2{
&:extend(.center);
width:200px;
height:100px;
}
.center,
.testbox1,
.testbox2 {
text-align: center;
}
.testbox1 {
width: 200px;
height: 100px;
}
.testbox2 {
width: 200px;
height: 100px;
}
5.计算
LESS支持一些算术运算,例如加号(+),减号( - ),乘法(*)和除法(/)的操作
less会为你自动推断数值的单位,所以不必每一个值都加上单位
注意:涉及优先级时以()进行优先级运算
.wrapbox{
width:(1000px - 20) / 2;
padding:0 20px;
}
ter){
width:200px;
height:100px;
}
.testbox2{
&:extend(.center);
width:200px;
height:100px;
}
.center,
.testbox1,
.testbox2 {
text-align: center;
}
.testbox1 {
width: 200px;
height: 100px;
}
.testbox2 {
width: 200px;
height: 100px;
}
## 5.计算
LESS支持一些算术运算,例如加号(+),减号( - ),乘法(*)和除法(/)的操作
less会为你自动推断数值的单位,所以不必每一个值都加上单位
注意:涉及优先级时以()进行优先级运算
.wrapbox{
width:(1000px - 20) / 2;
padding:0 20px;
}