- This topic is empty.
-
AuthorPosts
-
October 31, 2011 at 4:38 am #34983aoeuiParticipant
hi,
I worked with 960.gs http://grids.heroku.com/
looks so messy compared to http://twitter.github.com/bootstrap/bootstrap is using LESS
http://lesscss.org/#-client-side-usageto generate its CSS in the first place
in bootstrap there are .less files
scaffolding.less
// GRID SYSTEM
//
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter therevariables.less
// Griditude
// Modify the grid styles in mixins.less
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));ok so far understand it
need it change it as follows@gridColumns: 20;
@gridColumnWidth: 30px;
@gridGutterWidth: 20px;but how can I “render it / convert it” into normal .CSS using the less.js file ?
http://lesscss.org/#-client-side-usageOctober 31, 2011 at 4:51 am #89959aoeuiParticipantdo not understand the way how to compile .less file to .css
using the javascript fileI am not native English speaker so it sometimes, still, eludes me what and how to do because I do not understand fully the context
October 31, 2011 at 5:33 am #89964aoeuiParticipantfound this article
http://designshack.net/articles/css/using-less-js-to-simplify-your-css3how to compile is at the bottom but still don’t get the point
tried it here
http://krsiak.cz/less/as it says, first put .less, .js file goes after it
understand that but where can I see the actual CSS that is running it, have no ideaNovember 1, 2011 at 10:32 am #90005JohnnybMemberHey,
If you want to see the actual CSS that is running you can just use firebug/developer tools – inspect an element and you’ll see the compiled CSS. The less.js file creates the CSS in the browser rather than compiling it on the server, although there is a server side version too (http://lesscss.org/#-server-side-usage).
John
November 1, 2011 at 10:37 am #90006aoeuiParticipanthi,
as you mentioned I needed to extract the CSS generated
thanksJuly 20, 2012 at 10:16 pm #106502HalcyonARTMemberHey Mate,
The Johnnyb’s solution is not too bad (on the client side) but it’s not really optimized. Indeed you may encounter issues like source of your images etc.
To fix your problem use http://wearekiss.com/simpless You gonna have a right render of your CSS file.
Once the CSS has been generated, you may have to clean up your comments.(Geez I am answering to a very old post)
CheersDecember 14, 2012 at 8:21 am #117391EdsonParticipantI use [WinLESS](http://winless.org/ “WinLESS (for Windows)”) to do the work. It monitors my LESS folder and compile the CSS automatically every time I save the LESS file.
December 14, 2012 at 8:41 am #117395davidlab.beParticipantPhpstorm now has a great .less compiler plugin. Awesome!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.