css3---（ 框架）

一：什么是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;
}

3.@arguments变量

@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;
　　}

 

 

 

 

 

&：代表当前父元素