Welcome Guest! (App Version 3.1)

websitnero logo name

Sass Operations

Mathematical Calculations in Sass

By default we cannot use any mathematics and operation in CSS like other programming languages, but by using Sass this is invariably possible. You can use common operators like - +, -, *, /, etc. Though quite often these might not be useful but sometimes these added tools might turn useful.

Look at the example below:

main.scss:

p{background:yellow;margin:10px;border:1px solid black;}
.para1 {width: 100% - 20%;}
.para2 {font-size:15px * 1.5;}
.para3 {height: 100px / 2;}

main.css (compiled):

p{background:yellow;margin:10px;border:1px solid black;}
.para1{width: 80%;}
.para2{font-size: 22.5px;}
.para3{height: 50px;}

index.html:

This is a paragraph.

This is a paragraph.

This is a paragraph.

Operations don't work with units of different types

Unlike CSS Sass is quite strict in calcuation rules. The units on which the operations are being performed have to be of same type. Otherwise, the operations will not perform.

For example, the following code will throw error on being compiled to CSS:

main.scss:

.para1 {width: 100% - 200px;}
.para2 {font-size:30px - 2em;}
.para3 {height: 100px + 2vh;}
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.