Lecture Description
This is the 10th tutorial in a series that show users how to code CSS using advanced features in Sass.
This tutorial covers the use of functions built into Sass. I cover rgba() and fade-out() as well as percentage() and round(). For a complete reference of Sass functions, check out:
sass-lang.com/docs/yardoc/Sass/Script/Functions.html
The code:
width:round(percentage(890px / 1440px))
rgba(#333,0.7)
Course Index
- How to Install Sass
- The Basics of Variables in Sass
- Nesting Your Sass
- Using Mixins
- Selector Inheritance
- Creating Configurable Shapes Using Mixins
- @Import & Parent Reference
- Using Lists and @each
- Nth Function In Lists
- Built in Functions
- Build Your Own Function
- Build Your Own Function Part 2 - If Else
- Build Your Own Function Part 3 - Total Automation with Lists
- Output Style
- For Loops
- While Loops
- Using Live Reload
- Updating to Sass 3.2.1. Media Mark
- Placeholder Selectors
- @Content - Better Media Queries in Sass
- Extending Sass and Writing a Config file
- Installing and Using Sass Globbing
- Installing Singularity Grid System
- Creating and Using a Symmetrical Grid
- Asymmetric Grids
- Responsive Grids With Breakpoint
- Adding Columns at Breakpoints
- Selector Functions & Sass 3.4
- Juice, Mixins for Life
- Juice, Mixins for Life Part 2
Course Description
A series of Sass tutorials showing the installing of, the basics, and using key features. The advanced series shows you more in depth features that Sass offers. The Compass series will cover how using Compass in your projects can save you time and extend Sass and CSS even further.
Some source files are located here: https://github.com/stolinski/Level-Up-Tuts---Sass-Tutorials