The Sass Way File: README — Sass Documentation Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. The second, older syntax is known as the indented syntax (or just "Sass"). Using Sass can be used from the command line or as part of a web framework. gem install sass After you convert some CSS to Sass, you can run sass style.scss to compile it back to CSS. sass --help To install Sass in Rails 2, just add config.gem "sass" to config/environment.rb. Sass can also be used with any Rack-enabled web framework. require 'sass/plugin/rack'use Sass::Plugin::Rack to config.ru. To use Sass programmatically, check out the YARD documentation. Formatting Sass has two syntaxes. Nesting
Fire.app: Dead Easy HTML Prototyping Using Source Maps to Debug Sass in Chrome If you use Sass in your front-end projects, chances are your partials are split in a clean and logical fashion based on a reliable Sass architecture. In such cases, debugging the compiled CSS could be both troublesome and time consuming. Sass provides a flag to enable line numbers (--line-numbers), which includes comments (like below) in your CSS. Although this is helpful, you would still have to trace the bug in your CSS back to the source file manually. So how can we make this process easier? I’m going to show you how to use source maps in conjunction with Chrome’s Workspaces to allow you to debug and edit Sass from within the browser. Browser and Sass Requirements The source maps feature gained a lot of attention when it was first introduced and a lot has changed since. You do not require Chrome Canary, nor do you need to edit to use this. Source maps require Sass 3.3 or above (Sass 3.4 was released recently). What is a Source Map? How Do Source Maps Help? sass style.scss:..
Getting started | Less.js The Shapes of CSS Learn Development at Frontend Masters CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right Triangle Bottom Left Triangle Bottom Right Curved Tail Arrow via Ando Razafimandimby Trapezoid Parallelogram Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Square via Joseph Silber Diamond Shield via Joseph Silber Diamond Narrow via Joseph Silber Cut Diamond via Alexander Futekov Egg Pac-Man Talk Bubble RSS Feed via Kevin Huff 12 Point Burst via Alan Johnson 8 Point Burst via Alan Johnson Yin Yang via Alexander Futekov Badge Ribbon via Catalin Rosu Space Invader via Vlad Zinculescu TV Screen Magnifying Glass
Sass Un article de Wikipédia, l'encyclopédie libre. Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum. Sass est un métalangage de feuilles de style en cascade (CSS). Sass peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs). Articles connexes[modifier | modifier le code] Liens externes[modifier | modifier le code] Site officiel 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; Over time, this file grows until you end up with a mess. Every time you add a new color, it becomes more difficult to find a name for it. A Bad Solution That Does Not Work You’ve felt the pain of your color variables and decided to refactor. At least now it’s obvious what the variables are by looking at them. Another Solution That Doesn’t Work