一：什么是css框架
CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。
二：特征
1.抽象出常用的css样式,高再可用性,高移植性
2.有固有的定义,详细的文档及开发特点
3.高兼容性,可以兼容流行的浏览器
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器。
css框架一：
《less》
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
1.定义变量：
@符开头
例：
@width：100px；
@height：100px；
div{
width:@width；
height:@height；
}
2.混合：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：
#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;
}
[email protected]变量
@arguments包含了所有传递进来的参数。
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
输出：
box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000;
4.嵌套
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 }
}
}
5.运算及函数
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
经过编译生成的 CSS 文件如下：
.switchColor {
color: #222222;
}
6.Comments（注释）
适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。
《sass》sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
1. 变量
变量以$开头
例： $blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2.计算
算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.嵌套
例：
div h1 {
color : red;
}
可以写成：
div {
hi {
color:red;
}
}
属性也可以嵌套：
p {
border-color: red;
}
可以写成：
p {
border: {
color: red;
}
}
4. 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
5.继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
6.条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
7.循环SASS支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
&：代表当前父元素