HTML & CSS - Sass
SCSS (Sassy CSS) which is the most commonly used syntax for CSS was derived from SASS (Syntactically Awesome Style Sheets). SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SCSS is like CSS with better formatting.
Tutorials
Learn Sass In 20 Minutes | Sass Crash Course - Dev Ed
In this mini crash course we are going to learn everything about Sass. What Sass allows us to do is write alot of cool things that we
would normally wouldn't be able to do in normal CSS.
With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create
small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and
much more!
We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with
autoprefixer.
If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!
Things covered in this video:
- - How to add sass compiler to our project
- - How to link our sass to html
- - Sass variables
- - Mixins
- - Nesting
- - Extending
- - Operators
- - Partials and Imports
Learn Sass in this Free Crash Course - Give your CSS Superpowers! - DesignCourse
Sass enables you to write CSS with features that don't yet exist within CSS itself. In this free crash course, I'm going to show you
how to get up and running with Sass while creating a simple responsive landing page from scratch.
We're going to cover:
- 1. Integrating Sass within Visual Studio Code
- 2. Sass Variables
- 3. Sass Maps
- 4. Nesting
- 5. Mixins
- 6. Functions
- 7. Sass & Media Queries
Sass Crash Course - Traversy Media
In this video we will talk about what Sass is and look at its features as well as create a landing page header to display things like
variables, nesting, mixins, etc
Learn Sass in 30 Minutes - codeSTACKr
In this web development tutorial we are going to learn the basics of Sass. Sass gives your CSS Superpowers!
With Sass we can create variables. We can use imports and partials to separate our CSS code into smaller chunks. We can use mixins
that allow us to reuse CSS code. Nesting allows us to write children elements directly inside the parent element and much more!
We are going to setup a Sass extension in Visual Studio Code (VS Code). This extension will automatically compile our Sass into CSS on
save making the process seamless.
If you are interested in learning more about CSS and Sass then you are in the right place!
Projects
Social Network Theme With Sass - Part 1 - Traversy Media
In this part we will setup Sass, create the landing page with navigation, image overlay, Sass variables, mixins and functions
Social Network Theme With Sass - Part 2 - Traversy Media
In this part we will create the login and register pages with more utility classes as well as generate some margin and padding classes
using Sass logic
Social Network Theme With Sass - Part 3 - Traversy Media
In this part we will work on the profile list and single profile page and work with CSS grid template areas, flex and more
Social Network Theme With Sass - Part 4 - Traversy Media
In this part we will add the rest of the pages, finish up the utility classes and make the site responsive with media queries
Copyright © 2020 sowebsited.com