less是一门css预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。良好的使用可以让代码输入节省很多时间
一般less的使用，可以下载一个叫koala的软件 百度即可，安装时最好不要有中文路径，然后在文件下创建一个Less格式（文件后缀.less）的文件 在koala中添加文件夹后右键编译文件，就会生成一个css文件，这样就可以在less文件中书写时，就会把编译后的css样式自动写在css文件里，使用的时候引用css文件 就可以了。
下面是less一些常见的用法：
首先了解什么是变量，变量就是没有固定的值是可以改变的，在使用时我们需要给变量取个名字叫变量名，然后在进行声明
- 变量: 存储数据的容器，数据本身可以修改
- 声明：@变量名称:变量的值;
less的使用可以有几种用法
使用
属性值中：@变量名称
选择器名中：@{变量名称}
属性名中：@{变量名称}
在路径中使用：@{变量名称} **注意加引号
在变量值中使用：@变量名称
在变量名中使用：@变量名称
@w: 100px;
@b: box;
@bg： background;
#{@b} ｛
width: @w;
height: @w;
@{bj}: red
｝
显示为
#box ｛
width： 100px;
height： 100px;
background: red;
｝
可以给变量增添运算
#｛@b｝1 ｛
width: @w*2;
height: @w*3;
background: red;
｝
显示为
#box1 ｛
width: 200px;
height: 300px;
background: red;
｝
运算的使用
运算时的单位识别
如果运算符的左右两侧都有单位，
加减乘除识别的是运算符左侧的单位
乘法识别的是运算符右侧的单位
@w: 100rem;
@rem: 64px;
#box {
width: @w/@rem;
width: @w*@rem;
width: @w+@rem;
width: @w-@rem;
}
显示为
#box {
width: 1.5625rem;
width: 6400px;
width: 164rem;
width: 36rem;
}
*变量名重名之后，后边会覆盖前边的
@w2: 100;
@rem2: 64;
#box {
width: @w2+@rem2+px;
}
显示
#box {
width：164 px；
}
这样写在单位和值之间用空格,尽量在变量中添加单位
作用域
写在{}之间 叫做局部变量，只可以在{}之间起作用
@w: 100px;
.box {
@w: 200px;
width: @w;
}
#box {
width: @w;
}
显示
.box {
width: 200px;
}
#box {
width: 100px;
}
less中的嵌套
优先识别自己样式
#box {
@w: 100px;
width: @w*3;
height: 200px;
}
li ｛
@w: 200px;
width: @w;
｝
div {
width：@w;
}
a {
color: red;
&:hover { // &上一级
color: blue;
}
}
显示
#box {
width: 300px;
height: 200px;
}
li {
width: 200px;
}
a {
color: red;
}
#box a:hover ｛
color: blue;
｝
混合
添加多个样式给一个变量中去使用
.bor {
background: red;
border: 2px solid #000;
}
//想让样式在css中不编译，添加一个（）在名字后 例.bor() {...}
#box {
width: 100px;
height: 100px;
.border
}
.div {
width: 200px;
height: 200px;
.border;
}
显示
#box {
width: 100px;
height: 100px;
background: red;
border: 2px solid #000;
}
.div {
width: 200px;
height: 200px;
background: red;
border: 2px solid #000;
}
带参数的混合
.name(@color) {
border: 1px solid @color;
}
#box {
.name(red)
}
#box2 {
.name(blue)
}
#box3 {
.name(#000)
}
显示
#box {
border: 1px solid #ff0000;
}
#box2 {
border: 1px solid #0000ff;
}
#box3 {
border: 1px solid #000000;
}
带多个参数的混合
**只要给了@属性后， 下面的样式中就必须要添加具体的数值
.name(@w,@color) {
border: @w solid @color;
}
#box {
.name(1px,red);
}
div {
.name(red);
}
//上面的没有给@w数值，2个变量只有1个 就不能显示，所以是错误的
#box2 {
.name(2px,blue);
}
#box3 {
.name(@color:#000,@w:3px);
}
显示
#box {
border: 1px solid #ff0000;
}
#box2 {
border: 2px solid #0000ff;
}
#box3 {
border: 3px solid #000000;
}
添加了参数默认值的混合
.name{@w:1px,@color:red} {
border: @w solid @color;
}
#box {
.name;
}
#box2 {
.name()
}
#box3 {
.name(2px,blue);
}
#box4 {
.name(@w:2px,@color:yellow);
}
.numble(@x,@y) {
@name: ((@x+@y) / 2);
}
div {
.numble（16px,50px）;
padding: @name;
}
结果
#box {
border: 1px solid #ff0000；
}
#box2 {
border: 1px solid #ff0000；
}
#box3 {
border：2px solid #0000ff；
}
#box4 ｛
border: 2px solid #ffff00；
｝
div {
padding: 33px;
}
这样Less就可以在多项样式上添加更加方便
.boxS() {
box-shadow+: 0 0 10px #000;
}
#box {
.boxS;
box-shadow+: inset 0 0 10px red;
}
显示
#box {
box-shadow: 0 0 10px #000, inset 0 0 10px red;
}
混合中的判断
给样式设置条件，只有条件成立后才会识别其中的样式
例
.width(@w) when (@w >= 200px)
{
width：@w；
}
#box1 {
.width(100px);
}
#box2 {
.width(200px);
}
#box3 {
.width(300px);
}
在css中显示
#box2 {
width: 200px;
}
#box3 {
width: 300px;
}
给出不同的条件下的样式，根据条件成立来选取不同的样式
.name(@w,@c,@dir) when (@dir = 1)
{
border-top: @w solid @c;
}
.name(@w,@c,@dir) when (@dir = 2)
{
border-right: @w solid @c;
}
.name(@w,@c,@dir) when (@dir = 3)
{
border-bottom: @w solid @c;
}
.name(@w,@c,@dir) when (@dir = 4)
{
border-left: @w solid @c;
}
#box {
.name(2px,red,3);
}
结果
#box {
border-bottom: 2px solid #ff0000;
}
上面设置不同的变量，当满足变量所要的条件后，就会执行其中的内容。当下面需要变量的样式时，就会找到所含的变量名称后，变量有确定数值的就按照变量走，没有确定数值，就需要自己设置，当对应设置的数值满足上面变量的条件后，就会执行
> < = >= <=
.name(@w,@c,@dir) when (判断条件)
{
//条件成立之后，执行的内容
}
.name(@dir) when (@dir = top)
{
border-top: 10px solid #000;
}
.name(@dir) when (@dir = right)
{
border-right: 10px solid #000;
}
.name(@dir) when (@dir = bottom)
{
border-bottom: 10px solid #000;
}
.name(@dir) when (@dir = left)
{
border-left: 10px solid #000;
}
#box {
.name(left); //找到所有叫 .name()的混合
}
循环
.name(@numble) when (@numble >= 0)
{
.name(@numble - 10); //函数调用
width: @numble; //执行语句
}
.box {
.name(100px);
}
结果
.box {
width: 0px;
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
width: 60px;
width: 70px;
width: 80px;
width: 90px;
width: 100px;
}
从小到大排列 先写函数调用后写执行语句;
函数调用，都是上面的执行完后才会往下执行，当.box给了.name变量的数值为100px往后执行；
满足了when >=0,继续往下执行；
这时.name为100px-10;继续往下width: 就为90px了；
这时 .name(@numble - 10);这一条还没执行完，会继续在条件满足下运行，当最后结果为不小于0后；
就会往下执行width=0了；
然后继续回到上面执行之前的结果，一直到最后为结果显示
从大到小排列 先执行语句后写写函数调用
.name(@numble) when (@numble >= 0)
{
width: @numble; //执行语句
.name(@numble - 10);//函数调用
}
.box {
.name(100px);
}
结果
.box {
width: 100px;
width: 90px;
width: 80px;
width: 70px;
width: 60px;
width: 50px;
width: 40px;
width: 30px;
width: 20px;
width: 10px;
width: 0px;
}
当.box给了最上面.name数值条件得到满足，直接执行width: 为100px了；
然后往下执行，-10后 继续执行width: 90px;...
后面循环 直到最后结果小于0的条件。
网友评论