Scribd
Upload
59 views

Web Development: JAM-Geek Community

This document discusses CSS preprocessors and Sass. It defines what a CSS preprocessor and Sass are, why Sass is used, and key Sass features like nesting, imports, mixins, and extends that allow for more advanced CSS stylesheets.

Uploaded by

Sathish
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Web Development: JAM-Geek Community

This document discusses CSS preprocessors and Sass. It defines what a CSS preprocessor and Sass are, why Sass is used, and key Sass features like nesting, imports, mixins, and extends that allow for more advanced CSS stylesheets.

Uploaded by

Sathish
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like