zoukankan      html  css  js  c++  java
  • LESS 学习记录(简单入门)

      什么是 LESS


      LESS是一种动态样式语言,属于 CSS 预处理语言的一种。它使用类似 CSS 的语法,但是 赋予了动态语言的特性,比如变量、继承、运算、函数等,方便 CSS 的编写和维护。

      使用 LESS


         在开发环境下的时候,推荐直接使用浏览器使用 LESS。

    1.   下载 LESS.js 文件。
    2.   页面中引入 styles.less 文件所有 .less 必须在 LESS.js 前引入。(服务器必须设置 .less 文件的 MIME 为 text/css)
    3.   引入 JS 文件

         开发完毕后,推荐使用 node.js 进行预编译,将 .less 编译成 .css

    1.   通过 npm 安装
        npm install -g less
    2.   安装完毕后,将 .less 编译成 .css
        lessc style.less > style.css
    3.   引入该 style.css 文件

      以下是自己尝试的玩意.

      .less 文件

    @red:red;	// 设置变量
    @blue:blue;	// 变量放顶部,以后调整的时候直接调整变量
    @size:22px;
    @darkblue:darken(@blue,10%);	// 执行函数,返回加深后的颜色
    @url:"http://static.cnblogs.com/images/adminlogo.gif";
    @name:active;
    
    #div{
    	h3{	// 嵌套
    		@size:32px;
    		color:@red;	// 调用变量
    		font-size:@size;
    		&.@{name} {	// 选择器插值
    			font-size:@size+10;
    			background:url("@{url}") no-repeat;	// 字符串插值
    		}
    	}
    	h4 {
    		color:@blue;
    		font-size:@size+10;	// 运算
    		&:hover {	// 调用变量
    			.h4-hover(#333);	// 调用属性集合 将参数传进去
    		}
    		&:before{
    			@var: ~`"hello".toUpperCase() + ','`;
    			content:"@{var}";
    		}
    	}
    }
    .h4-hover(@color){	// 属性集合,可接受一个参数
    	border:1px solid @color;
    	color:@darkblue;
    }
    /* 当 .less 文件被编译成 .css 的时候这条注释还在 */
    // 当 .less 文件被编译成 .css 的时候这条注释不见了
    

      编译后的 css 

    #div h3 {
      color: red;
      font-size: 32px;
    }
    #div h3.active {
      font-size: 42px;
      background: url("http://static.cnblogs.com/images/adminlogo.gif") no-repeat;
    }
    #div h4 {
      color: blue;
      font-size: 32px;
    }
    #div h4:hover {
      border: 1px solid #333;
      color: #0000cc;
    }
    #div h4:before {
      content: "HELLO,";
    }
    /* 当 .less 文件被编译成 .css 的时候这条注释还在 */
    

      

  • 相关阅读:
    【转】用微软的Live Writer离线写新浪博文
    【转】充满想象力的 Web 调色板
    【转】安装Windows Live Writer后需要做的五件事
    【转】Form Design 设计友善的表单
    【转】从电子政务网络建设迈向政府数据中心建设
    (CF1394 A)Boboniu Chats with Du
    (CF1384B2)Koa and the Beach (Hard Version)
    牛客第十场自闭
    ORACLE 日期加减操作 xiao
    python 占位符
  • 原文地址:https://www.cnblogs.com/linjilei/p/5183568.html
Copyright © 2011-2022 走看看