如何使用less(变量,混合,匹配,运算,嵌套...)

如何使用less及一些常用的(变量,混合,匹配,运算,嵌套...)

less的介绍及编译工具

什么是less

1.LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

less的编译工具

  1. Koala 考拉 --编译的时候如果没有建CSS文件夹 Koala会自动给你生成一个
    如何设置语言

    如何编译
    -

  2. 让webstorm支持less编译:

    • 安装node.js --- 这是一个包管理工具 以后还会用到
    • WIN+R
    • 输入 npm install less
  3. .....

less的语法

Ps:下面的知识点会用到上面的知识点 (比如说在混合中会用到变量 加深印象_)

  1. 注释

    • // 只在less中显示
    • /**/ 会在编译好的css文件中显示
  2. 变量

    • 定义变量用@
      • less中的写法
      @ly_width:100px;
      .box {
      	width:@ly_width;
      }
      
      • 编译后在css中显示的是
      .box {
      	width:100px;
      }
      
  3. 混合

    • 不带参数的混合
      • 先上less中的代码 如果想在.one中应用.border的样式怎么办?
      @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border {
      	border:1px solid red;
      }
      .one {
      	width:@ly_width;
      	height:@ly_height;
      	background-color:@ly_color;
      }
      
      • 写成下面的样子
      @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border {
      	border:1px solid red;
      }
      .one {
      	width:@ly_width;
      	height:@ly_height;
      	background-color:@ly_color;
      	.border;
      }
      
      • 编译后在css中显示的是
      .border {
        	border:1px solid red;
      }
      .one {
        	width: 100px;
        	height: 200px;
        	background-color: #008000;
        	border: 1px solid red;
      }
              ```
      
    • 带参数的混合---不带默认值 (可以传多个参数,以逗号或者分号隔开,推荐用分号 下面以一个参数为例)
      • less中的写法
      @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border(@border_width) {
      	border:@border_width solid red;
      }
      .one {
      	width:@ly_width;
      	height:@ly_height;
      	background-color:@ly_color;
      	.border(1px);
      }
      
      • 编译后在css中显示的是
      .one {
        	width: 100px;
        	height: 200px;
        	background-color: #008000;
        	border: 1px solid #ff0000;
      }
      
    • 带参数的混合---带默认值 (可以传多个参数 下面以一个参数为例)
      • less中的写法
      @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border(@border_width:3px;) {
      	border:@border_width solid red;
      }
      .one {
      	width:@ly_width;
      	height:@ly_height;
      	background-color:@ly_color;
      	.border();
      }
      
      • 编译后在css中显示的是
      .one {
        	width: 100px;
        	height: 200px;
        	background-color: #008000;
        	border: 3px solid #ff0000;
      }
      
    • 在解决css3兼容性时候经常用到
      • 解决border-radius兼容
      .border_radius (@radius: 5px) {
      	-webkit-border-radius: @radius;
      	-moz-border-radius: @radius;
      	-ms-border-radius: @radius;
      	-o-border-radius: @radius;
      	border-radius: @radius;
      }
      
  4. 匹配模式

    • 可以理解成if 和上面的混合有些相似
      • less中的写法
      //定义上,下,左,右边框的样式
      .border(top;@border_width:5px;@border_color:red){
      	border-top:@border_width solid @border_color;
      }
      .border(bottom;@border_width:5px;@border_color:red){
      	border-bottom:@border_width solid @border_color;
      }
      .border(left;@border_width:5px;@border_color:red){
      	border-left:@border_width solid @border_color;
      }
      .border(right;@border_width:5px;@border_color:red){
      	border-right:@border_width solid @border_color;
      }
      //如果想写通用的样式 可以在下面的代码中写 格式是固定的 
      .border(@_,@border_width:5px;@border_color:red){
      	border-color:yellow;
      }
      .border_use1 {
      	//选择和if差不多 如果是left就调用上面对应的
      	.border(left);
      }
      .border_use2 {
      	//选择和if差不多 如果是right就调用上面对应的
      	.border(right);
      }
      
      • 编译后在css中显示的是
      .border_use1 {
      	border-left:5px solid #ff0000;
      	border-color:yellow;
      }
      .border_use2 {
      	border-right:5px solid #ff0000;
      	border-color:yellow;
      }
      
  5. 运算

    • 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算...
      • less中的写法
      @ly_width:100px;
      .one {
      	width:@ly_widht + 100;
      }
      
      • 编译后在css中显示的是
      .one {
      	width:200px;
      }
      
  6. 嵌套

    • 可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性
      • html结构
      <div class="one">
      	<div class="two"></div>
      </div>
      
      • less中的写法
      @ly_width:100px;
      @ly_height:200px;
      @ly_color:red;
      .one {
      	width:@ly_width;
      	height:@ly_height;
      	background-color:@ly_color;
      	.two {
      		background-color: green;
      	}
      }
      
      • 编译后在css中显示的是
      .one {
      width: 100px;
      height: 200px;
      background-color: #ff0000;
      }
      .one .two {
        background-color: green;
      }
      
  7. @arguments变量

    • 可以包含所有的变量,将变量一起处理
      • less中的写法
      //和前面提到的混合一起举个栗子  
      .border(@border_width;@border_style;@border_color){
      	border:@arguments;
      }
      .one {
      	.border(1px;solid;red);
      }
      
      • 编译后在css中显示的是
      .one {
      	border:1px solid #ff0000;
      }
      
posted @ 2016-11-07 19:57  枫起叶落  阅读(29597)  评论(1编辑  收藏  举报