Join Ray Villalobos for an in-depth discussion in this video Working with math operations, part of Sass Essential Training.
- SASS, like many other programming languages,…has operations like addition, multiplication,…division, and others, that can help you…create more complex CSS styles.…So let's take a look at how we can use…the power of operations to create an image grid…that's easy to work with.…I'm going to start off by going down to right here,…the section above the buttons…in my code as well as in my preview.…And I'm going to add an image grid…right before this div right here.…I'll start off by creating a div with a class of grid,…and inside that div I'm going to create…several divs with a class of item…and they'll also have an img tag inside them.…
For my source document I'm going to go ahead…and make this bigger here.…And I'm going to type in a placeholder image here.…I'll use the placehold.it site…and set it to be 500 by 500 pixel images.…We'll just do a thumbnail right here…as the alt tag.…I'm going to copy this quite a few times.…Then I'm going to save this.…And let's go ahead and make this smaller…so we can see how it looks.…
- Working with variables
- Nesting styles
- Creating mixins
- Conditional statements and loops in SassScript
- Extending your mixins
- Working with lists and maps
Skill Level Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
1. Getting Started
Understanding Sass7m 33s
2. Learning Sass Fundamentals
3. Working with SassScript
Next steps1m 21s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.