You can do a lot more with Sass variables: iterate them via a for-loop and generate property values dynamically.
You can embed them into CSS property names themselves.
It’s useful for property-name-N { … } definitions.
3.
Better Operators.
You can add, subtract, multiple and divide CSS values.
Sure the original CSS implements this via calc() but In Sass you don’t have to use calc() and implementation is slightly more intuitive.
4.
Functions — Sass lets you create CSS definitions as reusable functions.
Speaking of which…5.
Trigonometry — Among many of its basic features (+, -, *, /) SCSS allows you to write your own functions.
You can write your own sine and cosine (trigonometry) functions entirely using just the Sass/SCSS syntax just like you would in other languages such as JavaScript.
Some trigonometry knowledge will be required.
But basically, think of sine and cosine as mathematical values that help us calculate the motion of circular progress bars or create animated wave effects for example.
6.
for-loops, while-loops, if-else statements.
You can write CSS using familiar code-flow and control statements similar to another languages.
But don’t be fooled, Sass still results in standard CSS in the end.
It only controls how property and values were generated.
It’s not a real-time language.
Only a pre-processor.
7.
Mixins.
Create a set of CSS properties once and reuse them or “mix” together with any new definitions.
In practice, you can use mixins to create separate themes for the same layout, for example.
Sass Pre-ProcessorSass is not dynamic.
You won’t be able to generate or animate CSS properties and values in real-time.
But you can generate them in a more efficient way and let standard properties (CSS animation for example) pick up from there.
New SyntaxSCSS doesn’t really add any new features to CSS language.
Just new syntax that can in many cases shorten the amount of time spent writing CSS code.
PrerequisitesCSS pre-processors add new features to the syntax of CSS language.
There are 5 CSS pre-processors: Sass, SCSS, Less, Stylus and PostCSS.
This tutorial covers mostly SCSS which is similar to Sass.
But you can learn more about Sass at www.
sass-lang.
com website.
SASS — (.
sass) Syntactically Awesome Style Sheets.
SCSS — (.
scss) Sassy Cascading Style Sheets.
Extensions .
sass and .
scss are similar but not the same.
For command line enthusiasts out there, you can convert from .
sass to .
scss and back:Figure 1 — Convert files between .
scss and .
sass formats using Sass pre-processor command sass-convert.
Sass was the first specification for Sassy CSS with file extension .
sass}.
The development started in 2006.
But later an alternative syntax was developed with extension .
scss which some developers believe to be a better one.
There is currently no out-of-the-box support for Sassy CSS in any browser, regardless of which Sass syntax or extension you would use.
But you can openly experiment with any of the 5 pre-processors on codepen.
io.
Aside from that you have to install a favorite CSS pre-processor on your web server.
This chapter was created to help you become familiar with SCSS.
Other pre-processors share similar features, but the syntax may be different.
SupersetSassy CSS in any of its manifestations is a superset of the CSS language.
This means, everything that works in CSS will still work in Sass or SCSS.
VariablesSass / SCSS allows you to work with variables.
They are different from CSS variables that start with double dash — var-color you’ve probably seen before.
Instead they start with a dollar sign $:Figure 2 — Basic $variable definitions.
You can try to overwrite a variable name.
If !default is appended to variable re-definition, and the variable already exists, it is not re-assigned again.
In other words, this means that the final value of variable $text from this example will still be “Piece of string.
”The second assignment “Another string.
” is ignored, because default value already exists.
Figure 3 — Sass $variables can be assigned to any CSS property.
Nested RulesWith Standard CSS nested elements are accessed via space character:Figure 4 — Nesting with standard CSS.
The above code can be expressed with Sassy’s Nested Rules as follows:Sassy scope nesting looks less repetitious.
Figure 5 — Nested Rules.
As you can see this syntax appears cleaner and less repetitious.
This is in particular helpful for managing complex layouts.
This way the align in which nested CSS properties are written in code closely matches the actual structure of the application layout.
Behind the veil the pre-processor still compiles this to the standard CSS (shown above) code so it can actually be rendered in the browser.
We simply change the way CSS is written.
The & characterSassy CSS adds the & (and) character directive.
Let’s take a look at how it works!Figure 6 — On line 5 the & character was used to specify &:hover and converted to the name of the parent element a after compilation.
So what was the result of above SCSS code when it was converted to CSS?Figure 7 — The & character is simply converted to the name of the parent element and becomes a:hover in this case.
MixinsA mixin is defined by @mixin directive (or also known as mixin rule)Let’s create our first @mixin that defines default Flex behavior:Figure 8 — Now every time you apply .
centered-elements class to an HTML element it will turn into Flexbox.
One of the key benefits of mixins is that you can use them together with other CSS properties.
Here I also added border:1px solid gray; to .
centered-elements in addition to the mixin.
You can even pass arguments to a @mixin as if it were a function and then assign them to CSS properties.
We’ll take a look at that in the next section.
Multiple Browsers ExampleSome experimental features (such as -webkit-based) or Firefox (-moz-based) only work in browsers in which they appear.
Mixins are helpful in defining browser-agnostic CSS properties in one class.
For example if you need to rotate an element in Webkit-based browsers, as well as the other ones, you can create this mixin that takes $degree argument:Figure 9 — Browser-agnostic @mixin for specifying angle of rotation.
Now all we have to do is @include this mixin in our CSS class definition:Figure 10 — Rotate in compliance with all browsers.
Arithmetic OperatorsSimilar to standard CSS syntax, you can add, subtract, multiply and divide values, without having to use the calc() function from the classic CSS syntax.
But there are a few non-obvious cases that might produce errors.
AdditionFigure 11 — Adding values without using calc() function.
Just make sure that both values are provided in a matching format.
SubtractionSubtraction operator — works in the same exact way as addition.
Subtracting different type of values.
MultiplicationThe star is used for multiplication.
Just like with calc(a * b) in standard CSS.
Figure 12 — Multiplication and DivisionDivisionDivision is a bit tricky.
Because in standard CSS the division symbol is reserved for using together with some other short-hand properties.
For example, font: 24/32px defines a font with size of 25px and line-height of 32px.
But SCSS claims to be compatible with standard CSS.
In standard CSS division symbol appears in short-hand font} property.
But it isn’t used to actually divide values.
So, how does Sass handle division?Figure 13 — If you want to divide two values, simply add parenthesis around the division operation.
Otherwise, division will work only in combination with some of the other operators or functions.
RemainderThe remainder calculates the remainder of the division operation.
In this example, let’s see how it can be used to create a zebra stripe pattern for an arbitrary set of HTML elements.
Creating Zebra stripes.
Figure 14 — Let’s start with creating a zebra mixin.
Note: the @for and @if rules are discussed in a following section.
This demo requires at least a few HTML elements:Figure 15 — HTML source code for this mixin experiment.
And here is the browser outcome:Figure 16 — Zebra stripe generated by the zebra @mixin.
Comparison OperatorsFigure 17 — Comparison Operators.
How can comparison operators be used in practice?.We can try to write a @mixin that will choose padding sizing if its greater than margin:Figure 18 — Comparison operators in action.
After compiling we will arrive at this CSS:Figure 19 — Result of the conditional spacing @mixinLogical OperatorsFigure 20– Logical Operators.
Figure 21 — Using Sass Logical Operators, to create a button color class that changes its background color based on its width.
StringsIn some cases it is possible to add strings to valid non-quoted CSS values, as long as the added string is trailing:Figure 22 — Combining regular CSS property values with Sass/SCSS strings.
The following example, on the other hand will produce compilation error:Figure 23 — This example will not work.
You can add strings together without double quotes, as long as the string doesn’t contain spaces.
For example, the following example will not compile:Figure 24 — this example will not work, either.
Solution?Figure 25 — Strings containing spaces must be wrapped in quotes.
Figure 26 — Adding multiple strings.
Figure 27 — Adding numbers and strings.
Note content property works only with pseudo selectors :before and :after.
It is recommended to avoid using content property in your CSS definitions and instead always specify content between HTML tags.
Here, it is explained only in context of working with strings in Sass/SCSS.
Control-Flow StatementsSCSS has functions() and @directives (also known as rules).
We’ve already created a type of a function when we looked at mixins you could pass arguments to.
A function usually has a parenthesis appended to the end of the function’s name.
A directive / rule starts with an @ character.
Just like in JavaScript or other languages SCSS lets you work with the standard set of control-flow statements.
if()if() is a function.
The usage is rather primitive.
The statement will return one of the two specified values, based on a condition:@if@if is a directive used to branch out based on a condition.
This Sassy if-statement compiles to:Figure 27 — Example of using a single if-statement and an if-else combo.
Checking If Parent ExistsThe AND symbol & will select the parent element, if it exists.
Or return null otherwise.
Therefore, it can be used in combination with an @if directive.
In the following examples, let’s take a look at how we can create conditional CSS styles based on whether the parent element exists or not.
If parent doesn’t exist & evaluates to null and an alternative style will be used.
@forThe @for rule is used for repeating CSS definitions multiple times in a row.
Figure 28 — for-loop iterating over 5 items.
This loop will compile into the following CSS:Figure 29 — Outcome of the for loop.
@eachThe @each rule can be used for iterating over a list of values.
Iterating over a set of values.
This code will be compiled to the following CSS:Figure 30 — Compiled animal icons.
@whileFigure 31 — While loop.
Figure 32 — Listing of 5 HTML elements produced by while loop.
Sass FunctionsUsing Sass / SCSS you can define functions just like in any other language.
Let’s create a function three-hundred-px that returns value of 300px.
Figure 33 — Example of a function that returns a value.
When the class .
name is applied to an element a width of 300px will be applied to it:Of course Sass functions can return any valid CSS value and be assigned to any CSS property you can think of.
They can even be calculated, based on a passed argument:Sass TrigonometryTrigonometry functions sin and cos are often found as part of built-in classes in many languages, such as JavaScript, for example.
I think learning how they work is worth it, if you’re looking to reduce the time taken to design UI animations (Let’s say a spinning progress bar, for example.
)Here I will demonstrate a couple of examples that reduce code to a minimum for creating interesting animation effects using the sin() function.
The same principles can be expanded upon to be used for creating interactive UI elements (movement around a circle, wavy designs, etc.
)Using trigonometry together with CSS is a great way to reduce bandwidth.
Instead of using .
gif animations (each might take an extra HTTP request to load since .
gif animations cannot be placed into a single sprite-map image.
)You can write your own trigonometry functions in Sass.
Writing your own functions in SassThis section was included to demonstrate how to write your own functions in Sass/SCSS.
In trigonometry many operations are based on these functions.
They all build on top of each other.
For example, the rad() function requires PI().
The cos() and sin() functions require rad() function.
Writing functions in Sass/SCSS feels a lot like writing them in JavaScript or similar programming languages.
Figure 34 — pow() function.
Figure 35 — rad() function.
Figure 36 — sin() function.
Finally, to calculate tangent using the tan() function the functions sin() and cos() are required components.
If writing your own math and trigonometry functions isn’t exciting you can simply include compass library (see next example) and start using sin(), cos() and other trig functions out of the box.
Oscillator AnimationLet’s take everything we learned from this chapter to put together a sinusoid oscillator animation.
Figure 37 — Combining everything we know about Sassy CSS and CSS we arrive at this oscillating animation.
Figure 38 — The HTML part.
This is a shortened example.
Make sure to have 15 actual HTML elements with class = “atom”Finally, the result of this operation will produce the following animation:Figure 39 — The result of previous code — an animated oscillating sin wave.
All of this has taken us roughly less than 24 lines of code!Note: If you are using the Vue framework, you can render all 15 elements using this simple for-loop via the v-for directive — instead of typing out all 15 HTML elements by hand — further reducing the hassle.
Figure 40 — setup for listing 15 HTML elements with just few lines of code using the Vue framework.
Figure 40 — JavaScript Vue object that creates an Array object and fill it with 15 items containing value “0”.
I included it here just to show how combining multiple frameworks and libraries, your code becomes easier to write and maintain in the future.
Though, that is not to say you should use them in every single project.
Sometimes it’s easier to write out the code in simple vanilla form.
Working professionally, though, chances are you will encounter a build using multiple libraries.
Hope this tutorial helped shed some light on Sass.
.. More details