With conditions, it’s possible to check certain information in our SCSS file. For example, if the color is equal to orange, then we define new parameters:

Generated CSS :

Thanks to this condition, it’s possible to change the value of $shadow by setting $color. In this example, we check the value of $color, however, several other comparisons are possible. Discover all the control directives of SASS.

Loops

Loops allow you to repeat an instruction as many times as you want.

Loops @for

Generated CSS :

Loops @while

Generated CSS :

Loops @each

Generated CSS :

This list can be defined in a variable (comparable to arrays in PHP). Each value must be separated by a comma.
Example: $var: puma, sea-slug, egret, salamander;

L’article SASS – Lesson 5 : Conditions and Loops est apparu en premier sur Ice Development.

A mixin is a piece of customizable and reusable code anywhere in your SASS file. Like a function, a mixin can take parameters.

Mixin with parameters

Thanks to mixins, you will be able to generate several dozen lines of CSS with a single (configurable or not) line in SCSS !

Example :

Compiled CSS file:

SASS does not integrate any predefined mixin. However, this is one of the strengths of Compass, which offers a hundred mixins ready to use: Compass Mixins.

Functions

The difference between a mixin and a function is the result returned once compiled. A mixin can generate several lines of CSS code while a function will only return a value.

Thanks to functions, you will be able to calculate the percentage of a block, convert a “px” unit to “em/rem,” or even lighten a color.

Find the complete list of SASS and Compass functions.

L’article SASS – Lesson 4 : Mixins and Functions est apparu en premier sur Ice Development.

To use a variable, you must declare it with the “$” sign followed by its name and value: $background: rgba(black, .2);

Once declared, the variable can be called anywhere in the document, even if it is defined in a file imported using @import.

Generated CSS code :

The use of a variable has no limit; you can call it as many times as you wish. It is also possible to use a variable in a mixin, a function, or loops.

Use case of a boolean variable in SASS

In the SASS – Lesson 2 post, we explained that it’s possible to organize your CSS in a modular way.
Thanks to boolean variables, you can activate or deactivate a partial or a portion of SASS code.

With $use-slider set to “false”, the code inside the condition will not be compiled.

L’article SASS – Lesson 3 : Variables est apparu en premier sur Ice Development.

With SASS, it’s possible to organize your project into multiple files, which will be imported and compiled into a single minified CSS file.
This is made possible thanks to partials.

SASS partials

The name of a partial always begins with an underscore.
Ex : _reset.scss

Without this underscore, SASS would generate an additional file reset.css.

SCSS code from the _reset.scss file :

SCSS code from the main file style.scss :

Compiled CSS :

Thanks to the @import rule, you can opt for a modular organization, which will allow you to have a better-structured code that is easier to maintain (which is found in the SMACSS philosophy).

L’article SASS – Lesson 2 : Divide and conquer, refactoring est apparu en premier sur Ice Development.

Rule nesting example with a link color and its hover and focus states :

Compiled CSS :

Nesting will help you have a clean, logical, and well-organized code, which should be easier to maintain over time.

Of course, it’s possible to use nesting in any case. Example with media queries : Example with media queries :

Compiled CSS :

L’article SASS – Lesson 1 : Nesting Rules est apparu en premier sur Ice Development.

CSS Hat is a paid extension ($34.99) that allows you to produce your CSS much faster !

Here’s an example of its use in the HTML slicing of the main menu in red below :

1. Select your layer (note, the layer must contain styles! If you use a merged layer, the plugin will not work)
2. Open the dedicated CSS Hat window
3. Click on the “Copy” button

CSS Hat allows

• Generation in the following languages: classic CSS, LESS, SCSS (Compass), SASS, and Stylus
• Browser prefix generation
• Layer dimension generation
• CSS class generation

Where to find it ?

To buy CSS Hat, visit the official plugin website: csshat.com.

CSS Hat will save you a lot of time during your slicing, especially for complex buttons or for gradient backgrounds, as in the example above.

L’article Generate your style sheets more quickly with CSS Hat est apparu en premier sur Ice Development.