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

      

  • 相关阅读:
    REVERSE!REVERSE!REVERSE!
    java和数据结构的面试考点
    39. recover rotated sorted array恢复旋转排序数组
    33. Search in Rotated Sorted Array旋转数组二分法查询
    搜索旋转排序数组 II
    Eclipse 查找
    在Java中返回多个值
    Java的标识符
    fwprintf (File input/output) – C 中文开发手册
    CSS盒子模型介绍 | CSS Box Model: Introduction to the CSS box model (Miscellaneous Level 1) – CSS 中文开发手册
  • 原文地址:https://www.cnblogs.com/linjilei/p/5183568.html
Copyright © 2011-2022 走看看