首页 > 代码库 > css里的less和sass
css里的less和sass
一、LESS概述:less是css的一种概述,在CSS的语法基础之上,它引入了变量,Mixin(混合),运算以及
函数等功能。大大的简化了CSS的编写,而且降低了CSS的维护成本。LESS包含一套自定义的语法及一个
解析器,根据这些语法定义自己的样式规则,这些会通过解析器(Koala)编译成对应的CSS文件。
二、Less的引入方法:①在html中引入css<link rel="stylesheet"type="text/css"href="http://www.mamicode.com/styles.css">
②Less中需要引入另外的Less文件时@import"test2.css";此时的后缀名CSS可以不写。
三、Less的操作步骤①建文件夹②建html文件和Less文件夹③启动考拉④配置路径⑤输入Less文件--koala刷新
⑥生成用Less名称命名的CSS文件⑦在html里面引入CSS文件
⑧在Less里面引入文件@import“ .Less”可变或者“ .css"不可变
四、Less变量(值可变)专用符号@写法:声明:@变量名(自取)接值
1、混合(Mixn)(值固定)写法:①class属性类: .名称(自取){声明};
②ID属性类:#名称(自取){声明}
③元素属性类:<div>、<p>等{}
2、带参数的混合(值可变):①class属性类: .名称(自取)(参数){属性名:参数(参数固定值)}
②不带参数的属性类:.名称(自取)(参数){声明}
3、多参数混合
4、参数集合@aruments
五、①sass从c盘开始任何文件夹不能出现中文,建文件时也不要出现中文。
②sass有两种后缀名:1、.sass不允许出现{}和逗号、2、.scss可以出现{}和逗号(我们加后缀名用这种)
六、①sass的写法:声明抬头写,专用符号$,$.变量名(自取):值;!default默认变量值
②sass有两种嵌套:1、选择器嵌套,2、属性嵌套 注:at-root跳出嵌套
③混合(mixin)声明的时候:1、无参数@mixin(固定写法)名称(){} 注:调用时必须是@include+名称
2、有参数@mixin名称$opality:50{}调用时同上
七、960栅格式布局法:
屏幕分辨率为1024*768,采用界面宽为960px的一种布局方式有以下几种布局
①12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)
②16列式:每格40px 间距40px 3 3 6 4版 四格式布局
③24列式:每格30px 间距10px (很少用)
④32列式:(极少用)
容器:container _x.后面的x表示数字,列如 container _12表示将页面进行12等份
八、bootstarp框架:它是基于JQuery封装的一种框架,采用三格式布局,自带响应式
css里的less和sass