Key Takeaways
- Bootstrap framework, while convenient and popular, can lead to cluttered, non-semantic, and non-reusable markup. Using Sass’s @extend directive allows developers to use Bootstrap in a more robust and semantic way, improving the readability and reusability of the code.
- Semantic markup is more descriptive of its content rather than its appearance. By using Sass’s @extend functionality, developers can create semantic selectors that extend Bootstrap’s selectors, thus achieving a more semantic and robust use of the framework.
- The method of extending Bootstrap with Sass also provides the benefits of reusability and portability. It creates readable and reusable components, and allows for easy transition to a different framework or writing your own due to the clean decoupling of markup from CSS.
Bootstrap provides a quick and easy way to create a scaffold for your latest site or app whether you’re a novice or a professional developer. For this reason, more and more developers are including the framework in their personal toolbox.
There is, however, a dark side to Bootstrap, in that it makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.
In this article, I’ll explain how you can use Bootstrap in a more robust and semantic way. Bootstrap’s latest version shipped with an official Sass port of the framework so we’ll use one of Sass’s most powerful features to achieve this: the @extend directive.
Some Basics on Semantics
First, let’s cover what we mean when we say that we want to make things more “semantic”. HTML documents are intended to be descriptive of their contents from an information hierarchy perspective. One should be able to read them and know what they are about, not how they will look.
With the rise in popularity of CSS and especially CSS frameworks, HTML is often written with a CSS sheet in mind rather than a reader/developer.
It’s not uncommon to see HTML markup like this in the source code of modern websites:
<div class="row">
<div class="col-md-4">
Name:
</div>
<div class="col-md-4">
John
</div>
<div class="col-md-4">
Smith
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
"I enjoy writing code in my spare time."
</p>
</div>
</div>
Bootstrap’s CSS files know exactly what to do with that. Two rows, one split into thirds and the other full width. As developers who are familiar with Bootstrap, that’s easy enough for us to figure out, but what if you’d never used the framework before? What is this snippet of HTML for? What does the information pertain to? The markup isn’t revealing anything practical.
Semantic markup is code that describes it’s content rather than its appearance. We could write the code above semantically as follows:
<div class="author-name">
<label class="author-nameLabel">
Name:
</label>
<span class="author-nameFirst">
John
</span>
<span class="author-nameLast">
Smith
</span>
</div>
<div class="author-bio">
<p>
"I enjoy writing code in my spare time."
</p>
</div>
It’s not all that different but it immediately tells us what each element is for and how each one might relate to other elements. What we’ve lost is the knowledge of how this will be presented visually. But that’s not the purpose of HTML after all.
How is Bootstrap Supposed To Style That?
You might be wondering how you’re going to use Bootstrap without any of its built-in class names in your markup? Well, we can leverage the power of Sass’s @extend
functionality to solve this problem.
From Sass’s documentation:
@extend
works by inserting the extending selector anywhere in the stylesheet that the extended selector appears.
This means we can use our semantic selectors and extend Bootstrap’s selectors to get all of its goodness. Here’s how:
/* Import bootstrap-sass so that we have access to all of its selectors */
@import "bootstrap";
/* Author Bio and Author Name are just Bootstrap .row elements */
.author-bio,
.author-name {
@extend .row;
}
/* Author nameLabel, nameFirst and nameLast need
to be a third of their container's width */
.author-nameLabel,
.author-nameFirst,
.author-nameLast {
@extend .col-md-4;
}
/* The paragraph inside the author's bio should be full width */
.author-bio p {
@extend .col-md-12;
}
Through the magic of @extend
, our selectors are slotted in to the compiled stylesheets alongside the Bootstrap selectors they extend. As you’ll see by examining the compiled code, our selectors have all the exact same properties as the classes they’re extending.
For example, among other things, you should see this in the compiled CSS:
/* one of the compiled rule sets */
.col-md-4, .author-nameLabel,
.author-nameFirst,
.author-nameLast {
width: 33.3333333333%;
}
You can view the Sass side by side with the compiled CSS here. Neat huh?
Reusability
Another great thing about this method is that it creates readable and reusable components. For example, you don’t have to rebuild the author component out of rows and columns each time you need to use it. Instead, you have sensible names for each part of the component, making it easy to construct. You can also rely on Bootstrap to make sure it’s presented uniformly across your site.
Portability
While Boostrap is one of the best frameworks available, the time may come when you want to move your site to a different framework or even write your own. With the above outlined method you can do so easily because your markup is cleanly decoupled from your CSS.
Fill Your Toolbelt
If you haven’t yet tried the Sass version of Bootstrap, you’re in for a treat. It’s easy to get started on their github page.
Sass isn’t the only thing at play here. If you truly want next-level semantics in your HTML and CSS, I recommend adopting a naming convention such as BEM or SMACSS to keep your selectors standardized and easy to remember.
Go Forth And Extend
Bootstrap gives us an incredibly powerful set of styles – but it’s all too easy to cobble them together into something presentable at the loss of quality markup. With Sass’s @extend directive, you’re free to write markup that speaks clearly both to its contents and to the developers reading it.
Frequently Asked Questions on Extending Bootstrap with Sass
What is the purpose of extending Bootstrap with Sass?
Extending Bootstrap with Sass allows developers to customize the Bootstrap framework according to their specific needs. By using Sass, a CSS preprocessor, developers can modify Bootstrap’s default variables, create new ones, and even control the amount of CSS output. This makes the development process more efficient and the final product more unique and tailored to specific requirements.
How can I start customizing Bootstrap with Sass?
To start customizing Bootstrap with Sass, you first need to install Node.js and npm. Then, you can download the Bootstrap source files, which include the Sass source files. After that, you can start modifying the Sass variables in the “_variables.scss” file or create your own Sass files to override the default styles.
Can I use Sass to customize Bootstrap’s components?
Yes, you can use Sass to customize Bootstrap’s components. Each component in Bootstrap has a corresponding Sass file. You can modify these files to change the appearance of the components. For example, you can change the color, size, padding, margin, and other properties of the components.
How can I compile my Sass files after modifying them?
After modifying your Sass files, you can compile them into CSS using a Sass compiler. There are many Sass compilers available, such as Dart Sass, Node Sass, and Ruby Sass. You can also use task runners like Grunt or Gulp to automate the compilation process.
What are mixins in Sass and how can they be used with Bootstrap?
Mixins in Sass are a way of reusing a block of code. They can take arguments, which allows you to produce a wide variety of styles with a single mixin. Bootstrap provides a number of mixins that you can use to generate its various components and utilities. You can also create your own mixins to further customize Bootstrap.
Can I use Sass to customize Bootstrap’s grid system?
Yes, you can use Sass to customize Bootstrap’s grid system. You can modify the number of columns, the gutter width, and the breakpoints to suit your needs. This allows you to create a responsive layout that fits your specific design requirements.
How can I use Sass to create a theme for Bootstrap?
To create a theme for Bootstrap using Sass, you can start by defining your color scheme, typography, and other design elements as Sass variables. Then, you can use these variables throughout your Sass files to style the Bootstrap components. This ensures a consistent look and feel across your website or application.
Can I use Sass functions with Bootstrap?
Yes, you can use Sass functions with Bootstrap. Sass functions allow you to perform calculations and manipulate colors, among other things. Bootstrap uses Sass functions to calculate sizes, colors, and other values. You can also create your own Sass functions to further customize Bootstrap.
How can I optimize my CSS output when using Sass with Bootstrap?
When using Sass with Bootstrap, you can optimize your CSS output by only including the Bootstrap components that you need. In the “_bootstrap.scss” file, you can comment out the components that you don’t need. This will reduce the size of your CSS file, making your website or application load faster.
Can I use Sass to customize Bootstrap’s utilities?
Yes, you can use Sass to customize Bootstrap’s utilities. You can modify the existing utilities or create your own. This allows you to create utility classes that are tailored to your specific needs, making your CSS more efficient and your development process faster.
Brad is a front-end developer and designer living in Melbourne and working with the team at SitePoint. He tries to keep on top of the ever changing front-end universe by eating JavaScript/CSS for breakfast.