Technique SCSS - CSS Geneve

Sass is an extension of CSS3, which has two formats: Sass and SCSS.

There is no functional difference between the two, but the syntaxes are different.

Both format translated to standard CSS using the command line tool or a web-framework plugin.

SCSS is fully compatible with the syntax of CSS3, while still supporting the full power of Sass. The most useful options are:

1. Nesting

Nesting allows you to avoid repetition of selector path. So it makes the work faster because you have to write less code.

SCSS:

.main_content table {
  margin: 10px;

  
  td {
    text-align: right;

    a {
      font-weight: bold;
    }
  }
}

CSS:

.main_content table {
  margin: 10px;
}

.main_content table td {
  text-align: right;
}

.main_content table td a {
  font-weight: bold;
}

2. Variables

SCSS allows you to declare variables that can be used throughout your stylesheet. Variables allow you to re-use colors, sizes, and other values without repeating yourself, can be done in one place.

SCSS:

$blue: #357ec7;

$nav: 450px;


.navigation {
  border-color: $blue;
  width: $nav;
}


.content {
  width: $nav * 2;
  color: $blue;
}

CSS:

.navigation {
  border-color: #357ec7;
  width: 450px;
}


.content {
  width: 900px;
  color: #357ec7;
}

3. Mixins

Mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.

SCSS:

@mixin rounded_border($radius: 4px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}


.left_sidebar {
  @include rounded_border;
}


.right_sidebar {
  @include rounded_border(10px);
}

CSS:

.left_sidebar {
  border-radius: 4px;
  -moz-border-radius: 4pxs;
  -webkit-border-radius: 4px;
}


.right_sidebar {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

At Penceo we use the SCSS technique to build more logical CSS layouts on the development side, so it is faster to create, and more efficient.

More information about Sass can be found here: http://sass-lang.com/

Blog Penceo

Technique SCSS - CSS Geneve

Services Penceo

Make Contact!