CSS和LESS

1、CSS

　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML（ 标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。  

 

　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

 

　　

.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

 

　　

 　　 爱思考的小伙伴肯定会发现css样式总是一大推一大堆的出现，无法合理的实现复用、运算。下面less成功的解决这个问题。

　　　　　　　　　　　　　　　　　　　　　　

 

2、LESS

　　2.1 less概述

 

　　

　　LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。bootstrap默认使用LESS。

 

　　2.2 LESS 语法

 

　　LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！　

　变量

　　很容易理解:

　　@nice-blue: #5B83AD;
　　@light-blue: @nice-blue + #111;

　　#header { color: @light-blue; }

　　输出:

　　#header { color: #6c94be; }

 

　　甚至可以用变量名定义为变量:

　　@fnord: "I am fnord."; 　　@var: 'fnord'; 　　content: @@var; 

　　解析后:

　content: "I am fnord.";

　

　混合

　　在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class，那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}


#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:

#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; } 

　　任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.

 

　带参数混合

　　在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

　　然后在其他class中像这样调用它:

#header { .border-radius(4px); } .button { .border-radius(6px); } 

　　我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

　　所以现在如果我们像这样调用它的话:

#header { .border-radius; } 

　　radius的值就会是5px.

　　你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:

.wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } pre { .wrap } 

　输出:

pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }

　　

 

　　嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; } 

在 LESS 中, 我们就可以这样写:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } 

或者这样写:

#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } }

 

代码更简洁了，而且感觉跟DOM结构格式有点像.

 

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

 

例如:

 

.bordered { &.float { float: left; } .top { margin: 5px; } } 

 

会输出

 

.bordered.float { float: left; } .bordered .top { margin: 5px; }

 

 

 

 

　　Math 函数

 

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

 

round(1.67); // returns `2` ceil(2.4); // returns `3` floor(2.6); // returns `2` 

 

如果你想将一个值转化为百分比，你可以使用percentage 函数:

 

percentage(0.5); // returns `50%` 

 

　　

　　命名空间

 

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

 

#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } 

 

你只需要在 #header a中像这样引入 .button:

 

#header a { color: orange; #bundle > .button; } 

 

　　作用域

 

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

 

@var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }

 挥一挥衣袖，不带走一片云彩

 

 

---

 

我是飞奔的企鹅

        　　一只有梦想、有故事的企鹅，欢迎说出你的故事