Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Sass Numeric Operators | Preprocessors
Advanced CSS Techniques

Sass Numeric OperatorsSass Numeric Operators

We can perform mathematical calculations on numbers. Sass supports all basic arithmetics like addition (+), subtraction (-), multiplication (*), and division (/).

For addition and subtraction, it is important to have values with the same units (e.g., %, px).

For multiplication and division, it is crucial to have one unitless value. Sass can't calculate the division of pixels or percentages.

Mathematical operations with variables

We can easily involve variables in the calculations if the variable has a valid value.

Let's imagine that we need to add a double margin to the item:

Select the correct statement.

Виберіть правильну відповідь

Все було зрозуміло?

Секція 7. Розділ 4
course content

Зміст курсу

Advanced CSS Techniques

1. Introduction

Course OverviewCourse FocusCourse TopicsHow to Succeed

2. Item Positioning

What is Positioning?Relative PositioningChallenge: Relative PositioningAbsolute PositioningChallenge: Absolute PositioningFixed PositioningChallenge: Fixed PositioningSticky PositioningChallenge: Sticky PositioningStacking OrderChallenge: Stacking OrderContent Overflow

3. Transitions

What is Transition?Selecting Transition PropertyTransition DurationTransition Time FunctionTransition Time DelayTransition CombinationChallenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the AnimationControlling Animation Play Quantity and DirectionManaging Animation StateAnimation CompositionChallenge: Adding Animation

5. Transformations

What is Transformation?ScalingRotatingChallenge: Adding Scaling & RotatingTranslateSkewingPerspectiveChallenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media QueryAdaptive - Responsive layoutsInspecting the Web PageChallenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass SyntaxSass VariablesSass Numeric OperatorsSass Nesting@extend DirectiveFolder-File Structure

Advanced CSS Techniques

Sass Numeric OperatorsSass Numeric Operators

We can perform mathematical calculations on numbers. Sass supports all basic arithmetics like addition (+), subtraction (-), multiplication (*), and division (/).

For addition and subtraction, it is important to have values with the same units (e.g., %, px).

For multiplication and division, it is crucial to have one unitless value. Sass can't calculate the division of pixels or percentages.

Mathematical operations with variables

We can easily involve variables in the calculations if the variable has a valid value.

Let's imagine that we need to add a double margin to the item:

Select the correct statement.

Виберіть правильну відповідь

Все було зрозуміло?

Секція 7. Розділ 4
some-alt