CSS框架

标签：

一、Less:

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件，其中会用到专门的编译器。

语法：文件后缀名是less。

1、定义变量

@name :属性的值//css中定义的变量。

作用域：less的变量和顺序无关，先是执行变量的申明。

加载的方式：按需加载（Lazy load）：运行的时候看值是多少。

混合：相当于是一种封装的效果　　　　

　　　　.wh(@w,@h){

　　　　  width：@w;

             height:@h;

           }

嵌套 &：当前选择器

二：SCSS

后缀有sass和scss

sass为老版本的编译方式，没有局部变量

scss为新版本的编译方式，设置局部变量有作用

属性嵌套：

 属性+冒号+{值}，例：
margin：{top：10px；left：20px；right:30px;bottom:40px;}
@at-root:跳出选择器

混合
     参数之间不能用分号，申明必须在调用之前使用
@mixin wh($w,$h){
  width：$w；
  height：$h；
}

调用混合h2{@include wh;}

Compass
雪碧图

@import "icons/*.png";//导入图片并进行拼接
@include all-incons-sprites；
d2{width:;height:;@include icons-sprite(图片)}

三、bootstrap

栅格式布局，分为12格

 container：宽度已经定义，可以自己定义高，container不能嵌套

row：必须放在container里面，可以嵌套row，而且必须写，代表行，宽度和container一样

col：（col-xs小于700的宽度，手机端/sm小屏幕，768到900多，平板/md中等屏幕，900-1200/lg超大屏幕1200以上的宽度）

col-xs-push-n 往后退几格

col-xs-pull-n 往前拉几格

col-xs-offset-n 往后退多少格会影响下一个元素页面的布局

CSS框架

标签：

原文地址：http://www.cnblogs.com/jingqiu/p/4824354.html