#lesscss

Neden Less Kullanıyorum?

Projeye Less ile başlamak, çalıştığım projeyi hazırlama ve düzenleme de ciddi zaman tasarrufu sağlar.

I found a nice tutorial on "sketch like" avatar cropping using CSS clip-path rule and polygons on CSS-Tricks.

The tutorial is pretty straightforward and shows you how to cleverly put together a cross browser CSS snippet, that does the trick. The CSS code is written in SCSS, but since I prefer using LESS, I decided to rewrite it.

Here is the code:

Seriously. Use LESS CSS, you won't believe how fast your CSS styling will go. Here are just a few quick examples of its power:

You can nest selectors. Less code, better readability

CSS

#container { display: block; margin: 0 auto; } #container p { font-size: 1em; line-height: 1.1em; } #container p a { color: red; } #container p a:hover { color: pink; }

LESS

#container { display: block; margin: 0 auto; p { font-size: 1em; line-height: 1.1em; a { color: red; &:hover { color: pink; } } } }

Reusable functions save a lot of time and make code clean.

CSS

You have to define background properties for each element, with all browser specific prefixes.

#container { background: red; background: -webkit-gradient(linear, left top, left bottom, from(red), to(pink)); background: -webkit-linear-gradient(top, red, pink); background: -moz-linear-gradient(top, red, pink); background: -o-linear-gradient(top, red, pink); background: -ms-linear-gradient(top, red, pink); background: linear-gradient(top, red, pink); } #cell { background: red; background: -webkit-gradient(linear, left top, left bottom, from(red), to(yellow)); background: -webkit-linear-gradient(top, red, yellow); background: -moz-linear-gradient(top, red, yellow); background: -o-linear-gradient(top, red, yellow); background: -ms-linear-gradient(top, red, yellow); background: linear-gradient(top, red, yellow); }

LESS

Define a function once, use it anywhere.

.gradient(top, @color1, @color2) { background: @color1; background: -webkit-gradient(linear, left top, left bottom, from(@color1), to(@color2)); background: -webkit-linear-gradient(top, @color1, @color2); background: -moz-linear-gradient(top, @color1, @color2); background: -o-linear-gradient(top, @color1, @color2); background: -ms-linear-gradient(top, @color1, @color2); background: linear-gradient(top, @color1, @color2); } #container { .gradient(red,pink); } #cell { .gradient(red,yellow); }

And that's just the beggining. You can also define variables and reuse them, do calculations, transforms and apply filters on colors. You can even use functions to create decisions.

Actually I'm diving deeper into the Play Framework. So i just came to the issue that my .less Files that i have to put into the /App/Assets/Stylesheets Folder were not processed.

After hours of research I found the simple Solution: In Play Framework 2.3 they changed the default behaviour of processing .less files.

see http://www.playframework.com/documentation/2.3.x/Migration23

Only the .less file named "main.less" gets processed, you have to add a filter to your build.sbt to process the others.

Solution:

1. Edit your build.sbt

I don't have to tell you how nice loops are, but LessCSS seems to be lacking any definite construct dedicated to the mechanism. You can achieve the desired result using recursive guarded mixins. Here's an example:

// language: css; // Loop from 0 to 24 // Loop end .loop( @i ) when ( @i = 24 ) {} // Loop body .loop( @i ) when( @i < 24 ) { // Do something with @i .loop( @i + 1 ); } // Loop start .my-class { // Start loop .loop( 0 ); }

In my case, I was building a guitar fretboard in CSS. On a guitar, a fret is the little strip of metal that allows for discrete notes to be played. In order for the notes to work out "just right", the distance between each fret decreases with each new fret. I approximate this in CSS with a simple linear equation. The HTML for my guitar is looking something like this:

// language: markup; <div class="guitar"> <!-- 16 Frets --> <div class="fretboard"> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> <div class="fret"></div> </div> </div>

Here's some of my LessCSS:

// language: css; // Loop end .fret( @i ) when( @i = 24 ){} .fret( @i ) when( @i < 24 ){ & + .fret { flex: ( (-1/24 * @i) + 1 ) 1 auto; .fret( @i + 1 ); } } .guitar .fretboard { display: flex; width: 100%; height: @neck-height; } .fretboard > .fret { flex: 1 1 auto; // Represents the metal strip border-left: solid 2px @fret-color; } .fretboard > .fret:first-child { border-left-color: #fff; .fret(1); }

It's a bit brute force, but it works. This creates a huge list of selectors specially targeting each fret.

