首页 > 代码库 > 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