Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Advanced Sass Concepts Creating Loops with @for and @each

Posted by Rasmus Rønholt
Rasmus Rønholt
Courses Plus Student 17,358 Points

Variable types

So in the previous code challenge I got a few "bummers" because I declared my variable like a string with quotations...

$time: "morning"; //wrong
$time: morning;   //right

This really felt weird for me as a developer. What data type is the variable now?? And how does @if know how to evaluate the comparisons??

I felt the same kind of weirdness when, at an earlier challenge, we were sending 5px to a function that doubled that value and returned 10px just by using *2 but I guess that's more of an "understanding css units" thing.

Can someone please shed some light on how sass interprets variables and values in terms of type and comparisons? If you have a good source of documentation, that will do just fine :) I haven't been able to find it my self, but maybe I havn't searched long enough...

Rasmus Rønholt
Rasmus Rønholt
Courses Plus Student 17,358 Points

After messing around with it I found that apparently you can mix and match... as long as you're not using strings that can be interpreted as something else.

$s: "s";
@if $s == s //evaluates true

$i: "0";
@if $i == 0 //evaluates false

So, are all values treated as strings unless they conform to css standard value types?

1 Answer

Tobias Bjerrome Ahlin
Tobias Bjerrome Ahlin
9,742 Points

From the official documentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#data_types :

CSS specifies two kinds of strings: those with quotes, such as "Lucida Grande" or 'http://sass-lang.com', and those without quotes, such as sans-serif or bold. SassScript recognizes both kinds, and in general if one kind of string is used in the Sass document, that kind of string will be used in the resulting CSS.

I.e. in your example, both of the definitions are actually interpreted as strings.

$time: "morning"; //string
$time: morning;   //string

But you would use them in different ways. You would use the non-quoted string where you normally wouldn't use quotes in CSS:

$weight: bold;
font-weight: $weight;

and quoted strings where you'd use quotes in CSS:

$fontFamily: "Helvetica Neue";
font: 10px/20px $fontFamily;

In terms of comparing and using operators with variables, the types are simply preserved:

SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %). Sass math functions preserve units during arithmetic operations. This means that, just like in real life, you cannot work on numbers with incompatible units (such as adding a number with px and em) and two numbers with the same unit that are multiplied together will produce square units (10px * 10px == 100px * px).