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来写，以备以后不时之需