资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端从零单排之LESS（第四期)

前端从零单排之LESS（第四期)

Drummor / 613人阅读

摘要：函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。适当嵌套，以保持的优雅。有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个符号具体如下安装同时推荐在线编译网站，能够实时看到效果。

LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，刚好那个时候在学习bootstrap，bootstrap项目中样式就是less写的，从此就结下了于LESS的缘分。LESS使用的快一年的时间了。
下面简单的列举一下我最爱的三个LESS的特性：

变量
编译前: 

</>复制代码 
  1. @color: #ccc;
  2. #header {
  3.   color: @color;
  4. }
  5. h2 {
  6.   color: @color;
  7. }

编译后

</>复制代码 
  1. #header {
  2.   color: #ccc;
  3. }
  4. h2 {
  5.   color: #ccc;
  6. }

混合(Mixins)
编译前 

</>复制代码 
  1. .rounded-corners (@radius: 5px) {
  2.     -webkit-border-radius: @radius;
  3.     -moz-border-radius: @radius;
  4.     -ms-border-radius: @radius;
  5.     -o-border-radius: @radius;
  6.     border-radius: @radius;
  7. }
  8. #header {
  9.   .rounded-corners;
  10. }
  11. #footer {
  12.   .rounded-corners(10px);
  13. }

编译后

</>复制代码 
  1. #header {
  2.   -webkit-border-radius: 5px;
  3.   -moz-border-radius: 5px;
  4.   -ms-border-radius: 5px;
  5.   -o-border-radius: 5px;
  6.   border-radius: 5px;
  7. }
  8. #footer {
  9.   -webkit-border-radius: 10px;
  10.   -moz-border-radius: 10px;
  11.   -ms-border-radius: 10px;
  12.   -o-border-radius: 10px;
  13.   border-radius: 10px;
  14. }

嵌套
编译前 

</>复制代码 
  1. #header {
  2.   h1 {
  3.     font-size: 26px;
  4.     font-weight: bold;
  5.   }
  6.   p {
  7.     font-size: 12px;
  8.     a {
  9.       text-decoration: none;
  10.       &:hover {
  11.         border-width: 1px
  12.       }
  13.     }
  14.   }
  15. }

编译后

</>复制代码 
  1. #header h1 {
  2.   font-size: 26px;
  3.   font-weight: bold;
  4. }
  5. #header p {
  6.   font-size: 12px;
  7. }
  8. #header p a {
  9.   text-decoration: none;
  10. }
  11. #header p a:hover {
  12.   border-width: 1px;
  13. }

这三个原因我想足以让人爱上LESS了。但是这里需要注意的仍然是有些点：

变量命名是好事，尤其是对颜色、字体、栅格系统有非常大的帮助，但是使用过程还是需要谨慎，最好是有张网站用色的色表图片，展列整个网站所用颜色或者是直接做成网页显示。这样方便多人合作。

函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。

嵌套对程序员更友好， 也更好管理， 但是嵌套过深的话这点就成了灾难，会让人看的整个人都斯巴达掉。 适当嵌套，以保持CSS的优雅。

有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个~符号,具体如下:

</>复制代码 
  1. .class {
  2.     filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"
  3. }

LESS 安装, 同时推荐less在线编译 网站，能够实时看到效果。

LESS 能够做数值运算，提供一些函数， 但是我怎么都感觉那是对设计师友好呢， 是我打开方式错了么？

参考文章：
LESS 中文官网
LESS Getting started

云服务器 GPU云服务器 第四期 从零开始搭建前端数据监控系统 单排 less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110894.html

相关文章

  • 前端从零单排之Gulp(第二期)

    摘要：是个类似于的前端工作流工具，今天就简单的介绍一下和一些我的使用感受在中安装全局切换到你的前端工作目录下确保你的前端工作目录下有这个文件然后就已经安装好了，马上就可以进入简单的配置了。但是在使用的工作之中会遇到一些问题。 gulp 是个类似于grunt的前端工作流工具，今天就简单的介绍一下gulp和一些我的使用感受 Installing gulp 在Terminal中安装全局gulp...

    xiaolinbang 评论0 收藏0

  • 从零单排之CSS3

    摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过...

    刘福 评论0 收藏0

  • 前端从零单排之AJAX(第一期)

    摘要：作为一个有追求的前端，这是不可以接受的。两大特性在不刷新页面的情况下向服务器端发送请求从服务器端接收数据，并进行对应的逻辑处理请求流程首先先建立一个异步请求对象第一步的对象设置已经好了。在闭包中进行相关的操作。 ajax的使用一直是以jQuery为主，对于底层的实现有点不明觉厉。作为一个有追求的前端，这是不可以接受的。便让我们今晚好好走进ajax的内心世界。 ajax 两大特性： ...

    Mertens 评论0 收藏0

  • 从零单排系列之写一个类vue框架(一)

    摘要：因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过这个框架写过项目，所以文章中难免会有一些比较外行的说法。先整理用法，然后再整理自己的框架。 因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过vue这个框架写过项目，所以文章中难免会有一些比较外行的说法。当然，我用过一些时间的angular，也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的...

    raise_yang 评论0 收藏0

  • 从零单排系列之写一个类vue框架(二)

    摘要：昨天写了一下节点绑定的替换，已经如何检测的方法今天优化一下，勉强实现一个双向绑定看下昨天的代码这里是在实现双向绑定之前，先普及一个和的知识。如果强行给之前的赋值，就会发生无限的情况。毕竟还在正式学习期。 昨天写了一下节点绑定model的替换，已经如何检测model 的方法今天优化一下，勉强实现一个双向绑定看下昨天的代码 function Vue(obj) { ...

    learn_shifeng 评论0 收藏0

发表评论

登陆后可评论

0条评论

Drummor

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<