
Recreate the outline buttons from Bootstrap using Sass to compile your CSS. You should use the exact HTML from the page and you are welcome to inspect and copy all the properties and values to recreate the buttons. But you need to setup a new project 04-button-set
and install sass and write a Sass code in a main.scss
file that compiles to your style.css
file. If you’re adventurous, you can try writing an @each
loop in Sass to create all your .btn-outline-colorname
classes in just a few lines of code. The key is to find a way to write dynamic variables using maps. And if you get really clever, you can using a YIQ function in Sass (based on the color-yiq
function in bootstrap) to check the contrast value between the background color and the text color. This automates the process of choosing black or white text in the hover state of the buttons.
Your files to upload to the server and link to your blog post should include:
04-button-set/index.html
04-button-set/package.json
04-button-set/sass/main.scss
04-button-set/css/style.css
Leave a comment