Bootstrap is a popular front-end framework used in web development, providing a set of pre-designed components and styles to streamline the creation of responsive websites. It simplifies the process of building user interfaces, making it a go-to choice for developers worldwide.
On the other hand, SASS, or Syntactically Awesome Style Sheets, is a CSS preprocessor that offers a more powerful and structured way to write CSS code. It enhances code maintainability with features like variables, nesting, and mixins, making it a valuable tool for customizing and optimizing styles.
When compiling Bootstrap to SASS, developers can harness the flexibility and extensibility of SASS to override default Bootstrap variables, modify components, and adapt the framework to meet specific design requirements. This compilation process ensures that Bootstrap’s styles can be seamlessly integrated with SASS’s features, giving developers the freedom to create highly customized and unique web designs while benefiting from Bootstrap’s responsive grid system and other components.
download the bootstrap sass from docs
Create a bootstrap folder in the root directory of your project then copy the scss folder from downloaded bootstrap and past in your project bootstrap folder. ja is optional you can omit it. See the folder structure
Create a folder in the root directory and name it scss or sass. Inside the sass folder, create a scss file. In my case, I created custom.scss. Inside the CSS file, apply your custom design.
Now compile the sass pre-preprocessor
sass sass/custom.scss:assets/css/custom_bootstrap.cssAs soon as you hit this code in the terminal, you will see the assets/css/custom_bootstrap.css file generated in your project.
After that, create your HTM file and link the custom_bootstra.css file to see the customized bootstrap website in the browser. I copied a few demo components from bootstrap documents into my HTML file.
Now you can check my web page.
