Lessons: 16Length: 2.6 hours
Stylus is one of the three leading CSS preprocessors that make CSS easier and more powerful than ever before, sharing the league with Sass and LESS. In Become a Stylus CSS Superhero you’ll learn to write code faster than a speeding bullet, create layout functionality more powerful than a locomotive, and update whole color schemes in a single bound. Let’s start your training!
Learn CSS: The Complete Guide
We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.
1.Introduction
1.1CSS Needs a Hero01:17
1.1
CSS Needs a Hero
01:17
2.Stylus Superhero Basic Training
2.1Quick and Easy Setup09:19
2.1
Quick and Easy Setup
09:19
2.2Terse or Full Syntax, Your Choice05:50
2.2
Terse or Full Syntax, Your Choice
05:50
2.3Faster Child and Pseudo Element Targeting via Nesting06:50
2.3
Faster Child and Pseudo Element Targeting via Nesting
06:50
3.A Practical Intro to Stylus Variables
3.1Create an "Easy Update Color Scheme"08:02
3.1
Create an "Easy Update Color Scheme"
08:02
3.2Create a "px to rem" Converter Variable14:35
3.2
Create a "px to rem" Converter Variable
14:35
4.Practical Intro to Mixins
4.1Create a "Zebra Stripe" Mixin12:45
4.1
Create a "Zebra Stripe" Mixin
12:45
4.2Use CSS3 Easily with Prebuilt "Nib" Mixins09:07
4.2
Use CSS3 Easily with Prebuilt "Nib" Mixins
09:07
5.Practical Intro to Logic and Functions
5.1Adjust Base Font Size, Perhaps: Using Conditionals and Operators09:38
5.1
Adjust Base Font Size, Perhaps: Using Conditionals and Operators
09:38
5.2What Functions Can Do That Mixins Can't06:16
5.2
What Functions Can Do That Mixins Can't
06:16
5.3Create a "px to rem or em" Converter Function13:55
5.3
Create a "px to rem or em" Converter Function
13:55
5.4Level Up Your Color Schemes With Stylus's Built-In Functions15:13
5.4
Level Up Your Color Schemes With Stylus's Built-In Functions
15:13
6.Stylus Superpowers
6.1Variables on the Fly: Property Lookup09:32
6.1
Variables on the Fly: Property Lookup
09:32
6.2Create a "Golden" Layout14:54
6.2
Create a "Golden" Layout
14:54
6.3Generate H-Tag Styles With a Single Line: Hashes, Iteration and Interpolation16:49
6.3
Generate H-Tag Styles With a Single Line: Hashes, Iteration and Interpolation
16:49
7.Conclusion
7.1Wrapping Up02:34
7.1
Wrapping Up
02:34
