首页 > 代码库 > CSS预处理语言——less与sass的使用

CSS预处理语言——less与sass的使用

我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用

我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动,比较麻烦

首先我们来说一下Less。

【Less中的变量】
1.声明变量使用 @变量名:变量值;
2.使用变量 @变量名
>>less中的变量类型:
①数字类 1 10px ②字符串:无引号字符串 red 和有引号字符串"gdak"
③颜色类 red #000000 rgb()
④值列表类型,用逗号或空格分隔
>>变量使用原则 :
多次频繁出现的值、需要修改的值设为变量
 
3.混合(MiXins)
①无参混和声明 :.name{} 调用:选择器中调用
②带参混合
无默认值声明: .name(@param){} 调用:.name(parValue); parValue不可以省略
有默认值声明: .name(param:value()){} 调用:name(parValue); parValue可以省略
>>无参混合会在CSS中编译同名的class选择器;有参的不会
4.Less的匹配模式
使用混合进行匹配,类似于if结构:
声明
.name(条件一,参数){}
.name(条件二,参数){}
.name(@_,参数){}
调用: .name(条件值,参数值);
匹配规则:根据调用时提供的条件值,去寻找与之匹配的miXin执行,其中@_表示永远需要执行的部分
5.Less中的运算
*+-/可带单位可不带
颜色运算时,红绿蓝分三组计算,组内可进位,组间互不干涉。
6.Less中的嵌套:保留HTML中的代码结构,
嵌套默认后代选择器,如果需要子代选择器,则在子代前面加>
&表示上一层,&:hover 表示上一层的hover事件
 
 
 

section p {
  color: red;
  background-color: blue;
  text-align: center;
}
section ul {
  padding: 0px;
  list-style: none;
}
section ul li {
  float: left;
  margin: 10px;
  width: 100px;
  text-align: center;
  border: 1px solid #000000;
}
section ul li:hover {
  background-color: yellowgreen;
}

当然,我们最看好less的一点可能就是它的嵌套了就像上边要写这么长的代码,使用less来写就如以下代码所示,是不是看着舒服了很多,用编译器编译完就可以显示为上边代码的样子了

section{
    p{
        color: red;
        background-color: blue;
        text-align: center;
    }
    ul{
        padding: 0px;
        list-style: none;
        li{
            float: left;
            margin: 10px;
            width: 100px;
            text-align: center;
            border: @bod;
            &:hover{
                background-color: yellowgreen;
            }
        }
    }
}

下边来说与一下Sass

1. SASS中的变量
使用 $变量名:变量值 声明变量
如果变量名需要在字符串中嵌套,则需使用#加大括号包裹:
2.sass中的运算会将单位也进行运算,使用时需注意最终单位:
例:10px*10px=100px*px
3.sass中的嵌套: 选择器的嵌套 属性嵌套 伪类嵌套
选择器的嵌套 ul{li{}}后代
ul{>li{}}子代
&表示上一层 div{ul{li{&=-=div ul li}}}
属性嵌套 :属性名与大括号之间必须有: 例如boder:{color:red;}
伪类嵌套: ul{li{&:hover{"ul li :hover"}}}
4. 混合宏、继承、占位符
①混合宏:声明@mixin name($param:value){}
调用:@include name(value)
》》声明时,可以有参可以无参;可带默认值,但调用必须符合生命规范
>>优点:可以传参,不会生成同名class
>>缺点:会将混合宏的代码copy到对于那个的选择器中
②继承: 声明: .class{} 调用: @extend .class
>>优点:继承的相同代码会提取到并集选择器中,减少冗余代码,
>>缺点:无法进行传参,会在CSS中生成一个同名class
③占位符:声明:%class{} 调用: @extend %class
>>优点:继承相同代码,会提到并集选择器,不会生成同名的class选择器;
>>缺点:无法进行传参
 
综上所述:当要传递参数时用混合宏,当有现成class时用继承,不须参数不需class时候用占位符
5.if条件结构:
@if 条件{}
@else 条件{}
6.for循环结构
@for $i from 1 to 10{} 不含十;
@for $i from 1 through 10{} 含十;
7.while循环结构
$j:1;
@while $j<10{
.while井{$j}{
boder:井{$j}px solid red;
}
$j:$j+1;
}
8.each循环遍历
@each item in a,b,c,d{
//item 表示每一项
}
9、函数:
@function func($length){
$length: $length*5;
@return $length;
}
调用:func(10px);
 

相信都能看出sass与less的不同了,定义变量Less用的是@符,Sass用的是$符当然,sass可以用if条件结构,循环结构,定义函数比less高大上了许多。所以一般还是用sass来写,以备以后不时之需

 

CSS预处理语言——less与sass的使用