MakeW3web

Sass basics

Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or compiled into CSS. It provides a number of features and functionalities that make writing and managing CSS easier and more efficient. Here are some basics of Sass along with examples:

Variables

Sass allows you to use variables to store values and reuse them throughout your stylesheet. This makes it easy to change values throughout your stylesheets without having to manually update every instance. For example:

$primary-color: #0088cc;

nav {
  background-color: $primary-color;
}

a {
  color: $primary-color;
}

In this example, the `$primary-color` variable is defined at the top of the stylesheet, and is then used to set the background color of the `nav` element and the text color of links.

Nesting

Sass allows you to nest selectors within other selectors, making it easier to write and read your CSS. For example:

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

In this example, the `li` element is nested inside the `ul` element, which is nested inside the `nav` element. This makes it clear which styles apply to each element.

Mixins

Sass allows you to create mixins, which are reusable blocks of CSS that can be included in other styles. This can make your stylesheets more modular and easier to maintain. For example:

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

button {
  @include border-radius(5px);
}

In this example, the @mixin rule defines a mixin called border-radius, which applies a border radius to an element. The @include rule is then used to include the mixin in the button styles.

Functions

Sass also allows you to create functions, which can perform calculations or manipulate values. For example:

@function em($size) {
  $base-font-size: 16px;
  @return ($size / $base-font-size) * 1em;
}

h1 {
  font-size: em(24px);
}

In this example, the `@function` rule defines a function called `em`, which converts a pixel value to an em value based on the base font size. The `@return` rule is used to return the converted value. The `font-size` of the `h1` element is then set using the `em` function.

These are just a few examples of the many features and functionalities provided by Sass. By using Sass, you can make writing and managing CSS easier and more efficient, allowing you to focus on creating great-looking web pages.

Was this page helpful?