IT技术互动交流平台

十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))

作者:918之初  发布日期:2016-12-07 20:52:10

十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))

  注:本文为翻译文章,因翻译水平有限,难免有缺漏不足之处,可查看原文。

  我们知道写css代码是非常枯燥的,尤其是写重复颜色、样式的代码,这需要我们付出很多努力来保持css代码可维护,但是它本不应该是这样的。

  很幸运地是,web开发社区已经解决了这个问题,我们在现在已经有了类似与less、sass和stylus这样的预处理器。它们有很多优于一般的css之处,如下所示:

变量---以至于我们可以在样式表中定义和轻松地改变值。 动态计算值。在css中我们有calc。 Mixins---使得我们重用和结合样式。它甚至还支持传递参数。 函数---它给我们大量方便的功能来操作颜色、转换图片等等。

  不足之处在于如果你使用他们其中的一种预编译器,你需要把它编译成普通的css这样他才能在你的浏览器中工作。

 

第一部分:Getting Started

  Less 它需要Node.js或者一个web 浏览器来运行。你也可以在你的站点引用less.js,这样它就可以实时地编译所有的.less样式表,但是这是很慢的,并且我们不推荐。推荐的方式是提前编译你的less样式表成为.css文件来使用。有很多免费的地方可以帮你编译less文件,但是在这篇文章中我将使用node.js。

   如果你安装了node,并且你知道什么是终端,就打开它,使用npm安装它:

npm install -g less

  这将可以使得你的less文件编译成css文件像下面这样:

lessc style.less > style.css

  通过上面这行代码,我们的代码将会被转换为普通的css文件与styles.css中。

第二部分:变量

  less的一个主要特点就是可以创造变量,像一门标准的编程语言,它可以存储任何类型的变量,比如:颜色,选择器,尺寸,字体名字等等。less的思想在于使得css有了编程语法成为可能。

  现在我们定义了个变量,一个背景颜色和一个字体颜色,它们都包含16进制码。观察下面的两个版本:

  less如下所示:

@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;
}

  编译后css如下:

p {
  background-color: #ffffff;
  color: #1a237e;
  padding: 15px;
}
ul {
  background-color: #ffffff;
}
li {
  color: #1a237e;
}

  在上面的例子中,背景颜色为白色,字体为黑色。如果,我们想要改变所有的颜色,我们可以轻松地改变变量的值,而不需要手工的修改每一处。

第三部分:Mixins

  less可以是我们使用一个存在的class或者id引用到其他的选择器中,例子如下:

  less文件:

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

  css文件:

#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%;
}

  另一个非常酷的事情是mixins可以接收变量,在下面的例子中我们文circles中的width和height添加了一个参数,并且有一个默认值25px。下面的代码将会创造一个一个25x25的小圆和一个100x100的大圆。

  less文件:

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

  css文件:

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

  (补充:这里使用了参数的mixins之后,我们发现和上一个例子相比,这里仅仅是添加了类,而原来被添加的类没有被保存,而上一个例子中,被添加的类也被保存了,请注意。)

第四部分:嵌套和作用域

  嵌套可以用于结构化我们的样式表,这样可以和我们的HTML结构相匹配,从而减少了冲突。下面是一个无序列表和它的子元素的例子:

  less文件:

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

  css文件:

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

  就像在编程语言中一样,在less中的变量接收他们的值决定于作用域。如果值在特定的作用域中不存在,那么LESS将会到上级的作用域中寻找直到它找到了最近的声明。(补充:这里我认为less中存在的是块级作用域)

  下面这个例子,转换成css,我们的li就将会有白色的字体,因为我们提前定义了@text-color在ul的规则中。

  less文件:

@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;
  }
}

  css文件:

/* line 3, text.less */
ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
/* line 9, text.less */
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

 

第五部分:操作

  你可以对于数值和颜色做简单的数学操作。如果说我们想要将两个div紧挨着,第二个div是第一个的两倍宽,并且有一个不同的背景,less知道如何测量并且不会弄混他们。

  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;
}

  css文件:

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

第六部分:函数

  less同样也有函数! 它看起来更像一门编程语言了,不是吗? 我们看看淡出的效果吧,看看一个函数是如何减少颜色的透明度的。

  less文件:

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

  css文件:

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

  根据上面的代码,当我们的div被划过是,它就会变得半透明。还有大量的有用的函数来操作颜色、检测图片的大小、甚至嵌入资源到样式表中像data-uri一样。在这里看全部的函数。

  

 

  进一步阅读

  你现在对less知道的足够多去开始深入学习了! 每一个css文件都是一个有效的less样式表,所以你现在可以清理哪些旧的、笨拙的css文件了。 当你学得更多,你将能够写出更加好的代码。下面就是我们推荐你下一步需要阅读的:

所有的语法:link less函数参考:link 在浏览器中在线编辑和编译:link
Tag标签: 十分钟入门less(翻译自:Learn   lESS   in   10   Minutes(or   less))  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规