Let's Recreate Bootstrap using Sass, Part 1 - #43
Like what you see, support the channel.
2 minutes
1:00:04 minutes
So, I always work with Bootstrap, but some people like to make their own. I think that for some projects, Bootstrap can be bloated. In this tutorial, we will begin to learn how to use Sass to help us build our own Bootstrap.
Sass gives us the ability to create a lot of cool things very quickly. It saves time by giving you ways to create functions that can repeat and create thousands of lines of code with a few short functions, variables, and mixins.
We can also use Sass to create nested classes to save even more time.
For this tutorial, we will use VS Code and it's Live Sass Compiler. With these tools, you can write better code, quicker.
So, let's get started with creating Bootstrap using Sass.
00:00 Intro
01:04 What is Sass?
02:10 Live Sass Compiler
03:07 Structuring Our Sass Folder
07:54 Creating Our Sass Variables
13:31 Creating Common Items
17:29 Creating Our CSS Grid Classes
41:54 Adding Button Classes
52:00 Adding Text Classes
Download the files used in this tutorial: https://github.com/thedevdrawer/css-framework-bootstrap
Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer
Applications Used
Visual Studio Code v1.43: https://code.visualstudio.com/
Sass: https://sass-lang.com/
Live Sass Compiler: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
Computer Hardware:
Windows 10 Pro: https://amzn.to/3q5TyZw (Amazon)
Samsung 500GB External SSD: https://amzn.to/2ViAAAF (Amazon)
Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: https://amzn.to/36jDwDy (Amazon)
Rosewill Hive-750S R750W PSU: https://amzn.to/36jiDbs (Amazon)
Phanteks Eclipse Tempered Glass Case: https://amzn.to/39qou0B (Amazon)
MSI Arsenal Gaming AMD Ryzen Motherboard: https://amzn.to/36hpAKm (Amazon)
MSI Gaming GeForce RTX 2060 Super 8GB: https://amzn.to/36hMyRm (Amazon)
LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: https://amzn.to/2HSRxyI (Amazon)
Corsair 64GB (4 x 16GB) DDR4 Memory: https://amzn.to/3mlmQkI (Amazon)
AMD Ryzen 7 2700X Processor: https://amzn.to/3qdQIBF (Amazon)
Dell XPS 15 9500 15.6" Laptop / Windows: https://amzn.to/3fKEz2w (Amazon)
Lenovo ThinkPad T15 15.6" Laptop / Linux: https://amzn.to/2Jnmn33 (Amazon)
Camera:
Fujifilm X-T3: https://amzn.to/3llKBb5 (Amazon)
Fujinon XF18-55mmF2.8-4: https://amzn.to/3mfTkNb (Amazon)
Audio:
Audio Technica AT2020: https://amzn.to/2VgxU6K (Amazon)
Blue Snowball iCE: https://amzn.to/3lo1jGC (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
