How To Convert Old CSS To LESS

 

Using a Tool

With increasing popularity of CSS preprocessor, some new tools and apps that essentially aim to makea web designer’s or developer’s life easier, such as this tool: CSS2Less.
This tool allows us to convert regular CSS into LESS. So, let’s give it a try. I have the following CSS rules from my old file to be converted.

view plaincopy to clipboardprint?

1. nav {  
2.     height: 40px;  
3.     width: 100%;  
4.     background: #000;  
5.     border-bottom: 2px solid #fff;  
6. }  
7. nav ul {  
8.     padding: 0;  
9.     margin: 0 auto;  
10. }  
11. nav li {  
12.     display: inline;  
13.     float: left;  
14. }  
15. nav a {  
16.     color: #fff;  
17.     display: inline-block;  
18.     width: 100px;  
19.     text-shadow: 1px 1px 0px #000;  
20. }  
21. nav li a {  
22.     border-right: 1px solid #fff;  
23.     box-sizing:border-box;  
24. }  
25. nav li:last-child a {  
26.     border-right: 0;  
27. }  
28. nav a:hover, nav a:active {  
29.     background-color: #fff;  
30. }  

Here is the result.

view plaincopy to clipboardprint?

1. nav a:hover, nav a:active {  
2.     background-color: #fff;  
3. }  
4. nav {  
5.     height: 40px;  
6.     width: 100%;  
7.     background: #000;  
8.     border-bottom: 2px solid #fff;  
9.     a {  
10.         color: #fff;  
11.         display: inline-block;  
12.         width: 100px;  
13.         text-shadow: 1px 1px 0px #000;  
14.     }  
15.     ul {  
16.         padding: 0;  
17.         margin: 0 auto;  
18.     }  
19.     li:last-child {  
20.         a {  
21.             border-right: 0;  
22.         }  
23.     }  
24.     li {  
25.         display: inline;  
26.         float: left;  
27.         a {  
28.             border-right: 1px solid #fff;  
29.             box-sizing:border-box;  
30.         }  
31.     }  
32. }  

As we can see above, our old CSS is now nested like in LESS.

Limitation

However we can also see some limitations in the results of the conversion. In the old CSS, we have several same colors, such as in these two declarations border-bottom: 2px solid #fff; and border-right: 1px solid #fff; we have both borders in white. In LESS we can actually store this constant value in a Variable.
It also does not nest and separate the pseudo-* with an ampersand (&) symbol, such as in the following rules li:last-child and nav a:hover, nav a:active. They just remain as they are, where we can actually simplify the rulesets this way;

1. li {  
2.     &:first-child {  
3.   
4.     }  
5.     a {  
6.         &:hover {  
7.   
8.         }  
9.         &:active {  
10.   
11.         }  
12.     }  
13. }  

Conclusion

Despite the limitations it currently still has, this tool can quite helpful in saving our time for nesting CSS rulesets. We only need to do the rest manually; possibly until the the limitations above are resolved.