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

}

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

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

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

巴特西