Web Development

By

JAM-Geek Community

https://jam-geek.web.app
Agenda:

1. What is CSS pre-processor?

2. What is Sass?
3. Why Sass?
4. Sass Features
I. Nesting
II. @import
III. @mixin
IV. @extend

https://jam-geek.web.app
 CSS Pre-processor

Introduction:

1. What is CSS Pre-processor?

• CSS pre-processors are scripting languages that extend the
default capabilities of CSS. They enable us to use logic in
our CSS code.
• CSS pre-processors are special CSS files that contain
variables, functions, mixins and other functionalities which
are not possible with basic CSS.

2. What is Sass?
• Sass stands for Syntactically Awesome Stylesheet.
• Sass is a one of the famous CSS pre-processors
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by
Natalie Weinbaum in 2006
• Sass is free to download and use.

https://jam-geek.web.app
 3. Why Sass?
• Stylesheets are getting larger, more complex, and harder to
maintain. This is where a CSS pre-processor can help.
• Sass lets you use features that do not exist in CSS, like
variables, nested rules, mixins, imports, inheritance, built-in
functions, and other stuff.
• Stylus, less, compass and many things are there for
alternate of Sass. but why we choose Sass is, it has very good
popularity from GitHub survey.
• That is most convenient and easy to learn and we need not
to install software.it can run on an extension.
• That is the scripting language so that contain all scripting
features like inheritance, functions, variables, class and so
on.

Sass Features:

• Sass contain many features that not in normal cuss as

mentioned below.

4. Nesting
• Sass allow to nesting our selection that helps to make a style
without affecting others.
• Example:

Sass Compiled Sass:

nav { nav {

background: #333; background: #333;

ul{ }

display: flex; nav ul{

li{ display: flex;

margin-left:1em; }

} nav ul li{

} margin-left:1em;

} }
https://jam-geek.web.app
5. @Import
• Sass keeps the CSS code DRY (Don't Repeat Yourself). One
way to write DRY code is to keep related code in separate
files.

• You can create small files with CSS snippets to include in

other Sass in any ware.

Reset file: like it may be _reset.scss

*{ main file: like it may be style.scss
margin: 0; @import “reset”;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}

6. @mixin
• Mixin is like a normal function that contain a set of code and
that set of code has specific name. that we can able to use it
from anywhere.

• @mixin used to declare a mixin. And @include used to

implement a function that specific place as we want.

@mixin btn-1{
button {
padding :1em 2em;
@include btn1;
background: #303030;
background: #34007a;
color: #f0f0f0;
}
border-radius:9px;
}
https://jam-geek.web.app
7. @extend
• The @extend directive lets you share a set of CSS properties
from one selector to another.

.button_1{
padding :1em 2em; .button_2{
background: #303030; @extend .button_1;
color: #f0f0f0; background:#333;
border-radius:9px; }
}

https://jam-geek.web.app