本文转自  http://blog.csdn.net/xuyonghong1122/article/details/51986472

在使用CSS的时候,总会有这个想法

  • 这个属性值老是重复写好烦
  • 这个属性值我在前面那个CSS文件中写过,好想直接拿过来用
  • CSS能不能像其他程序性语言一样用一个变量来代替需要重复利用的内容呢

鉴于以上的想法并非我一人会想到,只要是做过前端的肯定都会思考过这个问题,无奈CSS基本可以说没有语法可依循,于是有了LESS框架

什么是CSS?

作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念


什么是LESS ?

它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。


LESS的原理

本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

环境配置

  • 以webStorm为例,在开始使用LESS之前你必须要安装以下环境
  • node.js
  • node.js命令行输入“npm install -g less”安装less;
  • 打开webstorm,File→Settings→Tools→File Watchers,点击右侧绿色“+”号


  • 当然还有一种办法使用LESS就是直接使用HBuilder编辑器,自带LESS插件


    开始使用

    本例以HBuilder编写,在我们写LESS文件的时候会自动帮我们生成CSS文件

  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>
    <link href="css/index.css" rel="stylesheet" />
    <body>
    <div class="index-home">
    <span>This is index</span>
    </div>
    </body>
    </html>

      

    我们的CSS文件会自动生成,不用做任何修改,我们只需要修改我们的LESS文件即可

    上LESS!!!!

  • @index-color:red;
    .index-home{
    box-sizing: content-box;
    background-color: @index-color;
    }

      写完之后我们去看一下index.css生成的代码

  • 是的背景色变成了红色,我们看一下运行效果 

    是的,就是这么好使,如果你以为本文结束了,那就错了,这只能满足当前页面引用当前LESS文件中的变量,如何引用其他变量呢? 
    LESS文件中是可以引用其他LESS文件的,玩过Java的都知道,引用一个类会用到什么关键字,没错,import,大家准备上车!!!!

    现在我想在index.less文件中去引用一个基类LESS文件,该如何书写呢 
    首先写base-less.less 

  •  @base-font-color:white;
    

      

    在base-less文件中写一个base-font-color:white来控制文本颜色为白色 
    在index.less中引用,如下

     
    很简单明了,引用结束我们看一下效果是怎么样的 


    看到这里,有人会问,能不能直接引用LESS文件啊?当然可以啊

    我们可以直接在客户端使用 .less(LESS 源文件),只需要从 http://lesscss.org下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:

    LESS 源文件的引入方式与标准 CSS 文件引入方式一样:

  • <link rel="stylesheet/less" type="text/css" href="index.less">
    
    <link rel="stylesheet/less" type="text/css" href="index.less">
    

      其实LESS是有自己的生命周期的,哦,不好意思,是作用域… 
    简单的讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。 
    简单明了,代码示例:

  •  @width : 20px;
    .index{
    @width : 30px;
    .centerDiv{
    width : @width;// 此处应该取最近定义的变量 width 的值 30px
    }
    }
    .leftDiv {
    width : @width; // 此处应该取最上面定义的变量 width 的值 20px
    }

    终于到最后了,最后也是LESS最厉害的作用之一了,你可以把LESS当成JS来玩

  • @import "base-less.less";
    @index-color: red;
    .index-home {
    box-sizing: content-box;
    background-color: @index-color;
    color: @base-font-color;
    .marginTop(100px);
    }
    .marginTop(@distance) {
    margin-top: @distance;
    }

      

    可以直接调用”函数”来完成一些属性的赋值,看下效果如何

    看到这里,基本介绍就结束了,LESS确实很方便,另外如果你是一名Android开发者,这个人你一定的关注一下,他的博客都是干货———-他就是NoHttp的作者:严振杰博客地址

LESS CSS使用方法 , CSS也能跟JS一样玩的更多相关文章

  1. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  2. CSS Reset方法

    CSS Reset 即重设浏览器的样式.在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小. 但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset ...

  3. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

  4. CSS开发框架技术OOCSS编写和管理CSS的方法

    目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM).这些方法试图对CSS采用面向对象的编程原则.样式语言与面向对象的设计原则在概念之间存在一定的问题.欠缺经验的人员可能不会 ...

  5. HTML中引入CSS的方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...

  6. jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

  7. 表格细边框的两种CSS实现方法

    在网页制作中,细边框这个制作方法是必不可少的.这里介绍2种常见的表格细边框制作方法,均通过XHTML验证. <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  8. CSS命名方法(笔记)

    划分CSS的一些方法(不同的划分方法都有利与弊,要记住,最合适项目的才是最好的): ①按功能划分:将字体的CSS存放在font.css.将控制颜色的CSS存放在color.css.将控制布局的CSS存 ...

  9. 标签种类及CSS引入方法

    标签种类及CSS引入方法 标签种类: 一:块级标签(block) ——> 独占一行,默认宽度与内容无关,宽高可设   (hr 块级标签) 二:行内块标签(inline-block) ——> ...

随机推荐

  1. vue2.0在页面中自定义组件模块,以及页面与组件之间的数据传递

    1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...

  2. 深入理解new String()

    一. 引言 new String("hello")这样的创建方式,到底创建了几个String对象? 二. 分析 String s1 = "HelloWorld" ...

  3. 操作系统(2)_进程管理_李善平ppt

    所有程序都有CPU和io这两部分,即使没有用户输入也有输出. CPU最好特别忙,io空闲无所谓. 程序/数据/状态 三个维度来看进程. 等待的资源可能是io资源或者通信资源(别的进程的答复). 一个进 ...

  4. JDBC中 mysql数据库的连接工具类 Java登录 及增删改查 整理 附带:Navicat Premium 11.0.12中文破解版.zip(下载)mysql数据库工具

    先写一个工具类,有实现MySQL数据库连接的方法,和关闭数据库连接.关闭ResultSet  结果集.关闭PreparedStatement 的方法.代码如下: package com.swift; ...

  5. 51nod——2487小b和环

    dp[ i ][ 0 ] : 第i个位置不取 dp[ i ][ 1 ] : 第i个位置取 这样就可以得到状态转移方程: dp[i][0]=max(max(dp[i][0],dp[i-1][1]),dp ...

  6. MySQL - 表中某个状态字段的状态表示区分最好用数字,如status - [9999:失败,1111:成功]

    表中某个状态字段的状态表示区分最好用数字,如status - [9999:失败,1111:成功]

  7. linux配置邮箱服务

    配置邮箱服务Linux常见的邮箱客户端是mail或mutt:服务端有sendmail服务(centos 5).postfix服务(centos 6).这里我们不使用本地的邮件服务,而是使用本地的邮件客 ...

  8. 【CSS】简略说明css的权重之分

    /*权重 :id > class > 标签 (小环境) 权重:内联 > 内部 > 外部 (大环境) 小环境处于内部环境中 */ <style> #p1{ /* id ...

  9. JZOJ 3508. 【NOIP2013模拟11.5B组】好元素

    3508. [NOIP2013模拟11.5B组]好元素(good) (File IO): input:good.in output:good.out Time Limits: 2000 ms  Mem ...

  10. [USACO]Bovine Genomics

    Description 给定两个字符串集合A,B,均包含N个字符串,长度均为M,求一个最短的区间[l,r],使得不存在字符串\(a\in A,b\in B,\)且\(a[l,r]=b[l,r]\) , ...