因为新公司需要用less来写样式,对于用惯了css的我来说还是觉得有点麻烦

但是呢,都是有个过程嘛,学习必须走起嘛。

写到半中央发现一个写的特别好的less帖子,就不写。

http://www.w3cplus.com/css/less(转载)

http://www.bootcss.com/p/lesscss/(转载)(又发现一个)

1.less的简介(定义+为什么用less)

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。

作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

2.less的用法

1.基础用法

清单 1. LESS 文件

@color: #4D926F; 

 #header {
color: @color;
}
h2 {
color: @color;
}
@var: 1px;
body {
border: @var solid #f00;
}

经过编译生成的 CSS 文件如下:

清单 2. CSS 文件

 #header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
body{
border:1px solid #f00;
}

less的学习(css)的更多相关文章

  1. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  2. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  3. 开始学习css

    今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...

  4. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  5. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...

  6. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  7. 学习CSS的思路(转)

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  8. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  9. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  10. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

随机推荐

  1. 获得android应用的版本号

    在开发的过程中,需要获得版本号 private PackageInfo getVersion() { PackageManager packageManager = MyApplication.get ...

  2. Asp.net MVC + EF6.0 经常出现的问题

    1.运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...

  3. sed使用详解

    sed :Stream EDitor(流编辑器) sed :模式空间(默认不编辑源文件,仅对模式空间中数据做处理) sed [options] 'AddressCommand' file ... -n ...

  4. yum php56

    美国时间2014年11月13日,PHP开发团队,在「PHP 5.6.3 is available|PHP: Hypertext Preprocessor」上公布了PHP5.6系的最新版本「PHP 5. ...

  5. View的工作原理

    一.认识ViewRoot和DecorView 当Activity对象被创建的时候,会将DecorView添加到Window中,同时创建ViewRootImpl对象(ViewRoot对应于ViewRoo ...

  6. VB6.0 String 用法总结

    问题一 VB 去掉字符串的头尾的空格 使用trim() 如: trim(" hello world ")= "hello world" 问题二 判断一个字符串是 ...

  7. Oracle EBS-SQL (PO-11):检查采购订单退货数.sql

    select msi.segment1                                    物料编码,     --  msi.inventory_item_id return_it ...

  8. 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东

    引擎版本:2.1.4 ide:vs2012 一般协作开发情况下,有意思无意将bin.obj等一些目录添加到版本管理中是很烦人的事儿,在VS中不断地编译程序集和提交将带来版本暴增问题.如果你用的是乌龟S ...

  9. 论山寨手机与Android联姻 【7】 MTK手机软件系统

    MTK feature phone的基本功能是通话和短信,要了解MTK手机软件系统,首先需要简要回顾几个移动网络通讯的基本概念. Figure 38. GSM-GPRS Architecture Co ...

  10. 论山寨手机与Android联姻 【1】MTK亮相的历史背景

    [1]MTK亮相的历史背景如果说1960年代是大型机(Mainframe)的时代,1970年代是小型机(Microcomputer)的时代,那么1980年代无疑是个人电脑(PC)的时代,而1990年代 ...