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;