// language: css; .fretboard > .fret:first-child + .fret { flex: 0.9583333333333334 1 auto; } .fretboard > .fret:first-child + .fret + .fret { flex: 0.9166666666666666 1 auto; } .fretboard > .fret:first-child + .fret + .fret + .fret { flex: 0.875 1 auto; } /* ... */

I'm using flexbox, so it's easy to add and remove new frets. You may be wondering why I'm not using nth-child selectors. I tried, but LESS was having an issue creating an nth-child selector with a variable for some reason. So, I resorted to my old nth-child technique.

LESS allows for variables. LESS allows for media queries. But how can you use the two together without a scope issue? I wanted to be able to define the variables for different sizes without having to mess up my code structure. I have discovered a way to do this using nested parametric mip, and the results are pretty great. I will talk about the implementation below.

First, I define my media sizes as variables, so I can change them later. These are just examples, and we can define as many or as few as we want here.

@m-small = ~"screen and (max-width: 799px)"; @m-medium = ~"screen and (min-width: 800px) and (max-width: 1299px)"; @m-large = ~"screen and (min-width: 1300px)";

I only have to call a single function in order to make this work. What it does is render one media query for each size I defined above, and then call some helper mixins for each size.

.media(@attr, @parameter) { @media @m-small { .small(@attr, @parameter); } @media @m-medium { .medium(@attr, @parameter); } @media @m-large { .large(@attr, @parameter); } }

@attr here is the CSS property I want to set, and @parameter is the variable that I want it set to.

Next up, we have the mixins where the variables are set (.small, .medium, .large). Here we see definitions for each variable, and then a call to the mixin that will ultimately render the line of code, .guards().

.small(@attr, @parameter) { @fs-small : 1.4rem; @fs-medium : 2.0rem; @fs-large : 3.4rem; @logo-width : 10rem; .guards(); } .medium(@attr, @parameter) { @fs-small : 1.4rem; @fs-medium : 2.4rem; @fs-large : 3.8rem; @logo-width : 12rem; .guards(); } .large(@attr, @parameter) { @fs-small : 1.4rem; @fs-medium : 1.8rem; @fs-large : 5rem; @logo-width : auto; .guards(); }

Unfortunately, LESS doesn't allow the dynamic definition of CSS properties. However, it does allow matching rules based on the values of parameters. Consequently, the guards have to look a little something like this: (and must be defined for each property you want rules about)

.guards() when (@attr = 'font-size') { font-size: @@parameter; } .guards() when (@attr = 'width') { width: @@parameter; }

So, now to put it all together and see how it works. To make a call to the function, I simply write:

nav { .media('font-size', 'fs-medium'); }

As seen in this example, I make a call to .media('font-size', 'fs-medium'). The result is like this:

@media screen and (max-width: 799px){ nav{ font-size:2.0rem; } } @media screen and (min-width: 800px) and (max-width: 1299px){ nav{ font-size:2.4rem; } } @media screen and (min-width: 1300px){ nav{ font-size:1.8rem; } }

So, this allows me to define all my variables in one place, and then, in a single line, include each media query with the desired variable value. But what are the limitations and drawbacks of this method?

First, the biggest drawback is that this will produce some messy CSS. Specifically, every single element you use .media() with will have media queries wrapped just around it. However, if you preprocess your CSS for production, and minify it, the effects of this are pretty negligible, for a small number of different media sizes.

Now onto some of the limitations of LESS that make this code the way it is:

No way to write variables in the @media scope and have them be useable outside of it.

No arrays: If there were arrays, I could just define one for each media type and pass them in as necessary.

No dynamic definitions of CSS properties means that I can't write the guards in a single line, and have to write one for every property I want to mess with.

required:less.js.

update: 11/11

HTML file.

lesscss js파일로 개발할때 실시간으로 컴파일을 하면서 개발 하고 있엇다.

파폭에서 좀 느리긴 했지만.. 그럭저럭.. 

근데 21.0으로 판올림 한 이후로 열라 느려지면서 심지어 거의 less 파일을 컴파일 못하는 지경에 이르렀다. 

less 파일들을 다 더하면 2만 라인 정도 되려나? 

결국 문제 해결을 위해서 less.js 파일을 이용한 실시간 컴파일 하는건 걷어내고 node를 이용해서 서버단에서 실시간 컴파일을 하는 것으로 변경해야만 했다는.. 

결론은 .. lesscss를 사용할때 파일이 커지면 firefox에서 느려지는 문제가 있다는것! 크롬 js엔진이 더 빠른것 같기도 하고 ㅎㅎ