less的学习(css)
因为新公司需要用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)的更多相关文章
- 学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
- css知多少(2)——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- 如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...
- 【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
- 学习CSS的思路(转)
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
随机推荐
- 获得android应用的版本号
在开发的过程中,需要获得版本号 private PackageInfo getVersion() { PackageManager packageManager = MyApplication.get ...
- Asp.net MVC + EF6.0 经常出现的问题
1.运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...
- sed使用详解
sed :Stream EDitor(流编辑器) sed :模式空间(默认不编辑源文件,仅对模式空间中数据做处理) sed [options] 'AddressCommand' file ... -n ...
- yum php56
美国时间2014年11月13日,PHP开发团队,在「PHP 5.6.3 is available|PHP: Hypertext Preprocessor」上公布了PHP5.6系的最新版本「PHP 5. ...
- View的工作原理
一.认识ViewRoot和DecorView 当Activity对象被创建的时候,会将DecorView添加到Window中,同时创建ViewRootImpl对象(ViewRoot对应于ViewRoo ...
- VB6.0 String 用法总结
问题一 VB 去掉字符串的头尾的空格 使用trim() 如: trim(" hello world ")= "hello world" 问题二 判断一个字符串是 ...
- Oracle EBS-SQL (PO-11):检查采购订单退货数.sql
select msi.segment1 物料编码, -- msi.inventory_item_id return_it ...
- 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东
引擎版本:2.1.4 ide:vs2012 一般协作开发情况下,有意思无意将bin.obj等一些目录添加到版本管理中是很烦人的事儿,在VS中不断地编译程序集和提交将带来版本暴增问题.如果你用的是乌龟S ...
- 论山寨手机与Android联姻 【7】 MTK手机软件系统
MTK feature phone的基本功能是通话和短信,要了解MTK手机软件系统,首先需要简要回顾几个移动网络通讯的基本概念. Figure 38. GSM-GPRS Architecture Co ...
- 论山寨手机与Android联姻 【1】MTK亮相的历史背景
[1]MTK亮相的历史背景如果说1960年代是大型机(Mainframe)的时代,1970年代是小型机(Microcomputer)的时代,那么1980年代无疑是个人电脑(PC)的时代,而1990年代 ...