background preloader

Module: Sass

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 rgb($red, $green, $blue) Creates a Color from red, green, and blue values. rgba($red, $green, $blue, $alpha) Creates a Color from red, green, blue, and alpha values. red($color) Gets the red component of a color. green($color) Gets the green component of a color. blue($color) Gets the blue component of a color. mix($color1, $color2, [$weight]) Mixes two colors together. HSL Functions hsl($hue, $saturation, $lightness) Creates a Color from hue, saturation, and lightness values. hsla($hue, $saturation, $lightness, $alpha) Creates a Color from hue, saturation, lightness, and alpha values. hue($color) Gets the hue component of a color. saturation($color) Gets the saturation component of a color. lightness($color) Gets the lightness component of a color. unique-id() Related:  SASS

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 There are two syntaxes available for Sass. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. Either syntax can import files written in the other. # Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass Using Sass gem install sass

Sass functions cheat sheet ##Sass Functions Cheat Sheet ####RGB Functions rgb(­$red, $green, $blue) Creates a color from red, green, and blue values. rgba­($red, $green, $blue, $alpha) Creates a color from red, green, blue, and alpha values. red(­$co­lor) Gets the red component of a color. gree­n($­col­or) Gets the green component of a color. blue­($c­olor) Gets the blue component of a color. mix(­$co­lor1, $color2, [$weig­ht]) Mixes two colors together. ========== ####HSL Functions hsl(­$hue, $satur­ation, $light­ness) Creates a color from hue, satura­tion, and lightness values. hsla­($hue, $satur­ation, $light­ness, $alpha) Creates a color from hue, satura­tion, lightness, and alpha values. hue(­$co­lor) Gets the hue component of a color. satu­rat­ion­($c­olor) Gets the saturation component of a color. ligh­tne­ss(­$co­lor) Gets the lightness component of a color. adju­st-­hue­($c­olor, $degre­es) Changes the hue of a color. ligh­ten­($c­olor, $amount) Makes a color lighter. dark­en(­$color, $amount) Makes a color darker.

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. Many of these improvements are directly inspired by CSS preprocessors like SASS and LESS. NOTE: Everything described in this post is experimental, and in the process of being proposed to the CSS Working Group. CSSOM Improvements The CSS Object Model (or CSSOM for short) is the javascript interface to CSS. Now, don't get me wrong. We can do better than this. The new improvements to the CSSOM we're implementing solve all these problems and more. Pretty much all heavy JS development involves tweaking CSS a lot. CSS Variables Both declaring and using variables are really easy: CSS Mixins CSS Nesting

Using pure Sass functions to make reusable logic more useful Sass gladly lets you add calculations and logic in a way that CSS would never abide. But does that mean you should go around adding and dividing just anywhere? Find out how you can use pure Sass functions to make reusable logic more useful and your working Sass file more readable. Sass adds Functions Sass has mixins, we all know that. Mixins and Functions: Kissing Cousins Functions and mixins are very similar in nature. Exhibit A: Mixin The following mixin can accept arguments and do calculations. Now we use the @include directive to insert our mixin's code. .my-module { @include my-padding-mixin(10px);} And here is the output CSS code. Exhibit B: Function A function is very similar to a mixin, however the output from a function is a single value. The following function can accept 2 arguements, $some-number and $another-number. @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number} Readable, DRY Sass Using Functions target / context = result or

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 Setup For this tutorial, let's imagine that in your project's image folder there are four icons: images/my-icons/new.pngimages/my-icons/edit.pngimages/my-icons/save.pngimages/my-icons/delete.png Each is an icon that is 32px square. Basic Usage **Note: The use of icon is only for this example, "icon" represents the folder name that contains your sprites. The simplest way to use these icon sprites is to let compass give you a class for each sprite: @import "compass/utilities/sprites"; @import "my-icons/*.png"; @include all-my-icons-sprites; And you'll get the following CSS output: You can now apply the my-icons-XXX classes to your markup as needed. Let's go over what happened there. Nested Folders Example: @import "themes/orange/*.png"; @include all-orange-sprites; Oily PNG

