Direkt zum Hauptbereich

LESS is more!

The dynamic stylesheet language less has been around for about 4 years now. It is not just a pre-processor anymore. With all initiatives to make native support for less in browsers possible, you must agree with me that it has earned a place in modern websites. I will try to make it appealing to you, so you can see, why you should be using less.  I will show you then an easy way to integrate less into your web application using maven. So if you still have some doubts about the power of less, here are some quick reasons why you will be wanting to use it:

Variables

less allows you to define variables. You can do something like:

@myShadeOfGrey: #999999;

# header {
    color: @myShadeOfGrey;
}
h2 {
    color: @myShadeOfGrey;
}

and you will be able to try some other colors changing just one line of code.


Mixins

you don't need to repeat definitions all over the place. Mixins allow you to reuse your code:

.myFontStyle (@size: 5px) {
  font-size:@size;
  font-family:"Times New Roman";
}

#header {
  .myFontSize;
}
#footer {
  .myFontSize(2px);
}

as you can see, you can even use parameters in your definitions.

Functions, Operations and Guards

if the reasons above didn't make it for you, this should do. With less, you are able to manipulate definitions depending on any values you want. It has also some very useful built in functions:

@green: #4D926F;
@the-border: 1px;
@base-color: #842210;
@red:        #842210;

div.class1 {
  background: @green;
  color: @base-color * 3;
  border-left: @the-border;  
  padding: @the-border * 5;
}

div.class2 { 
  color: desaturate(@green, 10%);
  border-color: desaturate(@red, 10%);
}

.background-guard (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.background-guard (@a) when (lightness(@a) < 50%) {
  background-color: @green;
}
.background-guard (@a) {
  color: @a;
}

div.class3 { .background-guard(#ddd) }
div.class4 { .background-guard(#555) }

you can later check out my project and see how these examples are translated to css.

Integration in your maven web application project


If you are like me a web application developer using java, you are using maven. (If not, you are probably doing something very wrong.) So you are delivering a war/ear to be deployed. Your project has some web pages that are included into the package. You could still use less and let the browsers do the processing online with JavaScript. That is the way less.js is built to work. But if you find it kind of shady making the browsers do so much work and depending on some library on load-time, or even are afraid of performance, you could deal with this on compile time. This way you deliver plain css (if you want to) and nobody has to know you even used less.

Go to the site of these guys: https://github.com/marceloverdijk/lesscss-maven-plugin and read the examples. Yes that's it! 

You can find a demo project I made here (made for netbeans, but should work with others IDEs).

Here is a small walktrough:

I created the web application with the following directory structure:


So you can put your less code in a directory, that you can later on exclude in your assembly. The important files after a maven built are here (notice i did not exclude the less directory):
 


All the magic happens in the pom:

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.3</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
        <compress>true</compress>                    
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>                 

That's it. If you prefer the newest version of less.js, you can set that option:
<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.3</version>
    <configuration>
        <lessJs>${project.basedir}/src/main/webapp/js/less-1.4.1.min.js</lessJs>
        <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
        <compress>true</compress>                    
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>                 

less gives you the programmers view over your css. It allows you to try some stuff the easy way and encourages the user to be clean and structured when using css.

Note:

You will need to run the project on a webserver to try it out. But if you just want to play around with less you can create a simple server to deliver the content using python. Check out my blog on that.



Kommentare

Beliebte Posts aus diesem Blog

JUnit testing services and clients with javax.xml.ws.Endpoint

Following situation: you have written some generic stub to use in your projects that creates a client for a service. Your client is smart and does some magic for connections (proxy, cache or other kind of magic). Or maybe you just have written a service for that matter. Anyway, you now want to test it. Unit testing the functionality of your methods is a must. But you still want to reach 100% coverage and need to test the service as it would run in real life.
Then you can use the javax.xml.ws.Endpoint class.
If you prefer figuring it out yourself, you can find the code (as a project for netbeans) --here--
To follow the code examples as html click  --here--

So here is how you do it:

If you've coded nothing fancy, then you probably have a class like this:



This is a generic client for opening connections to services. It gives you back a port of the type of your service where you can call your operation as a method of the port. It is very convenient if you have to do some nasty network-conne…

12 steps for software development

We admitted we were powerless over planing—that our time had become unmanageable. Came to believe that a Power greater than ourselves could restore us to sanity. Made a decision to turn our will and our lives over to the care of The Team. Made a searching and fearless moral inventory of ourselves. Admitted to The Team, and to managers the exact nature of our wrongs. Were entirely ready to have The Team remove all these defects of character. Humbly asked The Team to remove our shortcomings. Made a list of all projects we had harmed, and became willing to fix them all. Made direct bug fixes to such projects wherever possible, except when to do so would injure them or others. Continued to take personal inventory and when we were wrong promptly admitted it. Sought through code review and automation to improve our conscious contact with The Team, committing only tested features. Having had a spiritual awakening as the result of these steps, we tried to carry this message to other developer…

male death rates and hot pants