#less css

[vishaljadhav]

Managing sprites easily with lesscss

Managing sprites easily with lesscss

I use sprite css for all projects on which I work, creating sprite and managing coordinates is repetitive job but the problem is every design requires different sprite grid :( so I thought I can make this task simpler..

I am using less in my stack for all projects, I have written simple helper code to create sprite coordinates this code is not yet complete yet it requires some more editing, I am…

View On WordPress

[vishaljadhav]

Font Size PX to EM with Less CSS

Font Size PX to EM with Less CSS

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less made my life simple, to achieve responsive fonts in my development

LESS FILE

// LESS Variable @base-size = 12; // CONVERT PX TO EM HERE .pxToEm(@px){…

View On WordPress

[kyleondemand]

Just discovered LESS-CSS's &:extend() function

[intellisol]

Why I think LESS is cool

I admit I wasn't much interested when I first heard of CSS preprocessors; it seemed like complicating matters, coupled with my strong dislike for having to install new software due to the ridiculously low hard disk space on my laptop (a side effect of being an electronic music producer--those samples are really eating up a lot of gigs). Being a strong advocate of object-oriented CSS (OOCSS) I was a firm believer that OOCSS could do whatever those fancy preprocessors could. But then I decided to give LESS a try, and things changed. 

The first thing I was fascinated by was the ability to create global variables! My workflow really involves a lot of continuously tweaking my color scheme and fonts, and these global variables spared me even a basic Find and Replace operation. All I needed to do was change the values of these variables and it would reflect in all my selectors. Neat, as far as managing code goes. So now I write:

@bg: #888888;

.abc {

background-color: @bg

}

Next comes mixins, which behave almost like functions. Of course you can find good uses of mixins in any LESS tutorial, but I found a pretty cool way to manage browser prefixes. So now when I have to apply a gradient, instead of copy+pasting a fair amount of cross-browser code everywhere I require a gradient I do this:

.gradient(@colorone, @colortwo) { background: @colorone; /* Old browsers */ background: -moz-linear-gradient(top, @colorone 0%, @colortwo 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@colorone), color-stop(100%,@colortwo)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, @colorone 0%,@colortwo 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, @colorone 0%,@colortwo 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, @colorone 0%,@colortwo 100%); /* IE10+ */ background: linear-gradient(to bottom, @colorone 0%,@colortwo 100%); /* W3C */ }

and then insert .gradient wherever I need a gradient background:

.menu {

.gradient(@menubg, @menubg2);

}

.innerdiv {

.gradient(@innerdivbg, @innerdivbg2);

}

Of course, any fair tutorial on LESS would give you more utilities, but these are the primary uses I have found of LESS. Right now I use a healthy mix of LESS with OOCSS which retains the classic CSS flavor while making my code more manageable. On a side note, I use a nice standalone tool called WinLESS to compile my LESS to CSS. It runs in the background and starts up with my Windows. You can add LESS files to it to monitor and it will process the LESS to CSS whenever you save those files. That saves a lot of headache of manually having to compile each file separately.

[antjanus-blog-blog]

Twitter’s Bootstrap has a standard tool to work with if you want to push an app out as fast as possible and want to have a clean familiar UI that does not take weeks to develop. I wrote previously about customizing bootstrap in haste and have decided to expand on my bootstrap customization guide with a better step-by-step tutorial that designers and developers can follow alike.

Preview here: http://antjanus.github.com/Green-Bootstrap-Theme/

[dragoni]

A must read. Johnathan Croom covers the details on how to accomplish the following using Sass, LESS (my fave) and Stylus:

Syntax

Variables

Nesting

Mixins

Inheritance

Importing

Color Functions

Operations

Practical Applications

Notable Quirks

[workchat]

More or less

PJ : I sat around for over a year thinking, "I should learn LESS CSS"

Jeff : I think there should be more less talking

Josh : less is always more

PJ : Quite proud of ourselves for that one, are we?

Jeff : more or less

[waleedq-blog]

LESS css apache module

mod-less is LESS apache2 module :

This apache2 module is written to compile LESS code inside the css files when they are requested so the process will be transparent from any script using css no matter what it's language is

this apache2 module is written using c.

How it works :

when a request is sent to any css file this request will be handeled by this module, the module will compile the css file and create another file from this css file with .less extension, then the module will pass the compiled version as a resposne to the request

example:

request: http://localhost/themes/css/style.css <=== this css file containes LESS codes insde it the module will compile style.css and save the compiled version to : resposne: http://localhost/themes/css/style.css.less <==== this is the compiled version from style.css then the moduel will return the compiled version as response for the file "style.css"

Dependencies :

Apache2 sudo apt-get install apache2 Less Css sudo apt-get install rubygems1.8 sudo gem install rubygems-update sudo update_rubygems sudo gem install less

Installation :

download the project from here

https://github.com/waleedq/libapache2-mod-less_beta1/tarball/master

copy /bin/mod_less.so to /usr/lib/apache2/modules/mod_less.so chmod 644 /usr/lib/apache2/modules/mod_less.so copy /bin/less.load to /etc/apache2/mods-available/less.load copy /bin/less.conf to /etc/apache2/mods-available/less.conf

you can edit the less.conf file to change when this module is gonna be invoked

for example : this conf with "\.css$" will invoke the module when any .css file is requested <FilesMatch "\.css$"> SetHandler less </FilesMatch> changing "\.css$" to "\.less$" will invoke the module only for requested files with .less extension

Compile from source :

you can clone the code from

git://github.com/waleedq/libapache2-mod-less_beta1.git

github repo link:

https://github.com/waleedq/libapache2-mod-less_beta1

source can be found in /src/mod_less.c to compile it you will need the apxs2 tool which can be found in the apache2-prefork-dev package

sudo apt-get install apache2-prefork-dev

after installing apxs2 tool, cd to the src directory and execute this command

sudo apxs2 -c -i mod_less.c

compiled file "mod_less.so" will be automatically copied to /usr/lib/apache2/modules/mod_less.so and chmoded. you only need to add the less.load and less.conf as mentioned in the Installation section above.

Developers :

waleed al qadi (waleedq).

note: feel free to fork and contrib to this project