background preloader

Sass vs. LESS

Sass vs. LESS
Learn Development at Frontend Masters "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. 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. Winner: Narrowly Sass Language Ability: Logic / Loops See that?

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog Hay, I wrote this in 2012! I still like the notion of the metaphorical connection between content-based sizing units (e.g. ems) and layout definitions (e.g. breakpoints). And the zooming behavior cited here was always meant more as a sidelong example than a core argument. –Lyza, March 11, 2015 If we’re going to be proportional… A core tenet of Responsive Web Design (RWD) is fluidity and proportion. @media all and (min-width: 500px) {} @media screen and (max-width: 800px) {} It’s a natural thought process: for windows or screens of particular width ranges, we want to flow our content in a particular way. Folks who design for traditional reading media—where the content really is king—don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. Thus actual column width is a function of font size and ems-per-line. Baseline expectations You may have seen the rule of thumb (useful, admittedly!) p.s.

Sass vs. Less: So findest du den richtigen Präprozessor für dich | ❤ t3n Vielleicht bist du dir noch nicht ganz sicher, welchen Präprozessor du nutzen willst. Sass, Less oder doch lieber einen Dritten? In diesem Artikel zeigen wir dir kurz und knapp die wichtigsten Unterschiede zwischen Sass und Less. Warum gibt es Präprozessoren wie Sass und Less? CSS ist eine sehr einfache Sprache, um hauptsächlich HTML zu formatieren. Zu den Funktionen von CSS-Präprozessoren gehören unter anderem: Variablen, Verschachtelung, Mixins, Mathematische Funktionen und Manipulation von Farben. Das kann Sass Knapp zehn Jahre gibt es „Syntactically Awesome Stylesheets“ – also Sass – bereits und ist der wohl bekannteste Präprozessor überhaupt. Der größte Vorteil von Sass, neben der Erweiterung von CSS, ist, dass die Sprache von mächtigen Frameworks flankiert wird. Auch das CSS-Authoring-Framework Compass nutzt Sass und wird von LinkedIn sowie von Sencha eingesetzt. Das ist aber noch nicht alles: Mit SCSS existiert eine neue Syntax, die sich näher an der Vanilla-CSS-Syntax orientiert.

The Lengths of CSS By Chris Coyier On 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? #The Absolute Lengths #px Pixels are perhaps best thought of as "device pixels" as this length doesn'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.

CSS Backgrounds 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

100 Great CSS Menu Tutorials Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content. CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials. Horizontal CSS Menu Tutorials 1. View Tutorial | Demo 2. View Tutorial | Demo 3. View Tutorial & Demo 4. View Tutorial | Demo 5. View Tutorial | Demo 6. View Tutorial | Demo 7. View Tutorial | Demo 8. View Tutorial 9. View Tutorial | Demo 10. View Tutorial | Demo 11. View Tutorial | Demo 12. View Tutorial | Demo 13. View Tutorial | Demo 14. View Tutorial & Demo 15. View Tutorial | Demo 16. View Tutorial | Demo 17. View Tutorial 18. View Tutorial | Demo 19. View Tutorial | Demo 20. View Tutorial | Demo 21. View Tutorial & Demo 22. View Tutorial | Demo 23. View Tutorial | Demo 24.

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 - The super fast color schemes generator 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

How to build and publish an Angular module – Cyrille Tuzi When I created angular-async-local-storage, it was easy to create an Angular module and use it directly in my app. But as it could help other developers, I wanted it to be a reusable module, packaged and consumed like any other Angular modules. I struggled with this building part. I found almost no documentation about this, so I tried to copy how the official Http module works. Now it’s done, I’m sharing my experience on how to build and publish an Angular module. This post is for experienced developers, who already know the core concepts of Angular and how to create a basic app. Tools While this post is still relevant, there are now tools to help you in this process and support other features (like external templates, Sass and so on). For example, there is the (unofficial but very good) ng-packagr by David Herges. There is also the angular-quickstarter-lib from Filipe Silva who is an official member of the CLI team. Note I don’t have time to answer to support requests in comments. Why?

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.

css - Font scaling based on width of container 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.