Tutoriel Vidéo HTML-CSS Compiler ses fichiers SCSS avec libSASS Comme vous le savez je suis un très grand fan du préprocesseur SASS, je l'utilise dans tous mes projets et je l'acompagne aussi de la librairie Compass. Malheureusement, j'ai toujours été frustré par la lenteur du système et le besoin de devoir installer Ruby pour le faire fonctionner (les gens qui comme moi sont sur Windows comprendront :)). Un portage de SASS a été fait en C pour permettre une compilation plus rapide et un portage plus simple du compilateur : libSASS. Mais, ne baissez pas les bras tout de suite. Vu qu'il y a beaucoup de fichiers éparpillés partout je vous ai fait un dépôt github

HOW TO: Get Started With the COMPASS CSS Framework Anybody who's built a website of any size knows how quickly CSS can get out of hand. Style sheets can grow bloated and lengthy, making it difficult to find things, introducing redundancy and producing an end product that makes code maintenance tedious. Let's face it — CSS is not very well-designed. Over the years, a number of solutions have cropped up that attempt to deal with these problems. One of the most popular is the CSS framework, COMPASS. Below, we'll give you a quick introduction to how COMPASS works, and some tips on how to make it work for you. What is COMPASS? COMPASS is an open source CSS authoring framework written in Ruby that attempts to fix a lot of the shortcomings of CSS. Those features include: With all that and dozens more tidbits to offer, COMPASS provides a robust authoring environment for CSS creation that automatically monitors your code as you write it, compiling it down to pure CSS for use on your site. How Does COMPASS Work? Where to Go From Here

Sass Guidelines — French translation Blueprint Module Source on Github The blueprint module is a simple way of importing all of the most commonly used blueprint modules. In addition, it provides a single mixin, +blueprint, that can be used to generate the blueprint css styles. Installing To create a project using blueprint: compass create my_project --using blueprint To add blueprint to an existing compass project: compass install blueprint To add blueprint and compass to a Rails project: compass init rails --using blueprint Alternate Project Layouts For any of the above commands you could have also selected the blueprint/basic or blueprint/semantic patterns. compass create my_project --using blueprint/semantic This file can be imported using: @import "blueprint" Imports Mixins view source blueprint($nested) Usage examples: As a top-level mixin, apply to any page that includes the stylesheet: Scoped by a presentational class: Scoped by semantic selectors:

10 SASS (SCSS) mixins you should be using in your projects | Engage Writing in SCSS lets you use features that don't exist in CSS yet like variables and nesting. The biggest feature though, in my opinion, is mixins. I'm not going to go into depth of what they are, or how they work, as there are other articles out there in the wild for that. What I am going to do is share a few of our favourites that we use on pretty much every project we do here at Engage. 1. To quickly centre a block element without having to worry about if there is any top or bottom margin already applied. 2. When using ::before and ::after you'll always need these three, so we're saving two lines of code every time you use this. See below an example of using it without any arguments (You will also see this mixin used in some of our other mixins below too). 3. We use this for creating scalable elements (usually images / background images) that maintain a ratio. So to use this you could write the below and your div would have a ratio commonly utilised by video. 4. 5. 6. 8. 9. 10.

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." 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 ZURB Foundation features a set of global styles that include Eric Meyer's reset, tested styles for typography, links, lists, tables and more. And ZURB didn't stop there, they did an awesome job showing off the documentation too. Installation From your Terminal … (sudo) gem install ZURB-foundation If you use Bundler, simply add ZURB-foundation to your Gemfile and bundle install. Form here, you have a few options on getting started with ZURB Foundation. Start a Compass-based project with ZURB Foundation You can start a brand new project using Compass and ZURB Foundation with the following compass command.

Related: