十分钟学会less

2017-08-10 381 0 编辑:唯丽是从 来源:互联网

我们都知道在大型的项目中,当css有数千行代码的时候,css的编写有一些麻烦。我们经常会出现复制相同的代码到不同的地方或者通过我们的编辑器来替换所有相同的颜色。这需要我们费很大的力气去保持css的可维护性。但是其实我们并不是一定要这样。


幸运的是,web开发社区已经解决了这个问题。我们现在有了类似Less, Sass和Stylus等的CSS预处理器。这些工具相比于原始的css给了我们以下的优点:


变量,我们可以定义变量来很方便的在你的css中改变值

动态的变量计算。(在css中我们可以使用calc,但是这个只可以用于长度的单位计算)

Mixins, 可以帮助我们复用和组合css代码,甚至还支持传参。

Functions, 提供了一系列使用的工具,用于控制颜色,将图片转为data-uris等.

一个不好的方面是,一旦你你使用了这些预处理器中的任何一个,你就必须要编译你的样式表为普通的css文件你才可以让它在浏览器中正常的工作。


1. Getting Started


Less是由JavaScript编写的,所以需要Node.js或者web浏览器来运行。你可以在你的web站点中加入less.js,它会在实时编译所有的

.less

文件,但是速度比较慢同时也不推荐这么使用。比较好的办法是把编译你的less为css,然后在线上部署普通的css文件。有很多的免费的图形化软件可以编译.less文件,不过在这里我们会使用node.js。


如果你已经安装了node,而且你也知道terminal是什么,那就打开一个而且你也知道terminal是什么,然后使用NPM安装less:


npm install -g less

安装完毕后你可以在任何一个terminal中使用

lessc

命令,你可以通过类似下面这个命令来编译你的.less文件来输出一个CSS文件


lessc styles.less > styles.css

我们下面所有的样式都是基于less的,可以将代码转换为类似

styles.css

的普通的CSS代码。然后在html中加入css文件。如果你的编译出现了错误,错误的相关信息会展示在你的terminal上面。


2. Variables(变量)


Less中很重要的一个特性就是可以像普通的编程语言一样创建变量。变量可以存储任何你经常使用的变量:类似颜色,尺寸,选择器,字体名字,url等等。less的核心就是尽可能的复用你的css代码。


这里,我们定义了两个变量,一个用于背景颜色,另一个用于文字颜色,它们都包含了16进制的代码。你可以切换两个变量来编译出不同版本的代码:


@background-color: #ffffff;

@text-color: #1A237E;

p{

  background-color: @background-color;

  color: @text-color;

  padding: 15px;

}

ul{

  background-color: @background-color;

}

li{

  color: @text-color;

}

p{

  background-color: #ffffff;

  color: #1A237E;

  padding: 15px;

}

ul{

  background-color: #ffffff;

}

li{

  color: #1A237E;

}

在上面的例子中,背景颜色是白色,文字是深色的,如果我们想要深色的背景和白色的文字,我们只需要改变变量的值,所有用到这些变量的地方都会被替换。


在 http://lesscss.org/features/#variables-feature 你可以获取关于less中变量的更多信息


3. Mixins


LESS可以帮你把一个已经存在的class或者id下面所有的样式应用在其他的选择器里面。下面这个例子可以更好的说明:


#circle{

  background-color: #4CAF50;

  border-radius: 100%;

}

#small-circle{

  width: 50px;

  height: 50px;

  #circle

}

#big-circle{

  width: 100px;

  height: 100px;

  #circle

}

#circle {

  background-color: #4CAF50;

  border-radius: 100%;

}

#small-circle {

  width: 50px;

  height: 50px;

  background-color: #4CAF50;

  border-radius: 100%;

}

#big-circle {

  width: 100px;

  height: 100px;

  background-color: #4CAF50;

  border-radius: 100%;

}

你过你不想把你用于mixin输出在最终的css文件里,你可以加上一个圆括号:


#circle(){

  background-color: #4CAF50;

  border-radius: 100%;

}

#small-circle{

  width: 50px;

  height: 50px;

  #circle

}

#big-circle{

  width: 100px;

  height: 100px;

  #circle

}

#small-circle {

  width: 50px;

  height: 50px;

  background-color: #4CAF50;

  border-radius: 100%;

}

#big-circle {

  width: 100px;

  height: 100px;

  background-color: #4CAF50;

  border-radius: 100%;

}

mixins还有一个很酷的特性就是可以接收参数。在下面的例子中,我们在circles添加了一个参数用于width和height,同时设置默认值为25px。下面会生成一个宽高为25的#small-circle和一个宽高为100的#big-circle。


#circle(@size: 25px){

  background-color: #4CAF50;

  border-radius: 100%;

  width: @size;

  height: @size;

}

