SASS

Sass - Links

BLOMG - Getting started with using Sass in your existing website.

Sass - CSS with superpowers.

Scotch.io - Getting Started with SASS (with interactive examples).

Thesassway.com - Beginner - Beginner Guides & Tutorials on Sass and Compass.

W3schools.com - Sass Introduction.

Sassmeister - SCSS | CSS.

Sass - Introductie

Sass (style sheet language)

Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

Sass consists of two syntaxes. The original syntax, called "the indented syntax," uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternatively, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.

The indented syntax is a metalanguage. SCSS is a nested metalanguage and a superset of CSS, as valid CSS is valid SCSS with the same semantics.

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.

Bron: Wikipedia: Sass (style sheet language).

Sass

Learn how to modify the UIkit styling and create your own theme with Sass.

When you have installed UIkit with sources you will find the UIkit Sass version within the /src/scss folder. The Sass version allows you to include customizations in the build process, rather than manually overwriting a lot of CSS rules by hand.

Note Sass allows two different syntax versions: Sass and SCSS. UIkit makes use of the SCSS syntax.

Bron: Uikit: Sass.

Sass - Voorbeeld stylesheet

Voorbeeld van SASS in style.scss van een webpagina:

$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

Het equivalent van SASS als CSS in style.css van een webpagina:

body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

Sass - Voorbeeld met layout in SASS

Een voorbeeld met layout in SASS: Voorbeeld in SASS.

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: maandag 16 september 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord