Working With Numbers In Sass

You work with numbers all the time in CSS. 16px. 50%. 0.875em. Unfortunately CSS doesn’t give you a lot of options for manipulating them. There is the calc() function that offers some basic math, but it is limited in what it can do. Sass, on the other hand, offers more ways to work with the number data type.

Continue reading

An Introduction To Sass Data Types, Operators, and Functions

I’m the last person to call myself a programmer, but I have learned the basics of a handful of programming languages over the years. One topic important to all of them is the different data types you can work with and how the language allows you to manipulate them.

Continue reading

SVG Masking Examples — Text And Image Masks

Last week I showed you some masking examples where the mask was more than a rectangle, including a couple where the mask fill was a gradient or pattern. Perhaps even more interesting, you can add a mask on top of an image or use an image or text as the mask.

Continue reading

SVG Masking Examples — Paths, Gradients, And Patterns

You can use any shape, path, or text to create an SVG mask. You can combine any or all of them as the masking content. You can also create some interesting masks using gradient or pattern fills.

Continue reading

More About SVG Masking — Properties And Attributes

For the last several weeks I’ve been talking about clipping and masking in SVG. Last week I covered the very basics of SVG masking and mentioned I would continue today and talk about some of the additional properties and attributes you can use for greater control of your masks.

Continue reading