css less语法

曾经终败给现在 2021-07-24 22:44 454阅读 0赞

less
    
      1、安装
       cnpm install -g less
       (1)耗费性能,不能在开发环境中使用
    	   在文件引入less编译器
    		<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.3/less.min.js" ></script>
    		或下载好的less.js文件
    		
    	   引入less样式
    	   <link rel='stylesheet/less' type='text/css' href='less文件路径'></link>	
    	
       (2)命令行编译less文件
    		在less文件所在文件夹,启动命令行
    		lessc 待编译文件.less 编译后文件.css
      2、语法
    	
    	(0)可直接计算表达式
    		width:2*3px;
    		
    	(1)设置变量
    		@变量名:样式
    		直接@变量名使用
    
    	(2)样式的引用
    		.a{xx}
    		.b{.a;} 即可引用a类的样式
    	
    	(3)带参数的样式引用,相当于函数
    		.a(@变量)  //该样式不会显示出来
    		{
    			样式:@变量
    		}
    		.b{
    			.a(样式值);//不加引号
    		}
    		
    	(4)带参数默认值的样式引用
    		.a(@变量:样式值)  //该样式不会显示出来
    		{
    			样式:@变量
    		}
    		.b{
    			.a(样式值);//不加引号,若不传值则按默认值显示
    		}
    	
    	(5)同名函数,不同样式
    		.a(不加@名称,@参数,...){样式}
    		.a(不加@名称2,@参数,...){样式}
    		,a(@_,@参数,...){样式};  表示不论选择哪个函数,都会带上该函数内的样式
    		
    		.b{.a(不加@名称,值,...);...}使用
    	
    	
    	(6)能看出层级的嵌套
    		选择器1{
    			样式;
    			选择器2{
    				样式;
    			}
    		}
    		表示设置选择器1元素的样式,及其子元素选择器2的样式
    	
    	(7)自动填充参数
    	
    		.a(@参数1,@参数2,@参数3,..)
    		{
    			样式:@arguments; //会将参数全部放在这里,若设置了默认值,则调用该函数则不需要传入参数
    		}
    		
    		.b{.a(值1,值2,...);}
    	
    	(8)!important
    		
    		在样式后添加该标记,会让样式后追加该标记
    		在方法会调用类后追加,会让其所有属性都追加该标记
    	
    	(9)不编译指定内容
    	.a{
    		content:~"内容";//在浏览器上将会原样显示
    	}

代码示例:  
less文件:

@main-color:red;
    
    .a{ 
      background-color: @main-color;
    }
    .b{ 
      color:@main-color;
    }
    
    .c{ 
    	border: solid 1px red;
    }
    .d{ 
    	.c;
    }
    
    .e(@bk){ 
    	background-color: @bk;
    }
    .f{ 
    	.e(red);
    }
    .g(@col:red)
    { 
    	color:@col;
    }
    .h{ 
    	background-color: yellow;
    	.g;
    }
    .i{ 
    	border:solid 2*3px red !important;
    }
    
    .j{ 
    	color:red; h1{ 
    		color:yellow;
    	}
    }
    
    .k(@width:1px,@solid:solid,@color:red){ 
    	border:@arguments;
    }
    .l{ 
    	.k;
    }