File splitting in SASS-CSS Tutorial-php.cn

File splitting in SASS

PHPz

Release： 2023-09-01 14:29:02

forward

778 people have browsed it

SASS 中的文件分割

SASS is a CSS pre-processor, that stands for Syntactically Awesome Style Sheet. The SASS code is written just like a scripting language like JavaScript, but at the time of compilation it is converted into CSS and compiled as CSS in the browser. SASS can be used with any version of CSS. It is used to enhance and advance the way of writing the code in normal CSS.

In a normal workspace, we are used to writing the entire code in a separate file, which makes our code difficult for other developers to read and understand. SASS allows us to split files and separate code into multiple files.

The process of splitting a file includes the breaking of a one big file into multiple sub files and then link them with each other, which can be easily done by using the below methods in SASS −

By using @import and partials
By using @use and partials

Let us now understand the above method in detail, with a code example to link multiple sub-files of a single file in SASS.

By using @import and partial files

In this method, we will write the styles as we normally writes in CSS files. But there will be a common file that contains the @import statement for all the other files to include or link them together and get the code of all those files in that file.

After all the sub files are linked or included into the common file, you need to run the below command in the same folder where all SASS files exists −

Sass –-watch common_file_name.scss final_output_file_name.scss

Copy after login

The above command will link or include the whole code of the common SASS file into the final output file that will be linked to the HTML document to style the page.

Let us discuss the implementation of the above method in detail through code examples -

step

Step 1 − In this step, we will create multiple SASS file with .scss extension
Step 2 - Now, we will create a SASS file containing the @import statements for all the SASS files created in the previous step.
Step 3 - In the final step, we will use the above command to include or link the public files into the final CSS file and then link it with the HTML document.

The Chinese translation of

Explanation

is:

Explanation

File 1 − let us create a file named test.scss and put some SASS code inside that file.

test.css −

div{
   color: #fff;
   background: #444;
   margin: 15px;
}

Copy after login

File 2 − Now, create a file named common.scss. This file will link all the sub files using the @import statement.

common.scss −

@import "test.scss";
div{
   font-size: 22px;
   font-weight: bold;
   padding: 15px;
}

Copy after login

File 3 − This will be our final file, final.css, which contains all the SASS code and will be linked to the HTML document.

Run below command −

sass –-watch common.scss final.css

Copy after login

final.css −

final.css:
/* imported code from test.scss */
div{
   color: #fff;
   background: #444;
   margin: 15px;
}
/* code from common.scss */
div{
   font-size: 22px;
   font-weight: bold;
   padding: 15px;
}

Copy after login

Now, we can link the final.css file with the HTML document to style the page with the CSS of all the SASS files as done in the below example.

Example

The below example will you how you can create and link multiple SASS files together and style a page −

<html>
<head>
   <style>
      /* imported code from test.scss */
      div{
         color: #fff;
         background: #444;
         margin: 15px;
      }
      /* code from common.scss */
      div{
         font-size: 22px;
         font-weight: bold;
         padding: 15px;
      }
   </style>
</head>
<body>
   <div>
      <h2>This is Heading of First Div.</h2>
   </div>
   <div>
      <h2>This is Heading of Second Div.</h2>
   </div>
</body>
</html>

Copy after login

In the above example, we have used the final final.css file to style the document with all the styles of SASS files.

Note - Please make sure SASS is pre-installed on your system to implement the above code example.

By using @use and partial files

Embedding styles using the @use method is almost similar to the @import method. You just need to prefix the file names with an underscore and import them using the @use statement. This will also allow us to access functions and mixins defined in the SASS file.

The Chinese translation of

Explanation

is:

Explanation

File 1 − File 1 will be a SASS file that contains the functions, mixins and simple CSS styles defined with an underscore as prefix.

_test.scss −

@function my_space(){
   $padding: "15px";
   return $padding;
}

Copy after login

File 2 − This will be a common file that links all SASS files together using @use statements.

common.scss −

@use "test";
div{
   color: #fff;
   padding: test.my_space();
}

Copy after login

File 3 − This file is the final CSS file, it is the final version of all styles from all SASS files.

Run below command −

sass –-watch common.scss final.css

Copy after login

final.css −

/* combined code from both files */
div{
   color: #fff;
   padding: 15px;
}

Copy after login

In this way you can implement the SASS by splitting the files and add styles to the HTML document with a final outputting CSS file.

In this article, we learned two ways to link or embed split SASS files into a separate file and use that final CSS file to add styles to our HTML pages.

The above is the detailed content of File splitting in SASS. For more information, please follow other related articles on the PHP Chinese website!