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

2 comments:

  1. bro don't mind. aap professional ho. Agr aap JS, HTML or css ko pre code k sath post mai integrate karoge to woh dikhne mai bhi acha lage ga or easily samaj mai bhi aa jata hai.

    ReplyDelete
  2. Your article has made me more experienced and impressed. I hope you have more good posts. ฝากจอดรถยนต์อุบล

    ReplyDelete