Skip to main content

Home/ CSS Evangelist/ Group items tagged less

Rss Feed Group items tagged

Vernon Fowler

Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap | Design S... - 0 views

  •  
    LESS is a friendly, easily-approachable CSS preprocessor. Though ultimately, Sass and Stylus are more powerful and robust, LESS has a certain charm that keeps it as a forerunner in the battle of the preprocessors. If you're a Sass fan, then you can take advantage of Compass, an incredible framework that makes coding with complex CSS3 properties a breeze. But what about LESS users? Where's their Compass? Today we'll look at three awesome mixin libraries that will help fill that void.
Vernon Fowler

An introduction to LESS, and comparison to Sass | Smashing Coding - 0 views

  • The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.
  • With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.
  • Parametric Mixins Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
  • ...8 more annotations...
  • .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
  • The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.
  • Selector Inheritance Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format. .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* will render like so: */ .menu, .footer { border: 1px solid #ddd; }
  • With LESS, you can nest ids, classes and elements as you go.
  • You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.
  • Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units.
  • Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often.
  • Conditionals and Control This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.
Vernon Fowler

LESS « The Dynamic Stylesheet language - 8 views

  •  
    The LESS Ruby gem compiles LESS code to CSS.  LESS is an extension of CSS. You can write LESS code just like you would write CSS, except you need to compile it to CSS. That's what the gem is for. If you are on Mac OS X, you can install the gem by typing the following command in the terminal:
  •  
    LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
Vernon Fowler

Working With LESS and the Chrome DevTools - 2 views

  • While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
  •  
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. | Difficulty: Beginner; Length: Quick; Tags: Tools & Tips, Tutorials, Web Dev
Vernon Fowler

Teresa Rosche Ott: Use LESS, Do More: Getting Started with a CSS Preprocessor | WordPre... - 0 views

  •  
    LESS & SASS are awesome technologies that allow you to write CSS extremely fast with a ton of awesome features. A perfect intro for anyone who wants to get started writing CSS faster, better, and stronger.
Gary Edwards

Introducing LESS: a Better CSS « Usability Post - 0 views

  •  
    Some bright folks also feel the same pain and went ahead and built meta-languages and compilers that take their own version of CSS and compile it to standard CSS code. Their own CSS meta-language is thus able to have new features, like variables, mixins, operations and so on. The most notable of these right now is SASS (part of HAML). I've tried SASS and really liked it, but one thing really bothered me. I didn't like how all the syntax was different to CSS. Sure, it's not CSS anymore, it's SASS, but do we really need to change the syntax of the stuff already present in CSS - why not just expand it? I've asked a friend of mine who is much more competent at programming than me about how long it would take to code a CSS compiler that retained the original CSS syntax but added a bunch of new features. He liked the idea and so we've put together our own version of CSS together with a compiler we call LESS, which stands for Leaner CSS.
Vernon Fowler

WinLess - Windows GUI for less.js - 0 views

  • If you have a folder called 'less' and a folder called 'css' on the same level, add the parent folder. WinLess will then automatically use the css folder as output folder.
Vernon Fowler

Ten Reasons You Should Be Using a CSS Preprocessor | Urban Insight Blog - 0 views

  • 10 reasons you should consider using a CSS preprocessor
  • you can start using things like variables, mixins, and functions. It will allow you to start reusing properties and patterns over and over, after defining them just once
  • nothing is repeated
  • ...2 more annotations...
  • Both Less and Sass support nested definitions.
  • if you can write CSS, you already know how to write valid .less
Vernon Fowler

Golden Bootstrap - 0 views

  •  
    "Golden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap."
Vernon Fowler

phildionne/golden-bootstrap · GitHub - 0 views

  •  
    Golden Bootstrap is a tiny add-on for Bootstrap giving you the divine power of using golden ratio sized columns. Available both for Less and Sass CSS preprocessors.
Gary Edwards

emastic - CSS Framework Project at Google Code - 0 views

  •  
    Emastic is a CSS Framework, it's continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. * Lightweight (compressed weight less then 4kb) * Personalized width of the page in (em,px,%) * Use of fixed and fluid columns in the grid. * Elastic Layout with "em"s
  •  
    Interesting use of a CSS Framework for "Flow" Web documents and pages: Emastic is a CSS Framework, it's continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. Why should you use emastic? .... Lightweight (compressed weight less then 4kb) ..... Personalized width of the page in (em,px,%) ....... Use of fixed and fluid columns in the grid. .......... Elastic Layout with "em"s
Vernon Fowler

LESS « The Dynamic Stylesheet language - 0 views

  • It is possible to output rules in your CSS which allow tools to locate the source of the rule. Either specify the option dumpLineNumbers as above or add !dumpLineNumbers:mediaQuery to the url.
Al-Mehatb Shaikh

Shopping Cart Bronze | logodesign.ae - 0 views

  •  
    The Online Shopping Cart Bronze Package is for beginners to provide them an online shop that is no less than Amazon's online store. To eliminate all the risks
my mashable

Google Can't Do Old Media; Pulls the Plug on Radio Ads - 0 views

  •  
    Google's plans to extend its AdWords platform to traditional media appears to be going up in smoke as the economy falters. The company has announced that it's discontinuing its radio advertising program, a business it got into back in 2006 with the acquisition of dMarc Broadcasting. The news follows word that Google would be pulling out of print advertising as well, which was announced less than a month ago.
my mashable

Facebook Responds to Concerns Over Terms of Service - 0 views

  •  
    Today's hoopla over changes to the Facebook Terms of Service have prompted a rare blog post from Facebook founder and CEO Mark Zuckerberg. In the post, Zuckerberg falls short of apologizing for the changes, but rather, uses the opportunity to explain why Facebook more or less keeps your content indefinitely.
1 - 20 of 34 Next ›
Showing 20 items per page