Use Full SCSS Style Guide | Important Use Full SCSS

The following is a basic and most common SCSS properties how they are used to style the web pages. How to use @extend common .class; properties in another class, How to Use @include properties in class and another SCSS property use to help in reduce the number of line code.

SCSS Common CSS property:

Create common color properties using variable.  
$primaryBg: #DDE5ED;

Common Class
.fontsize15 {
    font-size: 15px
}

Use Both Common class and color variable.
.commonFont {
  color: $primaryBg;
  @extend .fontsize15;
}

SCSS Transition Property:

.animation {
    @include transition(background ease 250ms);
    @include transition(all ease 250ms);    
    @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
    @include transition(opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

Transform Property:

@include transform(scale(1));
@include transform(scale(1.1));
@include transform(rotate(90deg));
@include transform(translateX(-100%));
@include transform(translateX(0));
@include transform(translate3d(0, 0, 0));
@include transform(translate3d(280px, 0, 0));
@include transform(translateZ(0));
@include transition-delay(0);
@include transform(translateY(-50%));
@include transform(translateY(100%));

Border Radius Property:

@include border-radius(0 0 60px 60px);
@include border-radius(0.625rem 0 0 0.625rem);
@include border-radius(50%);

Gradient Background:

background: linear-gradient(60deg, rgba(0,0,0,0.8183648459383753) 0%, rgba(0,0,0,0.196516106442577) 76%, rgba(0,0,0,0) 100%);
OR
background: transparent linear-gradient(104deg, #DB0003 0%, #7E0002 100%) 0% 0% no-repeat padding-box;

First and Last Child:

.nav-item{
    &:not(:last-child){...}
    &:not(:first-child){...}
}

SCSS style guide, SCSS syntax, SCSS mixins, sass mixin extend

SCSS Properties, Gradient Background, Transition Property, Transform Property, Border Radius Property, Gradient Background Property.

SCSS stands for Sassy Cascading Style Sheets is a CSS preprocessor that runs on the server and the output of SCSS is CSS code that your browser understands. SCSS needs to be compiles. The benefits of SCSS are reduces the repetition of CSS and therefore saves time and this is advanced version of CSS. SCSS adds nested rules Variables, mixing, selector, inheritance.

In this tutorial we learn few shortcuts and use full CSS code which can easily implement in our code and reduce the number of line code. like use of transition property, box-shadow property, transform and scale property, border-radius property, gradient and responsive media query. Make a common .class and use everywhere using @extend.

How to use SCSS in HTML and basic CSS style which is frequently used and most used by class and CSS properties like transition, animation, box-shadow, border-radius, extend classes.

You can customize this code further as per your requirement.