c语言中如何用less比较大小,less常用操作

选择器变量

让 选择器 变成 动态

/* Less */

@mySelector: #wrap;

@Wrap: wrap;

@{mySelector}{ //变量名 必须使用大括号包裹

color: #999;

width: 50%;

}

.@{Wrap}{

color:#ccc;

}

#@{Wrap}{

color:#666;

}

/* 生成的 CSS */

#wrap{

color: #999;

width: 50%;

}

.wrap{

color:#ccc;

}

#wrap{

color:#666;

}

复制代码less函数混合minxin

@bgc: #232424;

.changeBg(@c){//函数定义必须带个.并且前面不带@

background-color: @c;

}

.tem{

width: @tem;

height: @tem;

.changeBg(red);

}

复制代码循环(递归实现)

.less

.loop(@index) when(@index > 0){

.d@{index}{//当用本身的值时变量名时，要用大括号

width: @index * 1px;

}

.loop(@index - 1)

}

.loop(10);

/* 在css:

因为是递归，所以是类似于栈的弹出，

先进后出

*/

.d10 {

width: 10px;

}

.d9 {

width: 9px;

}

.d8 {

width: 8px;

}

.d7 {

width: 7px;

}

.d6 {

width: 6px;

}

.d5 {

width: 5px;

}

.d4 {

width: 4px;

}

.d3 {

width: 3px;

}

.d2 {

width: 2px;

}

.d1 {

width: 1px;

}

复制代码

效果如下：

值变量

/* Less */

@color: #999;

@bgColor: skyblue;//不要添加引号

@width: 50%;

#wrap {

color: @color;

background: @bgColor;

width: @width;

}

/* 生成后的 CSS */

#wrap {

color: #999;

background: skyblue;

width: 50%;

}

复制代码

嵌套

& 的妙用

& ：代表的上一层选择器的名字，此例便是header。

/* Less */

#header{

&:after{

content:"Less is more!";

}

.title{

font-weight:bold;

}

&_content{//理解方式：直接把 & 替换成 #header

margin:20px;

}

}

/* 生成的 CSS */

#header::after{

content:"Less is more!";

}

#header .title{ //嵌套了

font-weight:bold;

}

#header_content{//没有嵌套！

margin:20px;

}

复制代码

媒体查询

在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写

#wrap{

width:500px;

}

@media screen and (max-width:768px){

#wrap{

width:100px;

}

}

复制代码

Less 提供了一个十分便捷的方式

/* Less */

#main{

//something...

@media screen{

@media (max-width:768px){

width:100px;

}

}

@media tv {

width:2000px;

}

}

/* 生成的 CSS */

@media screen and (maxwidth:768px){

#main{

width:100px;

}

}

@media tv{

#main{

width:2000px;

}

}

复制代码

唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。

实战技巧

可以借助 Less 在元素中，去定义自己的私有样式。

/* Less */

#main{

// something..

&.show{

display:block;

}

}

.show{

display:none;

}

复制代码const main = document.getElementById("main");

main.classList.add("show");

复制代码

结果：

#main.show{

display:block;

}

.show{

display:none; //会被覆盖。

}

复制代码

方法的条件筛选

Less 没有 if else，可是它有 when

/* Less */

#card{

// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行

.border(@width,@color,@style) when (@width>100px) and(@color=#999){

border:@style @color @width;

}

// not 运算符，相当于 非运算 !，条件为 不符合才会执行

.background(@color) when not (@color>=#222){

background:@color;

}

// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行

.font(@size:20px) when (@size>50px) , (@size<100px){

font-size: @size;

}

}

#main{

#card>.border(200px,#999,solid);

#card .background(#111);

#card > .font(40px);

}

/* 生成后的 CSS */

#main{

border:solid #999 200px;

background:#111;

font-size:40px;

}

复制代码