Advanced CSS

Advanced CSS CheatSheet

by Ninna

Table of Contents

1. Sass Features
2. Sass Syntax
3. Sass Functionality
4. Variables
5. Mixins
6. Nesting
7. Extends
8. Functions
9. Variables
10. Variables

Sass Features

1. Variables
   • reusable values--> colors, font-sizes, spacing
2. Nesting
   • for nesting selectors inside on another for less code
3. Operators
   • for mathematical operations inside CSS
4. Partials and imports
   • to write CSS in diff files and import them all into one single file
5. Mixins
   • for writing reusable pieces of CSS code
6. Functions
   • similar to Mixins, but its value can be used later
7. Extends
   • to make dif selectors inherit declarations that are common to all of them
8. Control directives
   • to write complex code using conditionals and loops

Sass Syntax

1. Sass syntax

    .navigation
      list-style: none
      float: left
      & li
        display: inline-block
        margin-left: 30px

2. SCSS Syntax

    .navigation {
      list-style: none;
      float: left;
      & li {
        display: inline-block;
        margin-left: 30px;
      }
    }

Sass Functionality

1. Comments
   • // inline comments

Variables

1. Declaration $name: value;

Mixins

1. Mixin declaration

    @mixin ime(argument){
      /*sta god*/
    }

2. Mixin call

    @include ime(argument);

Nesting

1. Inside one class declaration we can put nested classes, just indent them
2. When we need deeper nesting we can put & sign which represents all the path to that element

Extends

when we have same principals in multiple selectors

1. Declaring it

    %ime{
      /*sta god*/
    }

2. Calling it*

    @extend %ime;

Functions

1. Declaring runctions

    @function ime(arg1, arg2){
      @return ;
    }

2. Function call

    ime(arg1, arg2) * 1 jedinica;

3. Color functions

   • darken(color, percentage);
   • lighten(color, percentage);