LESS « The Dynamic Stylesheet language. Why Less? Since first open sourcing bootstrap one question Mark and I have heard a lot is: “why Less?”
If you’re not familiar, Less is a dynamic stylesheet language meant to extend CSS with things like variables, mixins, operations and functions. The question is a really good one and something we struggle with a lot ourselves. So much so, Mark asked me to write a little bit about some of the conversations we’ve had around our choice and why we’ve made it.
Going forward, I’m going to try to use this as a faq/wiki for common questions around our decision to use Less. Feel free to ask Mark or I more about any of these questions and I’ll update the post here. CSSOM, Vars, Mixins, Nesting, and Modules. I recently gave a talk about some experimental CSS improvements that Chrome engineers are working on. My slide deck was shared pretty widely, but it's not really designed to be looked at without me standing in front of it providing more background. So, here's a blog post talking about the same stuff. It's almost like I'm standing right beside you, whispering and secretly judging you. Always judging. LESS: Guarded Mixins like MediaQuery. Working with guarded mixins from the Course CSS with LESS and Sass. LESS provides a way of writing mixins called guarded mixins that are very similar to pattern matching mixins, except that they match on expressions, rather than simple values, or function signatures, or what we call arity sometimes.
Language Features. Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.
Released v1.4.0 In the rule set above, the :extend selector will apply the "extending selector" (nav ul) onto the .inline class wherever the .inline class appears. The declaration block will be kept as-is, but without any reference to the extend (because extend isn't css). So the following: Functions. Color operations generally take parameters in the same units as the values they are changing, and percentages are handled as absolutes, so increasing a 10% value by 10% results in 20%.
Set the option method parameter to relative for relative percentages. When using relative percentages increasing a 10% value by 10% results in 11%. Values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, we've used formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with. Installing Sass. When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files.
Sass: Syntactically Awesome Style Sheets. Sass. Sass vs. LESS vs. Stylus: Preprocessor Shootout. Wielding the true power of a CSS preprocessor is an adventure.
The Sass Playground! Sass Color Variables That Don’t Suck. One of the best reasons to use Sass is variables.
They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it’s easy for your variables to get out of hand. In this article, I’ll show you an quick, easy method to wrangle your color variables. The Problem Let’s say you have the following CSS: If you decide to use a different color than #b0eb00, you have to change it in multiple places. Now, it’s easy to change the value of $yellow-green everywhere. As you accumulate color variables, you may decide to stick them in in their own file. $yellow-green: #b0eb00; $gray: #595959; $dark-gray: #363636; $light-gray: #a6a6a6; The League of Extraordinary Developers. Cleaner 960.gs using SASS and Compass Due to large cases of divitis, classitis and some presentational naming conventions we don't agree with, we've kept the front-end grid systems, such as 960.gs, at arms length.
That has recently changed due to SASS and Compass. Why so down on grid systems? If you've never looked at the markup of grid systems before, below is an very small example taken from the 960.gs site. <div class="container_12"><div class="grid_7 prefix_1"><div class="grid_2 alpha"> ... Sass: Syntactically Awesome Style Sheets. File: SASS_REFERENCE. Sass is an extension of CSS that adds power and elegance to the basic language.
It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library. Features Fully CSS3-compatible Language extensions such as variables, nesting, and mixins Many useful functions for manipulating colors and other values Advanced features like control directives for libraries Well-formatted, customizable output Firebug integration Syntax. Module: Sass. Methods in this module are accessible from the SassScript context.
For example, you can write $color: hsl(120deg, 100%, 50%) and it will call #hsl. The following functions are provided: Note: These functions are described in more detail below. RGB Functions. Sass (main) Compass. Scout - Compass and Sass without all the hassle. Sass & Compass Introduction, maddesigns (Sven Wolfermann) #t3cs12 #t3dd12. Introduction tweet: @maddesigns #sass Sven Wolfermann | maddesigns Who is the guy? Sven Wolfermann (34) Freelancer for modern frontend development (HTML5, CSS3, jQuery) from Berlin CSS3 Adventskalender 2010/2011 wrotes articles for T3N, PHP-Magazin and Webstandards-Magazin (new: Screengui.de) Certified TYPO3 Integrator CSS is awesome CSS3 ist not enough… Recommended knowledge for this tutorial CSS (for sure) HTML5 Boilerplate Modernizr No PHP Knowledge nessessary* *can contain tracks of Ruby Short intro to HTML5 Boilerplate Short intro to Modernizr.
35 Great Resources for Compass and Sass. With front-end design getting more and more attention in web development these days, it’s not a wonder that the two are beginning to meld into one. It is crucial to maintain consistency and efficiency in web projects and Sass/Compass tackles this head on. In geek speak, Sass is a meta language integrated with CSS that makes stylesheets more manageable and less repetitive. This simply means you can create CSS without copying and pasting and having to constantly search for previous style references. The beauty of implementing Sass/Compass is that the learning barrier is low and only requires general knowledge of CSS.
It can be utilized in existing popular CSS frameworks because it actually compiles to CSS. Below we have included 35 resources for you to become introduced as well as an expert on Sass/Compass. Zurb Foundation, for Sass and Compass - Projects. What do you get when combine the power of Sass with Zurb? You get Zurb Foundation for Sass and Compass. Foundation is awesome.
I come out of the gate saying, "Foundation is awesome. " It's the perfect flexible grid from desktop to mobile. Foundation includes forms, buttons, and a UI library. With case studies like ZURB Jobs, Swizzle and the Foundation site itself, how can we deny ZURB of hitting this one out of the park? Foundation's Features. Spriting with Compass. Compass Utilities. Sass vs. LESS vs. Stylus: Preprocessor Shootout. SASS vs. LESS. "Which CSS preprocessor language should I choose? " is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Skins in LESS/SASS form - General Discussions Forum - ASP.NET Controls.
Posted 18 Apr 2012 Link to this post. Pull Menu - Menu Interaction Concept. Compile less, sass, scss, compass, stylus, cofffeescript, jade,