Child pages
  • Bootstrap, Sass and Compass in PrestaShop 1.6

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • length($list) - Returns the length of a list.

  • nth($list, $n) - Returns a specific item in a list.

  • join($list1, $list2, [$separator]) - Joins together two lists into one.

  • append($list1, $val, [$separator]) - Appends a single value onto the end of a list.

  • zip($lists...) - Combines several lists into a single multidimensional list.

  • index($list, $value) - Returns the position of a value within a list.

 

The @ directive

Sass supports all of CSS3's @ rules, and adds a few more features such as:

  • Control directives for the CSS compilation.
  • Use of mixins.

@import

You can create files that contain the Sass instructions that you can include in other files.
These "imported" files must have an underscore ("_") at the beginning of their names so as to not be directly compiled into CSS.

For instance:

Code Block
title_partial.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

Importing _partial.scss into global.scss:

Code Block
@import 'partial';
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@import automatically searches files with a .scss or .sass extension.

You can import several files with a single call: @import "rounded-corners", "text-shadow".

You can import a file from a nested block:

Code Block
/* global.scss */
#main {
  // imports _example.scss
  @import "example"; 
}

@media

Sass allows the nesting of definition blocks from a @media directive.

@media directives can be nested, and they can use SassScript.

For instance, in SCSS:

Code Block
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
  .my_sidebar {
    width: 500px;
  }
}

CSS compilation result:

Code Block
.sidebar {width: 300px; }
@media screen and (orientation: landscape) {
  .sidebar {width: 500px; } 
}
@media screen and (orientation: landscape) {
  .sidebar {width: 500px; } 
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .my_sidebar {width: 500px; } 
}

@extend

Inheritance makes it possible to import styles from one CSS selector to another.

SCSS examples:

Code Block
.message {
  border: 1px solid #ddd;
  padding: 20px;
  color: #222;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}

CSS compilation result:

Code Block
.message, .success, .error {
  border: 1px solid #ddd;
  padding: 20px;
  color: #222;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}

You can also chain inheritance:

SCSS example:

Code Block
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

CSS compilation result:

Code Block
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError, .criticalError {
  border-width: 3px; 
}
.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; 
}

To create a class that would only be available through inheritance, you can use % instead of @.
%-using classes are not present in the generated CSS file.

SCSS example:

Code Block
#main a%bigblue {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %bigblue;
}

CSS compilation result:

Code Block
#main a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}