前端模拟面试练习提升题

 

1.初识less

     less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。

    和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代码，但是看眼中的确没有逻辑的代码，CSS冗余度是比较高的。不方便维护，不利于复用，而且没有计算的能力。

   如果对css有基础的话，less很容易上手的。因为css和less区别不大的，反正可以通过编译生成浏览器能识别的css文件。

 2.less使用

  这个less使用不用复杂，就是新建一个后辍名为less文件即可，然后在less文件使用less语句，当写完less语句编译后就会自动生成多了一个后辍名为css文件即可。

3.less和css简单的语句区别

  style.less

style.css

 

 

 

相比一下，还是感觉less语句的代码比较舒服，以上代码内容就是叫嵌套写法，这样的话大大减少了代码量，less代码看起来更加清晰。

4.less语法

注意：最好尽量用全局变量，避免无法复用！比如我写变量(Height)在contain{}里面，但却row{}里面的变量不存在，导致出错，这是叫局部变量。

4.1.2选择器和属性名

这个选择器和属性名可以均作为变量

语法：@选择器的名：属性名；

// 2.作为选择器和属性名

 

@Mycontain:width;

 

.@{Mycontain}{//选择器

    height:300rpx;

    @{Mycontain}:200rpx;//属性名

}

 

4.1.3作为URL

使用时候，使用“ ”将变量的值扩起来，使用同样将变量以@{变量名}的方式使用；

语法：@变量：作路径；

less：

// 3.作为URL

@img-url:"../imgs/idnex";

img{

    background-image: url("@{img-url}/shouye.png");

}

编译后的css：

img {
  background-image: url("../imgs/idnex/shouye.png");
}

4.1.4延迟加载

什么是延迟加载？变量是延迟加载的，在使用前不一定要预先声明。

语法：@变量1：@变量2；

           @变量2:9%；

less:

// 4.延迟加载
.lazy-eval{
    width:@var;
}
 
@var:@a;
@a:9%;

编译后的css：

.lazy-eval {
  width: 9%;
}

4.1.5定义多个相同名称的变量时

在定义一个变量两次时，只会使用最后定义的变量，less会从当前作用域向上搜索（比如就是从下往上搜索）。这个行为类似于CSS的定义中始终使用最后定义的属性值。

less：

.class{

    @var:1;

    @var:2;//选中的搜索

    .brass{

        @var:2;

        three:@var;//结果为three:4;

        @var:3;

        @var:4;//选中的搜索

    }

    one:@var;//结果为one:2;

}

编译后的css：

.class {

  one: 2;

}

.class .brass {

  three: 4;

}

5.1混合（mixins）

5.1.1 普通混合

混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。

less：

//1.普通混合

.bor{

    background-color: aqua;

    width: 32rpx;

}

.poop{

    color:white;

    .bor;

}

 

.boom{

    height:200rpx;

    .bor;

}

编译后的css：

.bor {

  background-color: aqua;

  width: 32rpx;

}

.poop {

  color: white;

  background-color: aqua;

  width: 32rpx;

}

.boom {

  height: 200rpx;

  background-color: aqua;

  width: 32rpx;

}

5.1.2不带输出的混合

如果你想要创建一个混合的类，但是我不想让它输出到css的样式并显示。

只要类的名字后面加上括号，就可以实现的，这样不会到css样式中显示！

less：

// 2.不带输出的混合
.mymix{
    color:black;
}
.mymix-echa(){//css样式中不显示
    background-color: white;
 
}
.dad{
    width: 30rpx;
    height:30rpx;
}

编译后的css:

.mymix {
  color: black;
}
.dad {
  width: 30rpx;
  height: 30rpx;
}

在css样式中实现不显示.mymix-echa()类。

5.1.3带选择器的混合

这个带选择器，可以放入选择器。

语法：{&：选择器}

less：

//3.带选择器的混合
.father(){
    &:hover{
        background-color: white;
        font-size:32px;
    }
}
 
.child{//类名字后面多了:hover
    .father;
}
.son{//类名字后面多了:hover
    .father;
}
 

编译后的css:

.child:hover {
  background-color: white;
  font-size: 32px;
}
.son:hover {
  background-color: white;
  font-size: 32px;
}
 

5.1.4带参数的混合

带参数就是传递参数。

语法：类的名称（形参）{}

less:

// 4.带参数的混合
.son(@width){
    width:@width;
}
.dad{
    .son(300px);//需要传一个参数进去
}

编译后的css:

.dad {
  width: 300px;
}

那如果形参如何使用默认值呢？

形参是可以默认值，这样不需要传递参数，如下：

less：

//5.带参数的混合默认值
.son(@width:200px){
    width:@width;
}
.dad{
    .son();
}
 

编译后的css：

 

.dad {
  width: 200px;
}
-------------------------------------------------------------
智一面|前端模拟面试练习提升题