Giter VIP home page Giter VIP logo

less-lib's Introduction

Personal Less Library

自用Less库

Example

从2013年创建这个库,一点点的添加完善,目前功能已经基本稳定,现在它可以帮助我快速完成几乎所有的样式书写工作。对!就是快速!

为什么选择Less

Sass、Stylus、Less 如何选择?

这个问题是所有初学CSS预编译器的小伙伴最关心的问题。本人在工作中也使用过 Sass 和 Stylus,他们定义 Mixin 时非常便捷,语法类似于常见编程语言,并且有可以定义丰(鸡)富(肋)的函数供开发使用。而 Less 虽然也支持这些能力,但是写法却有些反人类,习惯了常规编程语言的人可能很难适应。

一句话总结:

  • Sass - 写库便捷,调用繁琐
  • Stylus - 写库...写不下去,调用懵逼
  • Less - 写库繁琐,调用快捷

由此我们不难看出,为什么 Bootstrap4.0 会由 Less 改为 Sass,因为 Sass 写库很方便,而使用者又不需要用 Sass 来调用它,只需要加载编译好的 CSS 即可,相比之下 Less 没有任何优势。

然而,我们的日常工作并不是去定义 Mixin,或者是去定义函数,我们的工作实际是需要书写大量页面样式代码,我们需要频繁的去调用之前定义的 Mixin 和函数。基于这个需求,个人而言, Less 无疑是我最佳的选择。

Sass、Stylus、Less 能力对照表

下表是我在使用中发现的一些差异,这里只对有差异的能力进行比较,相同的能力不做对比。

能力 Sass Stylus Less
属性嵌套
占位符选择器
条件判断 @if@else ifelse when()default() (写复杂的条件判断会非常繁琐)
迭代 @for@each@while for in .loop()(需要手动实现)
字符串转换 加入引号、移除引号 只能移除引号? 加入引号、移除引号
传参 参数不能有,(但是CSS属性值有些是可以加,的啊) 参数同样不能有, 灵活传参,参数中有,时,可以使用;分隔参数。
定义函数 使用Sass定义的函数 使用Stylus定义函数 不但可以使用Less定义函数,还可以使用js定义函数(你没看错,v2.5+实现了这个能力)
调用 Mixin 繁琐的 @include 无参数时必须加(),如果 Mixin 和 CSS 属性名称相同,编译器会分不清楚你要写 CSS 还是要调 Mixin,甚至有些场景会出现循环调用的情况。松散的语法就是一把双刃剑,真是成也萧何,败也萧何。 怎么定义,就怎么调用,一切样式块都可以作为 Mixin 来调用,简直酸爽。
属性 merge 有(写库必备)
插入js表达式 无(想都不用想) 有(理论上而言所有 Javascript 内置函数都可以在 Less 中调用)

最后

当然,Sass 和 Stylus 可能还有很多令人激动的能力,但是至少在我开发库的过程中并没有遇到必须要用的能力,相反基于 Less 的属性 merge 能力实现的一些功能在 Sass 和 Stylus 中是无法实现的。以上仅代表个人观点,如果有理解不到位的地方欢迎指正。

less-lib's People

Watchers

James Cloos avatar Neal avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.