THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

CSS Preprocessor | SCSS & SASS Tutorial in One Video in Hindi 2019

CSS Preprocessor | SCSS & SASS Tutorial in One Video in Hindi 2019






What we will cover in this video:) 


1: What & Why SASS
2: How to use SASS
3: SCSS VS SASS
4: Operators in SASS 
5:  Variables in SASS
6: Nesting in SASS.
7: Mixins & Include in SASS.
8: Partials in SASS.
9: Import in SASS.

Source Code:

index.html file

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>

<header>
<h1>welcome to Thapa </h1>
<p> Please like share and subscribe :)  </p>
</header>

<header class="secheader">
<h1>welcome to Thapa </h1>
<p> DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi
 Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)  </p>
</header>

</body>
</html>

main.scss file

*{ margin: 0; padding: 0; font-family: 'Josefin Sans', sans-serif; }

@import 'mixins';
@import 'variables';

header{ @include headercode(#222f3e, #feca57);

h1{ @include commoncode;
&:hover{ color: $hovercolor; }

&::after{ content: " Family " }

p{ @include commoncode; }
}

.secheader{ @include headercode(#10ac84, #fff);  }


_mixins.scss


@mixin commoncode {
text-transform: capitalize; 
}

@mixin headercode($bgcolor, $colorchng){
width: 100% - 20%;
height: 50vh + 70vh - 20vh;
margin: 0 auto;
background-color: $bgcolor;
color:  $colorchng; 
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

_variables.scss

$hovercolor : #48dbfb;




9: Import in SASS