189 8069 5689

CSS预处理器Less怎么用

本篇内容主要讲解“CSS预处理器Less怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS预处理器Less怎么用”吧!

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的阳曲网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

CSS预处理器

为什么要有CSS预处理器

CSS基本上是设计师的工具,不是程序员的工具。在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如说PHP、Javascript等等,有自己的变量、常量、条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,而且代码难以组织和维护。

很自然的,有人就开始在想,能不能给CSS像其他程序语言一样,加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理。这样一来,就有了“CSS预处器(CSSPreprocessor)”。

什么是CSS预处理器

是CSS语言的超集,比CSS更丰满。

CSS预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

CSS预处理器技术已经非常成熟,而且也涌现出了很多种不同的CSS预处理器语言,比如说:Sass(SCSS)、LESS、Stylus、Turbine、SwithchCSS、CSSCacheer、DTCSS等。如此之多的CSS预处理器,那么“我应该选择哪种CSS预处理器?”也相应成了最近网上的一大热门话题,在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上,很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言,这已经是很大的进步了。

到目前为止,在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀,讨论的也多,对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。

less的介绍,less是一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点。

less的语法

注释

less的注释可以有两种。

第一种注释:模板注释

//模板注释这里的注释转换成CSS后将会删除

因为less要转换为css才能在浏览器中使用。转换成css之后,这种注释会被删除(毕竟css不识别这种注释)。

第二种注释:CSS注释语法

/*CSS注释语法转换为CSS后让然保留*/

总结:如果在less中写注释,我们推荐写第一种注释。除非是类似于版权等内容,就采用第二种注释。

定义变量

我们可以把重复使用或经常修改的值定义为变量,在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。

(1)在less文件中,定义一个变量的格式:

@变量名:变量值;//格式@bgColor:#f5f5f5;//格式举例

(2)同时,在less文件中引用这个变量。

最终,less文件的完整版代码如下:

main.less:

//定义变量@bgColor:#f5f5f5;//引用变量body{background-color:@bgColor;}

我们将上面的less文件编译为css文件后(下一段讲less文件的编译),自动生成的代码如下:

main.css:

body{background-color:#f5f5f5;}

使用嵌套

在css中经常会用到子代选择器,效果可能是这样的:

.container{

width:1024px;}.container>.row{

height:100%;}.container>.rowa{

color:#f40;}.container>.rowa:hover{

color:#f50;}

上面的代码嵌套了很多层,写起来很繁琐。可如果用less的嵌套语法来写这段代码,就比较简洁。

嵌套的举例如下:

main.less:

.container{width:@containerWidth;>.row{height:100%;a{color:#f40;&:hover{color:#f50;}}}div{width:100px;.hello{background-color:#00f;}}}

将上面的less文件编译为css文件后,自动生成的代码如下:

main.css

.container{width:1024px;}.container>.row{height:100%;}.container>.rowa{color:#f40;}.container>.rowa:hover{color:#f50;}.containerdiv{width:100px;}.containerdiv.hello{background-color:#00f;}

CSS预处理器Less怎么用

到此,相信大家对“CSS预处理器Less怎么用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


新闻标题:CSS预处理器Less怎么用
当前链接:http://cdxtjz.cn/article/gdgeps.html

其他资讯