#small-circle{

  #circle

}

#big-circle{

  #circle(100px)

}

#small-circle {

  background-color: #4CAF50;

  border-radius: 100%;

  width: 25px;

  height: 25px;

}

#big-circle {

  background-color: #4CAF50;

  border-radius: 100%;

  width: 100px;

  height: 100px;

}

阅读官方文档(http://lesscss.org/features/#mixins-feature)了解Less mixins的更多信息


4. Nesting and Scope(嵌套和作用域)


嵌套可以帮助你将html的页面结构和样式表的结构相同,同时也可以减少冲突。下面是一个无序列表(ul)和其子元素的例子:


ul{

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

  li{

    background-color: #fff;

    border-radius: 3px;

    margin: 10px 0;

  }

}

ul {

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

}

ul li {

  background-color: #fff;

  border-radius: 3px;

  margin: 10px 0;

}

和在编程语言中一样,Less中变量的使用也是依赖于作用域。如果一个变量没有在当前的作用域被定义,那么LESS会一直向上找,并使用最靠近的声明的变量。


下面的代码在编译为css的过程中,

li

会有白色的文字,因为我们在ul中提前定义了text-color变量。


@text-color: #000000;

ul{

  @text-color: #fff;

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

  li{

    color: @text-color;

    border-radius: 3px;

    margin: 10px 0;

  }

}

ul {

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

}

ul li {

  color: #ffffff;

  border-radius: 3px;

  margin: 10px 0;

}

在这里 http://lesscss.org/features/#features-overview-feature-scope 可以了解到更多关于scope的信息。


5. Operations


你可以对数字和颜色使用一些简单的数学计算。如果我们有两个相邻的div,第二个的宽度是第一个的两倍,同时需要有不同的背景颜色。LESS内部会知道如何计算单位来保证不出现一团糟的情况。


@div-width: 100px;

@color: #03A9F4;

div{

  height: 50px;

  display: inline-block;

}

#left{

  width: @div-width;

  background-color: @color - 100;

}

#right{

  width: @div-width * 2;

  background-color: @color;

}

div {

  height: 50px;

  display: inline-block;

}

#left {

  width: 100px;

  background-color: #004590;

}

#right {

  width: 200px;

  background-color: #03a9f4;

}

6. Functions


LESS还有函数!这是不是越来越想一个编程语言了?


让我们来看一看

fadeout

这个函数,这个函数用来降低颜色的透明度。


@var: #004590;

div{

  height: 50px;

  width: 50px;

  background-color: @var;

  &:hover{

    background-color: fadeout(@var, 50%)

  }

}

div {

  height: 50px;

  width: 50px;

  background-color: #004590;

}

div:hover {

  background-color: rgba(0, 69, 144, 0.5);

}

上面这段代码表示,当鼠标移动到div上,div的背景色会变成加上一半的透明度,而且相当的简单。还有很多的其他的有用的函数可以用于操作颜色,检测图片的大小,甚至还可以将资源以data-uri形式嵌入到样式表中。这里可以查看到完整的函数列表 http://lesscss.org/functions/.


本站文章均为深正网站建设摘自权威资料,书籍,杂志或原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享到社交网站,引用和转载,我们谢绝直接复制和抄袭!感谢您...

学习课堂

百度惊雷算法首推,快排行业将退出SEO江湖

不管是快排还是过去的常规优化,优帮云提醒广大SEO从业者的朋友们,为了安稳提升网站排名,还是要在用户需要的高质量内容方面下功夫,多多优化网站内容细节,遵守百度规则做一个符合用户体验的好站点来,最终为客户创造效益。

2016-10-28
2017-08-04
2016-11-30
2017-09-26

动态更新

【签约】深圳颢迪光电有限公司品牌网站建设

深圳市颢迪光电有限公司是国内数名资深LED行业人士投资建立的一家以LED电子显示屏和LED照明亮化应用产品为主营业务,集研发、生产、销售、工程、售后服务为一体的高新技术企业,秉承在LED显示和控制领域所具有的独特优势...

2016-11-16
2016-07-20
2017-03-10
2016-03-25

资讯知识

Windows系统曝新漏洞,微软称正被俄罗斯黑客利用

微软在其官网发布的一份公告中表示,目前发现了少量来自俄罗斯黑客组织“Strontium”发起的网络攻击,该黑客组织又名“APT28”或“Fancy Bear”,其在攻击过程中使用了“鱼叉式网络钓鱼”邮件作为工具...

>2016-09-05
>2017-12-14
>2016-07-16
>2016-09-08
亲,请您联系我们吧

您的疑问,只要您主动联系,将为您得到最专业,最全面的解答,欢迎您询问...