how to target run command of scss

how to target a a scss file which compile css 

to target a file we need a command which  compile scss to css

here the example

here the file hierarchy on one which scss files and the other output files come in css file so

Open a command prompt

and move to your project directory  e.g(C:/OurProject)


now when you stand on your project styling folder 
run the command for compilation 

before run the command create a scss file in scss folder 
then type a command

sass --watch scss/main.scss:css/main.css


 

now change in your scss file and its auto compile it into css file

how to install sass or how sass working (For Windows)

To install scss you need RubyInstaller  which need to compile scss from ruby website (https://rubyinstaller.org/).

after download it 

install its simple just do next next to the .exe of ruby installer.

after that check that ruby is install

Its give the detail if the process will show you any error kindly ask me on comment.

after that run the command next to the line 

gem install sass

after instal of it check that scss is instal or not check the version




now your system have scss install

learn Sass from the basic

Introduction 

Now the world moving  forward day by day everything become a giant wither it's a food or an infrastructure of the City. Same in 2001 website now become a web application if it still survives . Numbers of classes, methods ,controls and the views now become a challenge for the team and project .As markup of any application or website is basic pillars if the HTML and CSS do not up to the mark its become a problem to back-end and make a serious harm to the application ,its seems that HTML and CSS are easy  to use ,when you talk about a modern  application you need a professional of it .
So here we start a sass which uses for a giant application or small application, it's sometimes too time-consuming but definitely, it reduces the time after the base of CSS classes has been constructed. Sass is  preprocessor language which is just for providing facility to the UI/UX developer for maintaining the huge CSS of a number of different views.

 This is the real life issue which I face in a project :) , to control this such headache task  when a new development comes across

How sass work 

Sass is basically a CSS but in programmatically form . for example when developing a Theme  there is always a 2 main color on which color contrast working . so it uses in various  places  ,we make 2 variable like x-color:red and y-color:green . so the requirement comes across change the theme of the website ?
So we go and change all the color line by line ?
this is the most common example of sass functionality let have a look on that .
sass input

/*initialize variable in scss */ 
$xc : red; /*c define the color here */
$yc : green;
 */starting  simple css code but given  a variable instead of color code */
div.parent1{backgroud-color:$xc;color:yc;}
div.child1{backgroud-color:$yc;color:xc;}
div.paren2{border-color:$xc;color:yc;}
div.child2{backgroud-color:$xc;color:yc;}

Css Output
div.parent1{backgroud-color:red;color:green;}
div.child1{backgroud-color:$yc;color:green;}
div.paren2{border-color:red;color:green;}
div.child2{backgroud-color:red;color:green;}

the advantage is when you have a versatile application you just change once the variable it changes in whole compiled file yes it responsible task . There is a compiler between sass and css which convert scss into css.This is a little description about sass  we will further discuss it Installation step by step with most easy procedure  .