SASS has Compass (a community maintained library of sass mixins/methods).
Does LESS have any supporting libraries that can compare to Compass? Listing anything would be helpful!
Another great mini-library...
Bootstrap
by Mark Otto, Designer at Twitter
Bootstrap is a super awesome pack of
mixins and variables to be used in
conjunction with LESS, a CSS
preprocessor for faster and easier web
development.
Demo/Site: http://getbootstrap.com/
Mixins: https://github.com/twbs/bootstrap/tree/master/less/mixins
Github/Source: https://github.com/twbs/bootstrap
There are less elements, but it's hardly a collection. I agree it would be nice to have something like this.
Take a look at my compless repo. There I try to implement some features of Compass using less. Mixins are divided into categories in a way how it done in Compass' reference. Patches are welcome! :)
Here are another couple of choices: lesshat and clearless
Also, this blog post compares 3 less libraries: less elements vs bootstrap vs lesshat.
From the post, it seems like both bootstrap and lesshat beat less elements,
however depending what you need you would choose between bootstrap and lesshat.
Bottom line, if you’re looking to completely redefine and systematize
the way that you build websites, check out Bootstrap. However, if
you’re just a LESS user looking for some mixins, I definitely
recommend checking out LESS Hat.
PS:
If you're just look looking for some basic mixins, and for you - a whole library is overkill - then maybe this post from css-ticks is more for you.
I just launched {lessins}, it is a library of common mixins, similar to bootstrap.less or less elements, but with a focus exclusively on mixins (the others include some unecessary variables, that seem remnants of other projects.)
I have also organized the mixins into bundles. Check it out: https://github.com/jdmiller82/-lessins-
Old question, but right now Lots of Love for Less (3L) is far more complete and generic than Preboot née Bootstrap!
Try Preboot. It is a pretty cool LESS library from a member of Bootstrap team.
This is an old question but let me share this recently made Bootstrap3-LESSHAT Boilerplate.
The Boilerplate has the LESS Hat Mixin Library (counterpart of Compass) set up as well as the Font Awesome Iconset.
There's a new library called more-or-less which is similar lesshat but a lot faster since it does not use inline-javascript.
Just like lesshat it allows to use endless layers for e.g box-shadow or background-image.
It basically has all of the lesshat mixins plus a few other helpful functions.
.for()
.find()
.in()
.join()
.repeat()
requires Less 1.7.0 or later
Related
I was going through a really nice tutorial
https://www.sitepoint.com/variables-in-css-custom-properties/
I was trying to understand the concept of custom properties in CSS. But I am really confused as since SASS/SCSS variable also do the same thing. Then when custom properties. Or is there any significant way one should prefer CSS custom properties over preprocessors.
Thank you !!
Any help much appreciated
The very simple answer is that CSS properties came long after preprocessors. One of the reasons why people preferred preprocessors was the fact that it was like a programming language with functions and variables instead of just static CSS.
With the addition of properties to vanilla CSS, you can use it without the need of any preprocessor; it's just an addition to the language.
With regards to when you should use it, the question should be: when should you use CSS preprocessors. It's when you need a lot of flexibility and a programming-language like environment. I hope this answers the question.
The sass / scss is a code compiled for the css unlike the custom css which is a home-made variable to change the style of a page.
But both methods contribute to the cascade. In my opinion, you have to look at browser compatibility and in which project context to use it
When building a relatively large website, the CSS structure ought to be properly scoped and organized right from the begininning. If no CSS framework is used then everything can be lumped together into a massive stylesheet, but this will very quickly get out of order and can become a huge maintenance liability.
For the past few years, I've broken my stylesheets into various files including: base.css, layout.css, fonts.css, elements.css, but very easily the style definitions can jump between files and this approach needs to be more strict. I haven't used a framework since I'm not a fan of preset columns and pre-defined elements in my CSS code.
What approaches, patterns or tips can you guys suggest for keeping things organized? What kinds of naming conventions, reusability practices and patterns are useful? Is this something that a framework should be used for?
I used to love LESS, but now I'm a big fan of Stylus because I think it makes even cleaner code than LESS/SASS/CSS -- no semicolons, colons, or brackets.
Because Stylus (and LESS and SASS) allow you to define variables and templates and functions, I have the following files, which should be in this order:
reset - A Stylus version of Eric Meyer's CSS reset
variables - Variables like colors, fonts, etc.
templates - Templates like border-radius, transitions, and clearfix
Stylings for each page (homepage, app, terms of service, etc)
These are all concatenated and compiled to CSS using a simple build script.
You can see what these look like; I made a GitHub repo for this stuff.
For writing consistent and manageable stylesheets CSS LESS Framework is very beneficial.
LESS provides the following mechanisms: variables, nesting, mixins, operators and functions for writing CSS codes dynamically and can run on the client-side (Internet Explorer 6+, WebKit, Firefox) and server-side, with Node.js or Rhino.
http://lesscss.org/
Regarding Stylus — lack of semicolons, colons, and brackets makes your code less readable IMO, rather than moreso.
Are there any CSS frameworks out there along the lines:
Takes CSS "as it should be" as input, maybe with some additional functionality
Outputs cross-browser CSS, with all IE6 hacks in place, using JavaScript and ImageMagick when necessary.
If you're more comfortable with programming, and don't want to deal with CSS hackery, you could always try a preprocessor framework like Compass which is built on SASS. Bootstrap (built on LESS) and Stylus are also worth looking at.
Have you looked into jquery ui?
I need to do this more generally, but a fine current example is my two menus. I have two menu classes, horizontal-menu and vertical-menu, and two sets of rules for elements like ul, li, and a under these classes. Many of these rules have things in common, like the color value for a elements. I would like to refactor the common rules and values into a 'super-class' called menu, and the have only override values in my horizontal-menu and vertical-menu classes. Is there a tool (besides the tool asking this question) that can help me with this?
The best tool for this kind of problem is Compass, a framework for defining rules which are then compiled into css for use in production. It allows you to define variables in much the same way as an imperative language.
It also has other helpful concepts such as mixins which allow the definition of a set of css properties which would be regularly used together, such that you can include that block of properties in multiple standard CSS rules. The power being that you can then edit that mixin in one place, changing the properties and having that change propagate to any CSS rule in which the mixin has been used.
I discovered Compass, and learnt how it should be used thanks, to a screencast by Chris Coyier at CSS Tricks
The only problem in this case (and most cases in fact) is that you really have to start from scratch with Compass, or find a way of integrating its work-flow into your existing one.
You may want to give csscss a shot. I wrote it in order to have an idea of how much I'm repeating myself in my own stylesheets. I'm obviously biased, but a number of people have found it helpful too. SASS, LESS, and Compass support are baked in.
Another great tool is helium which is a javascript tool that runs in the browser and lets you know of any unused rules.
Is there a structured language for declaring styles in a sensible way, which can then be rendered into browser specific css files, similar to what GWT does to Javascript?
It would ideally be a language that supports variables, deals with browser quirks and differences (e.g. filter:alpha vs opacity), provides an intuitive syntax for common tasks such as centering, and has a way to express fallbacks for less capable browsers.
Sass, as in Haml and Sass has some of what you're looking for.
It has variables, math, and other goodies.
The official version is Ruby based, but there are versions for other languages like PHP and Python.
It might not do EVERTHING you mentioned, but it's worth checking out.
GWT's ability to generate code on the fly and it's powerful "deferred binding" capability could definately be applied to stylesheets and allow for build-time optimization of CSS.
Right now, the "GWT way", according to styles is to include all the styles you'll need and use apply them by making use of "dependent style names". But this definitely leads to lost of useless CSS being included where it's not needed.
I know there is at least one attempt to optimize CSS at build time. This would involve combining multiple seperate stylesheets into one, and removing all non-essential whitespace (minifying). I think this might also allow you to make use of deffrred binding to essentially "optimize out" CSS from where it's not needed (ex: browser specific styles).
StyleInjector
To answer my own question (again): Less seems like one of the most interesting projects so far. CSS extension supporting variables, mixins (complex variables), nested rules, and simple arithmetic.
you might want to try HSS.
Thanks for your comments! Sass and HSS seem very similar in scope: simple and block variables, nested blocks, single line comments. HSS has the advantage of being a superset of CSS.
StyleInjector looks more ambitious and interesting. By leveraging GWT's deferred binding capabilities and introducing CSS syntax extensions like conditionals, this approach should make it easy to define not only browser specific but also locale specific styles. Also being able to reference other GWT resources directly, and automatically minimizing styles by removing and merging selectors is pretty cool. I'll definitely follow this project closely.