全国咨询/投诉热线:400-618-4000

什么是less?Less变量怎样能实现CSS样式?

更新时间:2020年11月20日11时17分 来源:传智播客 浏览次数:

  Less(Leaner Style Sheets)是一门CSS扩展语言,也称为CSS预处理器。作为CSS的一种形式的扩展,Less并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

  Less与Sass的区别主要包括以下内容。

  (1) Less是基于JavaScript,是在客户端处理的。

  (2) Sass是基于Ruby的,是在服务器端处理的。

  (3) 关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$。

  (4) 关于输出设置,Less没有输出设置,而Sass提供了4种输出选项,分别是nested、compact、compressed和expanded。

  (5) Sass支持条件语句,可以使用if{}else{}、for{}循环等,而Less不支持。

  另外,Less在CSS的语法基础之上,引入了变量、Mixin(混入)、运算以及函数等功能,简化了CSS的编写,使CSS更易维护和扩展,降低了CSS的维护成本。正如它的名称,Less可以让我们用更少的代码做更多的事情。

  因为CSS需要编写大量重复的样式属性值来实现页面的样式,如CSS中的一些颜色和数值等经常被使用。所以,通过Less变量来实现CSS样式非常方便,而且容易维护。下面为大家讲解如何定义Less变量,以及Less变量的命名规范。

  Less变量的语法格式如下。

  @变量名: 值;

  变量名需要遵循命名规范,具体如下。

  (1)必须以@为前缀。

  (2)不能包含特殊字符。

  (3)不能以数字开头。

  (4)大小写敏感。

  例如,@color是合法的变量名,而@1color、@color~@#则是错误的变量名。由于变量名区分大小写,@color和@Color是两个不同的变量。

  下面为大家演示如何使用Less变量来设置页面的背景颜色为粉色。

  (1)定义@color变量,示例代码如下。

@color: pink;

上述代码中,设置@color变量的值为pink。

(2)使用@变量,示例代码如下。

body { 
 color: @color;
}
a:hover {
 color: @color;
}

  需要注意的是,Less的代码应该书写到*.less文件中,而不是.css文件中。Less的书写方式与CSS基本相似。在开发过程中,当同时修改body和a标签的样式时,我们只需要修改@color变量的值即可。


猜你喜欢:

rem是什么?和em单位区别在哪

创建超链接的基本语法有哪些?

黑马程序员web前端培训课程 

传智播客web前端培训课程