What is CSS3, SASS, SCSS, COMPASS, LESS, BOURBON

CSS, SASS, SCSS, Compass, LESS, and Bourbon: A Quick Comparison

This guide provides a concise overview of CSS3 and several popular CSS preprocessors. For beginners, we strongly recommend starting with Compass!

CSS3:

• The latest version of Cascading Style Sheets.
• Offers advanced features like animations, transitions, and transforms.
• Learn CSS3 CSS3 Demo CSS3 Documentation

SASS & SCSS:

• SASS (Syntactically Awesome Style Sheets): A CSS extension offering features like nesting, variables, and mixins. Uses indentation for syntax. Server-side processing (typically with Ruby).
• SCSS (Sassy CSS): Functionally identical to SASS, but uses a CSS-like syntax with curly braces.

SASS Website SCSS Documentation SASS Installation

Example:

<code class="language-css">/* CSS */
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

/* SCSS */
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

/* SASS */
li
  font:
    family: serif
    weight: bold
    size: 1.2em</code>

Compass:

• A CSS framework built on SASS.
• Provides a library of helpful mixins, cross-browser compatibility features, and typography patterns.
• Simplifies sprite generation.
• Easily updated via the command line.

Compass Website Compass Demo Compass Installation 1 Compass Installation 2

Example:

Compass code:

<code class="language-scss">#opacity-10 {
  @include opacity(0.1);
}</code>

Generated CSS:

<code class="language-css">/* For IE */
#opacity-10 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}

/* For other browsers */
#opacity-10 {
  opacity: 0.1;
}</code>

LESS:

• A JavaScript-based CSS preprocessor, processed client-side.
• Offers similar functionality to SASS (nesting, variables, mixins).
• Lacks a framework equivalent to Compass.

LESS Website LESS Demo LESS Documentation LESS vs SASS

Bourbon:

• A lightweight mixin library for SASS.
• Works seamlessly with tools like CodeKit and Hammer.

Bourbon Website Bourbon Demo Bourbon Documentation

(Please replace the bracketed link-to... placeholders with actual URLs.)

The above is the detailed content of What is CSS3, SASS, SCSS, COMPASS, LESS, BOURBON. For more information, please follow other related articles on the PHP Chinese website!