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

  

LESS 学习记录(简单入门)的更多相关文章

  1. mybais学习记录一——入门程序

    一.传统连接数据库和执行sql的不足 1.数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响 数据库性能. 设想:使用数据库连接池管理数据库连接. 2. ...

  2. Quartz学习——Quartz简单入门Demo(二)

    要学习Quartz框架,首先大概了解了Quartz的基本知识后,在通过简单的例子入门,一步一个脚印的走下去. 下面介绍Quartz入门的示例,由于Quartz的存储方式分为RAM和JDBC,分别对这两 ...

  3. Java设计模式学习记录-简单工厂模式、工厂方法模式

    前言 之前介绍了设计模式的原则和分类等概述.今天开启设计模式的学习,首先要介绍的就是工厂模式,在介绍工厂模式前会先介绍一下简单工厂模式,这样由浅入深来介绍. 简单工厂模式 做法:创建一个工厂(方法或类 ...

  4. 学习记录----简单的原生js路由

    在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发 ...

  5. SpringMVC学习记录一——入门介绍和入门程序

    1       springmvc框架 1.1      什么是springmvc springmvc是spring框架的一个模块,springmvc和spring无需通过中间整合层进行整合. spr ...

  6. 安卓学习-- RecyclerView简单入门

    一.加入JAR包 第一感觉这个东东,好复杂,没ListView来的快,方便 在项目中加入android-support-v7-recyclerview.jar包 这个包在extras\android\ ...

  7. gulp学习笔记--简单入门

    一.准备工作 1.gulp是基于nodeJS的前端构建工具,所以全局安装nodeJS 2.利用npm全局安装gulp. npm install -g gulp 3.在项目根目录下新建文件package ...

  8. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. springboot 学习之路 1(简单入门)

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

随机推荐

  1. 1、webservice的简单使用

    1.新建一个web端项目 2.点击添加项,选择web服务 3.在已经建好的项目中写一个方法 4.发布(发布方法选文件系统,web需要管理员权限) 生成文件夹: 5.配置IIS(略) 6.调用webse ...

  2. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  3. F - To the Max

    Given a two-dimensional array of positive and negative integers, a sub-rectangle is any contiguous s ...

  4. Linux压缩那些事儿

    tar简介 Linux的压缩命令的源文件只能有一个,这意味在压缩之前不得不先将要压缩的所有文件打包成一个包,然后再压缩包,这样来完成对多个文件的压缩.所以在了解解压缩之前就必须先了解打包命令. Lin ...

  5. document的一点点

    var str = "hello world" document.write(str.length)输出字符串长度   12 给string 添加样式 <p>Big: ...

  6. Equal

    package com; public class StringEquals { public static void main(String[] args) { String s1=new Stri ...

  7. yii去除index.php的入口脚本显示为seo友好的url

    1.去除入口脚本需要在重写url,如果你的webserver软件时Apache的话,必须配置httpd.conf,搜索“LoadModule rewrite_module modules/mod_re ...

  8. word转pdf字体格式变乱的问题

    完成word转pdf的功能之后,本地测试没问题,然后发布到服务器上,就遇到了字体变乱的问题,如下: 由于我本地发布后导出没有出现同样情况,而服务器和本地的最大区别在于字体库,于是,把服务器上关于需要用 ...

  9. C#项目实例中读取并修改App.config文件

    C#项目是指一系列独特的.复杂的并相互关联的活动,这些活动有着一个明确的目标或目的,必须在特定的时间.预算.资源限定内,依据规范完成.项目参数包括项目范围.质量.成本.时间.资源. 1. 向C#项目实 ...

  10. Windows 10 解决 0x80070021 错误

    Windows 10 已经不支持 aspnet_regiis -i. 启动和关闭Windows功能中安装 ".NET Framework 4.6 高级服务" 即可解决. 以下是借鉴 ...