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 的时候这条注释还在 */
    

      

  • 相关阅读:
    反射,Expression Tree,IL Emit 属性操作对比
    vue2.0 创建项目
    vue-cli3.0 Typescript 项目集成环信WebIM 群组聊天
    vue-property-decorator vue typescript写法
    TypeScript中是使用强类型函数作为参数
    应用监控与管理Actuator
    ES数据库下载安装
    删除SDE用户报ORA-00604 ORA-21700
    ArcGIS中的WKID
    改变您的HTTP服务器的缺省banner
  • 原文地址:https://www.cnblogs.com/linjilei/p/5183568.html
Copyright © 2011-2022 走看看