How To Importing files and Partial in sass ?

  0 comments

When we are developing, it’s often useful to have many smaller stylesheets rather than one huge one.This can reduce the performance of a webpage If we have five style sheets on a particular page, it can makethe page loading times much slower because each style sheet needs a separate request to load..

Importing is a process by which a lot of files are turned into a few files. Sass has a trick where by the smaller style sheets are imported into the larger one as it is compiled into CSS.

Take an example where we have created seprate files.....

Import1 image

Here i have created a file named theme1.scss , which contains some variables having some color property .After that lets create another sass file where we import this file..

All you need to type is @import, followed by the name of the Sass file you want to import.Here is the example where we importing the file "theme1.scss" that is created above..

Import2_0 image

After that output will be like that...

Import3 image

Here one thing must be noted that there  two css file will be generated after compiling "style1.scss", "style1.css" and "theme1.css". If you don’t want a Sass file to generate a corresponding CSS file, just start the filename with an underscore. For example, you can name the file (_theme1.scss.) in place of "theme1.scss" which have been created  above. This feature in sass is known as partial class. After that when we compile the main file (style1.scss) there will be one file generated in output.

 

Add new comment