首页 > 代码库 > 初入web知识点（七）
初入web知识点（七）
◆LESS
基于CSS的一种扩展技术；引入了变量、混合、运算、函数；简化CSS的代码，降低维护成本；必须通过解析器（koloa）.
***步骤***
①新建文件夹
②.html文件 .less文件
③启动koloa配置路径
④输入less文件 刷新koloa
⑤会自动生成一个.css的文件（在写的过程中不要关闭koloa软件）
⑥html引入的文件是koloa解析出来的CSS文件
◆**◆
①变量：@变量名：值 如 @名称自取: 5px soild red;
使用时 div{
border:@名称自取
}
②混合量：mixin
class类： .名称｛声明｝
id类 ： #名称｛声明｝
以上的名称均可自己取
元素属性： 元素名称｛声明｝
它的名称不能自取 ， 必须是元素
如：
.名字自取1｛
width：200px；
height:300px;
｝
#名字自取2｛
font-size:30px;
｝
使用时： div｛
.名字自取1；
#名字自取2；
｝
**是参数的混合集合：调用多个函数，值可变
.名称自取0（@名字自取1；@名字自取2）｛
width：@名字自取1；
height：@名字自取2；
｝
使用时： div{
.名字自取0（width的值；height的值）；
color：red
｝
◆SASS
配置路径中不能出现中文字符 有两种后缀名 .sass 不用大括号和分号 .scss使用大括号和分号 推荐使用
变量 $ 变量名：值 （与LESS一样的用法，知识把@变成$了）
嵌套 ①选择器嵌套 必须满足上一层的条件才会触发
②属性嵌套
混合 声明： @mixin 名称｛｝
使用： @include名称；
◆BOOTSTRAP
960栅格式布局：
12列式 每格60px 间距20px 3 6 3版式 三格式布局 常用
16列式 每格40px 间距20px 3 3 6 4版式 四格式布局
24列式 每格30px 间距10px
32列式
container：容器
包含文件：CSS JS FONTS （免费图标）
**配置**
①<html lang="zh-CN"> </html> 支持html5文档
②<meta name="viewport" content="width=device-width, initial-scale=1.0"> 网页自适应
③<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-cale=1.0,user-scale=no"> 用户禁用缩放
④ <link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css"> 引入bootstarp的CSS文件
⑤<meta http-ea-quir="x-ua-compatible",content=IE:edg"> 兼容IE浏览器 要兼容IE8还需要加入repond.js文件
⑥在body中加入JS文件
<script src="http://www.mamicode.com/js/jquery-1.11.2-min.js"></script>
<script src="http://www.mamicode.com/js/bootstrap.min.js"></script>
初入web知识点（七）