Sass Variable in CSS calc() function

I'm trying to use the&nbsp;<code>calc()</code>&nbsp;function in a Sass stylesheet, but I'm having some issues. Here's my code:

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code:

$body_padding: 50px

padding-top: $body_padding
height: calc(100% - $body_padding)

If I use the literal 50px instead of my body_padding variable, I get exactly what I want. However, when I switch to the variable, this is the output:

body {
padding-top: 50px;
height: calc(100% - $body_padding); }

How can I get Sass to recognize that it needs to replace the variable within the calc function?

Sass Crash Course- Learn Sass In 20 Minutes

Sass Crash Course- Learn Sass In 20 Minutes

Sass Crash Course- Learn Sass In 20 Minutes: In this mini crash course we are going to learn everything about Sass. What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.

With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!

We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.

If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!

📕 Things covered in this video:

  • How to add sass compiler to our project

  • How to link our sass to html

  • Sass variables

  • Mixins

  • Nesting

  • Extending

  • Operators

  • Partials and Imports

📔 Materials used in this video:


Learn SASS and SCSS | Sass & SCSS Tutorial for Beginners

Learn SASS and SCSS | Sass & SCSS Tutorial for Beginners

Learn the program that has helped a million learners worldwide! SASS (Syntactically Awesome Style Sheets) and SCSS (Sassy CSS) that have helped so many people can now be yours at just $9! Dave Moran will explain the elements of these two languages and help you add power to your systems with them.

As a developer, you know the importance of CSS and you also know how CSS can become cumbersome, disorganized and repetitive. Maybe your CSS performs poorly, or, maybe your just spending too much time digging through CSS code to solve minor display issues.

Stop wasting time tearing your hair out over confusing or poor performing CSS.

With Learn SASS and SCSS with Dave Moran, you'll be introduced to to the technologies of SASS (Syntactically Awesome Style Sheets) and SCSS (Sassy CSS). If you're not familiar with these important advances in the CSS world, SASS is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed, and turned into regular CSS style sheets. SCSS is a super set of CSS, expanded to accommodate the features of SASS. SASS can be used with any version of CSS and all CSS libraries are compatible.

In this course you'll do more than watch demonstrations from an expert instructor. Dave will invite you to code along as you go from SASS newbie to expert. You'll complete this course ready to integrate SASS workflow and SCSS syntax in to your own development projects. To insure that you retain the information presented, Dave has prepared several code exercises to help you get the hang of things.

With over 1,000,000 enrollments world wide LearnToProgram brings you instructors who are teachers first, our instructors are able to take complex technical information and make it understandable for just about anyone. Dave Moran is no exception and you will find his teaching style to be both comfortable and immediately understandable as you learn SASS and SCSS.

Welcome to Learn SASS and SCSS with Dave Moran. See you in class!

Who is the target audience?

Web Developers and Designers
Front End Developers
Software Engineers
Basic knowledge
You should have fundamental knowledge of HTML and CSS
You should be able to use your PC or Mac operating system
What will you learn
Set up a SAAS project
Understand and apply SAAS nesting
Use and apply the concept of Segmentation
Integrate SAAS Variables in to your Work
Understand SCSS Mixins and SCSS Functions
Create your Own Mixins
Know and apply Best Practices
To continue:

Stepping away from Sass

My latest site redesign and why I left out Sass and media queries in favour of native CSS grid, calc, viewport units and custom properties.}