background preloader

SASS/LESS

Facebook Twitter

LESS « The Dynamic Stylesheet language. Why Less? Since first open sourcing bootstrap one question Mark and I have heard a lot is: “why Less?”

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. 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.

Working with guarded mixins from the Course CSS with LESS and Sass

If you haven't watched the movie on pattern matching mixins yet, you should probably stop here, go watch that, and then come back to this one. In this chapter, we'll cover guarded mixins. In my ExampleSnippets file, I scroll down to Chapter 3: Guarded Mixins. Language Features. Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.

Language Features

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). 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%.

Functions

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. saturate Increase the saturation of a color in the HSL color space by an absolute amount.

Parameters: color: A color object.amount: A percentage 0-100%.method: Optional, set to relative for the adjustment to be relative to the current value. Installing Sass. Sass: Syntactically Awesome Style Sheets. Sass. Sass vs. LESS vs. Stylus: Preprocessor Shootout.

Wielding the true power of a CSS preprocessor is an adventure.

Sass vs. LESS vs. Stylus: Preprocessor Shootout

There are countless languages, syntaxes, and features, all ready for use right now. In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus. Preprocessors produce CSS that works in all browsers. CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to CSS without breaking browser compatibility. They do this by compiling the code we write into regular CSS that can be used in any browser all the way back to the stone ages. The most important part of writing code in a CSS preprocessor is understanding the syntax. The Sass Playground! Sass Color Variables That Don’t Suck. One of the best reasons to use Sass is variables.

Sass Color Variables That Don’t Suck

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. 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.

The League of Extraordinary Developers

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.

File: SASS_REFERENCE

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.

Module: Sass. Methods in this module are accessible from the SassScript context.

Module: Sass

For example, you can write $color: hsl(120deg, 100%, 50%) and it will call #hsl. The following functions are provided: 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?

Sass & Compass Introduction, maddesigns (Sven Wolfermann) #t3cs12 #t3dd12

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. 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. Spriting with Compass. Spriting has never been easier with Compass. You place the sprite images in a folder, import them into your stylesheet, and then you can use the sprite in your selectors in one of several convenient ways.

Sprite Tutorial Contents. Compass Utilities. Sass vs. LESS vs. Stylus: Preprocessor Shootout. SASS vs. LESS. "Which CSS preprocessor language should I choose? " Skins in LESS/SASS form - General Discussions Forum - ASP.NET Controls. Pull Menu - Menu Interaction Concept. Compile less, sass, scss, compass, stylus, cofffeescript, jade,