标签:float 介绍 环境 文件 div pre 语言 输入 -o
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
浏览器本身只能解析css文件,对于less无法解析。
要么对less进行编译,让他在node环境下转换成对应的css文件。
要么引入less后再引用对应的js文件
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>
less的编译依赖node环境,请先安装node.js
安装完毕后在cmd下输入:node -v
这个命令用来查询node的版本,查询到版本号则表示安装成功
在cmd环境下运行 npm install -g less
在要编译的less文件目录下打开cmd窗口,输入以下命令即可执行编译
lessc test.less test.css
即可将此目录下的test.less编译成test.css文件
/*定义变量*/
@gbColor:red;
.box{
width: 200px;
height: 100px;
/*使用变量*/
background-color: @gbColor;
}
编译结果
.box {
width: 200px;
height: 100px;
background-color: red;
}
.addBorder{
border:1px solid red;
}
.box{
width:100px;
height: 100px;
/*引用其他css类*/
.addBorder();
}
/*设置参数,且有默认的值*/
.addBorder(@size:1px){
border:@size solid red;
}
.box{
width:100px;
height: 100px;
/*引用并传递参数*/
.addBorder(10px);
}
.box{
width:100px;
height: 100px;
/*只针对子级div有效*/
> div{
display: float;
}
/*针对后代所有p标签都有效*/
p{
text-align:center;
}
}
div{
width:100px;
height: 100px;
&:nth-of-type(1){
background-color: red;
}
}
div{
width:400px;
height: 100px;
>.item{
/*运算 相当于33.3333%*/
width:1/3*100%;
}
}
你可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
标签:float 介绍 环境 文件 div pre 语言 输入 -o
原文地址:https://www.cnblogs.com/OrochiZ-/p/11567149.html