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. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in Less, that’s cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In Less, there are also some mixin libraries battling to be the best. See that?
The Lengths of CSS There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the offset and sizing of a box-shadow or the size and spacing of fonts. What are all the accepted “length” properties in CSS? There are quite a few. The Absolute Lengths px Pixels don’t have anything to do with the literal screen pixels in the display you are looking at. It is supposed to be a value that is normalized across devices and displays, but that increasingly isn’t true anymore. Pixels are still a canonical measurement on the web though as they are consistently handled, many other lengths map directly to pixels, and JavaScript speaks in pixels. in Inches are a physical measurement, but in CSS land, they just map directly to pixels. 1in == 96px cm For most of the world, centimeters are more familiar and useful as a physical measurement. 1cm == 37.8px mm And an order of magnitude smaller… Em Rem Points Pica
width The width property in CSS specifies the width of the element's content1 area. This "content" area is the portion inside the padding, border, and margin of an element (the box model). In the example above, elements that have a class name of .wrap will be 80% as wide as their parent element. Width can be overridden by the closely correleated properties min-width and max-width. Digging Deeper When using percentage (%) for width, authors must be aware that the percentage is based on the element's parent, or in other words, the width of the containing block. Note that width applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. thead, tfoot and tbody). For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. Width is usable today as an animatable property. Keyword Values min-content max-content fill-available ???. fit-content
px - em - % - pt - keyword Keyword Valid options for setting font-size in keyword are xx-small, x-small, small, medium, large, x-large, and xx-large as well as relative keywords smaller and larger. Surprisingly enough, keyword sizing is pretty consistent across browsers and platforms. See below a test page in Opera, Firefox, IE 6, and Safari: Note that although the they are pretty close, there are differences in where the lines break and total paragraph height. Only when one of the relative sizing keywords are used does the "cascade" kick in and the font-size of the parent element effects the child. Keywords are a perfectly fine way to size fonts on the web. However, keywords don't offer very fine-grained control of your typography, as the choices are fairly limited. px If you need fine-grained control, sizing fonts in pixel values (px) is an excellent choice (it's my favorite). Windows, Mac, aliased, anti-aliased, cross-browsers, doesn't matter, a font set at 14px will be 14px tall. em The first one is the big one. pt
Why Ems? I've long sized text only in px. Even when it was patently uncool to do so - the days in which smart people cared about the fact that text set in px couldn't be resized in IE 6-8. I've switched over to using ems now. I haven't moved every single project over yet, but my mind has switched. Why? I finally found some compelling reasons that I now grok. You're going to need to change font sizes for different screen sizes The same size body type that looks good on a phone sized screen does not look good on a widened desktop layout. Let's say you look through your stylesheet and find 50 different font-size declarations in px. First of all 50 places is too many for all but the most enormous of websites. It's arbitrary anyway Devices do try to normalize the physical size that "1px" is despite their screen density. You might feel more comfortable sizing in px because you've done it longer, but that doesn't make it more intuitive. Relative Space Relationships Minor Blahs Share On
Just use pixels | Ben Frain 228Days 228 days since this post was last revised. Specific details have probably changed. For the last few years I have been obsessed with avoiding pixels when specifying length units in my CSS. Now it’s time to about turn. Pixels have always been the faithful servant of designers. It is self-evident that using pixels for length measurement in CSS solves a set of problems. However, for some time, from a technical point of view (particularly in a responsive web design world) pixels have presented fundamental issues. Therefore, in more recent years, where appropriate, many CSS authors (myself included) have been specifying lengths as em/rem (when percentage didn’t make more sense). Despite the initial frustration and habit of converting a visual specified in px to rem or em, I’ve learnt to embrace new found abilities these units presented. As I write this, I’m prototyping new designs for this site. So, yes, rems are really useful. An em always looks to its parent and compounds.
A Pixel Identity Crisis A note from the editors: This article was augmented post production with vendor prefix information to cover Webkit-based and Opera browsers. The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept. Because of this consistency, web designers have adopted pixels over points and other units to build websites. Article Continues Below Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. The hardware pixel#section1 Most of us are familiar with the hardware pixel. The reference pixel and splitting atoms#section2 Things are changing for the pixel. Reference pixels are amazing, but now we have two conflicting definitions.
Design Responsivo na prática 2: do layout ao HTML Há um tempinho atrás eu escrevi aqui no Tableless um artigo chamado Design Responsivo na Prática – Do Rascunho ao Digital. A abordagem na época foi mais voltada para os designers, que estavam carentes de conteúdo bacana sobre o assunto. Mas, no entanto, todavia, algumas pessoas comentaram que gostariam de ver o desenvolvimento do dito cujo do layout criado passo-a-passo ou ao menos uma demo. Hora da Revisão Não vou perder tempo aqui falando o que é design responsivo (conjunto de técnicas para melhorar a experiência do usuário independente do dispositivo que ele esteja utilizando), quais são as principais características de um site responsivo (um único conteúdo em uma única URL em um único código) ou por que você deve utilizar (são tantas que este parênteses seria gigante). Quais são? Spoiler: fundação flexível, imagens adaptáveis e media queries. 1. Este é o esqueleto básico do layout. (Quase) tudo é relativo Para todo o resto conheça agora seus novos melhores amigos: % e EM. 2. 3. Banner