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 }

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

---

我是飞奔的企鹅，欢迎说出你的故事

      此内容仅作学习交流之用，如有不正，敬请指出