Tuesday 26 July 2016

Manipulating Sass Colors With Operators And RGB Functions - Vanseo Design

Manipulating Sass Colors With Operators And RGB Functions - Vanseo Design

Manipulating Sass Colors With Operators And RGB Functions

Posted: 26 Jul 2016 05:30 AM PDT

It's been a few years since I started working with Sass and while there are a lot of reasons why I continue to use it, the built-in color functions are easily among my favorite features of the language. You can use them to mix two colors or lighten or darken another color. You can even use them to build complex color schemes from a single color.

Colorful Clothespins

The last few weeks, I've been talking about data types in Sass. I began with an overview and the last few weeks I've dug into the number and string data types.

You might have found those posts a little dry and wondered where you might make use of all the things you could do with numbers and strings. I suspect you won't feel the same when it comes to the color data type and the the functions Sass provides for working with color.

Colors in Sass

When you set color values, you probably use hexadecimal or RGB values most of the time based on whichever you prefer using. CSS actually provides a number of ways to specify colors and you can use any valid CSS color expression in Sass.

For example here are a few ways to set something as red.

1  2  3  4  5  6  7  
color: red;    color: #f00;    color: #ff0000;    color: rgb(255, 0, 0);    color: rgba(255, 0, 0, 1);    color: hsl(0, 100, 50);    color: hsla(0, 100, 50, 1);

All of the above ways to set the color red work fine. However, written in Sass they may not all output the way you would expect. Sass prefers to output the smallest CSS representation of a color, especially when output in compressed mode.

In compressed mode all of the above will compile to color: red;. Even in expanded mode, which I've been using, the majority of the above colors will output as red. The exceptions are the two hexadecimal colors, which output as hexadecimal.

In general that's not going to be a big deal as the color will still be the same, but it's something to be aware of, since it probably goes against your expectation.

In some cases there's nothing smaller than what's been specified and Sass will output exactly what you've written:

1  
color: rgba(255, 0, 0, 0.5);

compiles to:

1  
color: rgba(255, 0, 0, 0.5);

Aside from the compressing of color values to their smallest possible value, you'll likely set colors the same way you do now as either a hexadecimal value or an RGB(a) value, with an occasional named color. Don't dismiss setting colors as HSL(a), though.

Sass Color Operations

You can use any arithmetic operation on color values. However, know that the operation will be performed on each of the color components separately. For example the red channel of one color is added to the red channel of another color, green is added to green, and blue is addd to blue.

1  2  3  
h1 {      color: #020406 + #020406;    }

compiles to:

1  2  3  
h1 {     color: #04080c;    }
  • Red: 02 + 02 = 04
  • Green: 04 + 04 = 08
  • Blue: 06 + 06 = 0c

Odds are you won't use arithmetic operations on colors and will instead use Sass color functions to manipulate them. I'll cover some functions momentarily and more next week.

You can combine colors and numbers in arithmetic operations.

1  2  3  
h1 {      color: #020406 * 2;    }

which compiles to:

1  2  3  
h1 {     color: #04080c;    }

The important thing to remember is the operation occurs over one component of color at a time.

Colors with alpha channels must have the same alpha value if you want to perform arithmetic operations on them. However, no math is done on the alpha component of the colors, only the red, green, and blue components.

1  2  3  
h1 {      color: rgba(137, 0, 255, 0.9) + rgba(0, 90, 0, 0.9);    }

compiles to:

1  2  3  
h1 {     color: rgba(137, 90 255, 0.9);    }

The above works because the alpha channels are the same. That's not the case for the next example.

1  2  3  
h1 {      color: rgba(137, 0, 255, 0.9) + rgba(0, 90, 0, 0.8);    }

With this example you would receive an error on compile because one alpha channel is 0.9 while the other is 0.8.

You can manipulate the alpha components of different colors, but you need to work with Sass color functions to do so. And since the functions are the best part about working with color in Sass, let's start talking about them.

Sass Color Functions

Sass offers four different groups of color functions.

  • RGB Functions
  • HSL Functions
  • Opacity Functions
  • Other Color Functions

I'll walk through the RGB functions today and then I'll cover the remaining functions next week.

RGB Color Functions

Sass includes six built-in functions for working with RGB color. The first two functions enable you to set colors with rgb values.

You can set a color in rgb using either rgb($red, $green, $blue) or rgba($red, $green, $blue, $alpha) if you want to include an alpha component. These work the same was as in CSS where you'd provide a value between 0 and 255 for each of the three color channels and then a value between 0.0 and 1.0 for the alpha component, if you want to include one.

1  2  3  4  
p {     color: rgb(255, 0, 0);     background: rgb(0, 255, 0, 0.5)    }

The above would leave the text in paragraphs as a bright red on a 50% opaque green background and I don't recommend using this color combination as it would cause accessibility issues even if the colors did look good together.

What's perhaps more interesting than using rgb to set a color value, is getting the red, green, or blue component of a color that hasn't been set in rgb using the red($color), green($color), and/or blue($color) functions

1  2  3  
red(#906bc0) => 144    green(#906bc0) => 107    blue(#906bc0) => 192

In other words #906bc0 and rgb(144, 107, 192) are the same color written in different color notations.

You can also get the color component from an HSL value.

1  
red(hsl(0, 100%, 50%)) => 255

Which makes sense as hsl(0, 100%, 50%) is pure red.

The last RGB function, mix($color1, $color2, [$weight]), might be the most interesting as it allows you to mix two colors and even weight how much of each to use in the mix.

The weight is optional. When not present the function takes the average of each of the rgb components from the different colors. When the weight is present, the opacity of the colors is also considered in the mixing process

1  2  3  
h1 {     color: mix(#f00, #00f);    }

compiles to:

1  2  3  
h1 {     color: purple; // #800080    }

In hexadecimal notation 8 is half of f and so the average of f and 0 is 8 and the result of mixing is #800080 or the named color purple.

When a weight is included in the function it's given as a percentage and it tells the function how much of the first color to include in the mix. Setting the weight to 25% says mix 25% of the first color with 75% of the second color.

1  2  3  
h1 {     color: mix(#f00, #00f, 25%);    }

which compiles to:

1  2  3  
h1 {     color: #4000bf;    }

Note that I set the weight as 25% and not 0.25 which would be interpreted as 0.25% and not 25% as you might expected. The default weight is 50% so if it's not included you'll get an equal amount of each color in the mix.

Closing Thoughts

You can use the same colors you use in CSS with Sass. You can set your colors in hex, rgb(a), hsl(a) notation or use named colors like red, green, and blue.

Sass let's you perform mathematical operations on colors, though be aware these operations are done on a per color channel basis and as long as all the colors involved have the same alpha value.

The built-in RGB functions allow you to set colors in rgb, get the rgb components from a color no matter how it's set, and perhaps most interesting of all, mix two colors together equally or using more of one than the other.

Next week I'll walk you through the rest of the Sass color functions, including my favorite, the HSL color functions.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Tuesday 19 July 2016

Working With Strings In Sass - Vanseo Design

Working With Strings In Sass - Vanseo Design

Working With Strings In Sass

Posted: 19 Jul 2016 05:30 AM PDT

Much of what you write in CSS is a string of some kind. Whether you're setting a font-family as "lucida grande" or declaring a class as the selector .masthead, you're working with strings. Despite how often strings are used in CSS, the language offers no way to manipulate them. Fortunately Sass does.

Ball of Twine

For the last couple of weeks I've been digging into data types in Sass. I started with an overview of data types, operators, and functions and then walked through the number data type, its operators, and the built-in functions Sass provides for working with numbers.

Today I want to talk similarly about strings, specifically the kind of strings Sass supports and the operators and functions you can use to work with strings.

Strings in Sass

CSS supports double and single quoted strings such as "Lucida Grande" or 'Lucida Grande' as well as unquoted stings such as Georgia, serif, or sans-serif. Sass naturally supports all three and generally compiles to the same type of quotes or lack of quotes in CSS.

For example say you're using a Sass variable to hold the typeface of your main headline, which is set on your h1 as follows:

1  
h1 {font-family: $headline-typeface;}

Using unquoted, single quoted, and double quoted strings in your variables:

1  2  3  
$headline-typeface: Lucida Grande;    $headline-typeface: 'Lucida Grande';    $headline-typeface: "Lucida Grande";

will compile to:

1  2  3  
h1 { font-family: Lucida Grande; }    h1 { font-family: 'Lucida Grande'; }    h1 { font-family: "Lucida Grande"; }

In other words, whichever type of quote (or no quote) you used in your Sass will appear in your resulting CSS file.

Interpolation and Strings

That's how it generally works. The exception is interpolation ( #{} ), where all strings will become unquoted.

1  2  
$headline-typeface: "Lucida Grande";  h1 { font-family: #{$headline-typeface}; }

compiles to:

1  
h1 {font-family: Lucida Grande;}

Because I used interpolation to include the variable, the quotes were removed.

String Operators

The single Sass string operator is concatenation. Strings can be concatenated (linked together) using the + operator.

1  
h1 { font-family: Geor + gia; }

compiles to:

1  
h1 { font-family: Georgia; }

If you mix quoted and unquoted strings when concatenating, the result will be whichever is on the left side of the operator.

1  2  
h1 { font-family: Geor + "gia"; }    h1 { font-family: "Geor" + gia; }

compiles to:

1  2  
h1 { font-family: Georgia; }    h1 { font-family: "Georgia"; }

When two strings are placed next to one another even when there's a space between them, they are concatenated, including the space.

1  
h1 { font-family: Luc + ida Grande; }

compiles to:

1  
h1 {font-family: Lucida Grande;}

However, be careful with your quotes.

1  
h1 {font-family: "Luc" + "ida" Grande;}

compiles to:

1  
h1 {font-family: "Lucida" Grande;}

Since the above isn't valid CSS, anything marked up as an h1 in the previous example will use the browsers default serif or sans-serif font.

If you want to use dynamic values inside the string, you can use interpolation.

1  2  3  4  
$margin-1: 10;    $margin-2: 12;    p { margin-top: #{$margin-1 + $margin-2}px; }

Here 10 and 12 will be added together as numbers to result in 22, which will then be concatenated with px and compile to:

1  
p { margin-top: 22px; }

Notice that I didn't need to use the + operator to concatenate in this example.

Nulls in String Interpolation

If you've defined a variable as null and then use the variable in string interpolation, the null value is treated as an empty string for the interpolation

1  2  3  4  5  
$value: null;    p:before {      content: "Today is a #{$value}} day.";  }

$value is replaced with an empty string and the Sass compiles to:

1  2  3  
p:before {      content: "Today is a  day.";  }

Notice the extra space in the CSS (between a and day), which comes from the null value being converted to an empty string.

String Functions

While Sass provides only the single operator for strings, it does have a few built-in functions for manipulating strings. They might not appear useful at first, but they can be very useful when writing mixins and functions.

The function unquote($string) removes the quote (single or double) from a string and the function quote($string) adds a double quote around a string.

1  2  
h1 { font-family: unquote("Lucida Grande"); }  h2 { font-family: quote('Lucida' + ' Grande'); }

compiles to:

1  2  
h1 { font-family: Lucida Grande; }    h2 { font-family: "Lucida Grande"); }

Notice in the second line of code that the single quotes around Lucida and Grande were replaced with double quotes by the quote function.

If you need to know how many characters are in a string you can use the str-length($string) function.

1  2  3  4  5  
$str: "I am a string.";    p {      font-size: str-length($str) + px;    }

This is hardly the way you'd want to set the font-size of a paragraph and I don't recommend you do, but the Sass does compile to:

1  2  3  
p {      font-size: 14px;    }

If you count the characters in $str, you'll notice the spaces as well as the period at the end are included in the count.

The position of any character in the string (or the first character in a substring within the string) is known as its index. You can find the index using the str-index($string, $substring) function.

1  2  3  4  5  
$string: "I am a another string";    str-index($string, a); => 3    str-index($string, am); => 3    str-index($string, an); => 8

One thing to note is that unlike most programming languages, the index of the first character is 1 instead of 0. Here the index of "I" is 1, the index of the space is 2, the index of "a" is 3, and so on.

In the first example above the function looks for the first occurrence of the letter "a" in the string, which occurs at index 3. The second function looks for the first occurrence of the letters "am" together, which is also index 3. Finally the third function looks for the first occurrence of the letters "an" together, which doesn't occur until index 8.

You can insert one string inside another using the str-insert($string, $insert, $index) function. $string is the initial string and $insert is the substring to insert into the string at index $index.

1  2  3  
str-insert("abcd";, "X", 1) => "Xabcd"  str-insert("abcd";, "X", 4) => "abcXd"  str-insert("abcd", "X", 5) => "abcdX"

Notice the "X" (the $insert) is placed at the specified index with the remainder of $string (if any is still left) coming after. A negative index is valid and is counted from the end of $string toward the start.

1  2  3  
str-insert("abcd", "X", -1) => "abcdX"  str-insert("abcd", "X", -4) => "aXbcd"  str-insert("abcd", "X", -5) => "Xabcd"

If the index given to the function is outside the bounds of the length of the string, the substring ($insert) will be inserted at either the front or back of the string, depending on the index specified.

You can extract a substring from a string using the str-slice($string, $start-at, [$end-at]) function. Here $string is the string and $start-at and $end-at are indices. The $end-at argument is optional and it defaults to -1 (or the last character in the string) if not included.

1  2  3  4  5  
$string: "I am still a string."    str-slice($string, 6, 10) => "still"  str-slice($string, 6) => "still a string"  str-slice($string, -7, -1) => "string"

Finally there are two functions, to-upper-case($string) and to-lower-case($string) that change the case of a string and I trust you can figure out which does which based on the function name.

1  2  3  4  5  6  7  8  9  10  
$font1: georgia;    $font2: HELVETICA;    h1 {     font-family: to-upper-case($font1);    }    h2 {     font-family: to-lower-case($font2);    }

compiles to:

1  2  3  4  5  6  7  
h1 {      font-family: GEORGIA;    }    h2 {      font-family: helvetica;    }

Closing Thoughts

As I said at the end of last week's post on the number data type, if you've worked with programming languages before, this will likely be a very quick and simple review. If you haven't, I hope you can see that like numbers, Sass makes it pretty easy to work with and manipulate strings.

You probably won't use the string operator or any string functions until you write your own custom functions or mixins, but if you do, you'll often find you need to manipulate strings that result from one calculation to prepare them for use in another, which is when concatenation of the built-in functions come in handy.

The next two weeks I want to look at the color data type and the many functions Sass provides for working with colors. You can even build an entire color scheme from a single color using the some of the functions Sass provides.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Tuesday 12 July 2016

Working With Numbers In Sass - Vanseo Design

Working With Numbers In Sass - Vanseo Design

Working With Numbers In Sass

Posted: 12 Jul 2016 05:30 AM PDT

You work with numbers all the time in CSS. 16px. 50%. 0.875em. Unfortunately CSS doesn't give you a lot of options for manipulating them. There is the calc() function that offers some basic math, but it is limited in what it can do. Sass, on the other hand, offers more ways to work with the number data type.

Numbers
Last week I started a new series about Sass. This one will look at data types, their operators, and additional functions for working with them. I presented an overview and quickly mentioned nulls and booleans. I want to start digging into the rest of the data types, starting today with numbers.

Numbers in Sass

Sass supports both integer and decimal numbers, with and without units. So 10 and 10.5 are valid Sass numbers as are 10px and 10em.

Sass supports the standard arithmetic operators that I'm sure your familiar with. You can add ( + ), subtract ( – ), multiply ( * ), and divide ( / ) numbers as well as calculate a modulus ( % ).

1  2  3  4  5  6  7  8  9  10  11  12  
$width: 100%;    h1 {     font-size: 16px * 2;     margin: 24px - 8px    }     .column {     width: $width / 3;     height: 200px + 500px;     border-width: 15 % 2;    }

The Sass above compiles to:

1  2  3  4  5  6  7  8  9  10  
h1 {      font-size: 32px;      margin: 16px;    }    .column {      width: 33.3333333333%;      height: 700px;      border-width: 1;    }

When units are present, Sass preserves the units, which means number operations will only work when the units are the same (or not present). You can add 10px to 20px in Sass, but you can't add 10px to 3em.

If two numbers with the same units are multiplied the result is square units

1  
10px * 10px = 100px squared

Unfortunately squared units aren't valid CSS so the above leads to an error. Make sure the math you're doing makes sense in CSS, since that's where your result will ultimately live.

Comparison Operators

In addition to the equals ( == ) and not equals ( != ) equality operators, Sass supports the relational operators; greater than ( > ), greater than or equals ( >= ), less than ( < ), and less than or equals ( <= ).

I'm guessing I don't need to spend too much time covering comparison operators, but here are a few examples.

1  2  3  4  5  6  
5 == 3     // evaluates to false    5 != 3     // evaluates to true    5 > 3   // evaluates to true    5 >= 3  // evaluates to true    5 < 3   // evaluates to false    5 <= 3  // evaluates to false

Comparison operators are mainly used in control directives inside mixins and functions. I'll talk more about control directives and writing custom functions at the end of this series.

Sass Division

Because CSS allows the / character as a separator (font: 16px/24px for font-size/line-height for example), Sass must also support the character as a separator. That's how Sass will treat a / by default, however there are three cases where it will be interpreted as division.

  1. If the value, or any part of it, is stored in a variable or returned by a function.
  2. If the value is surrounded by parentheses.
  3. If the value is used as part of another arithmetic expression.
1  2  3  4  5  6  7  8  9  
$width: 960px;    p{   font: 16px/24px;   width: $width/3;   padding: round(23.8px)/3;   height: (800px/2);   margin: 9px + 6px/2px;  }

compiles to

1  2  3  4  5  6  7  
p {      font: 16px/24px;      width: 320px;      padding: 8px      height: 400px;      margin: 12px;    }

Interpolation

Sometimes the default variable behavior isn't what you want. For example you might store font-size and line-height as variables, but later want to use both as plain CSS on the font property as in font-size/line-height.

When this happens you can make use of interpolation ( #{} ), which I talked about in an earlier article about variables.

1  2  3  4  5  6  
$font-size: 16px;    $line-height: 24px;    p {      font: #{$font-size}/#{$line-height};    }

which compiles to:

1  2  3  
p {      font: 16px/24px;    }

instead of applying division and resulting in:

1  2  3  
p {      font: 0.667px;    }

Parenthesis

As I mentioned last week parentheses can be used to affect the order of operations:

1  2  3  
p {     width: 10px + (2px * 3);    }

compiles to 

1  2  3  
p {     width: 16px;    }

while

1  2  3  
p {     width: (10px + 2px) * 3;    }

compiles to 

1  2  3  
p {     width: 36px;    }

Number Functions

Sass has eight built-in functions for working with numbers. My guess is you can figure out what each one does and how to use it without me, but I'll give you a quick definition and example for each just in case.

percentage($number) turns a unitless number into a percentage. Here I'm using it to set the width of a column using a variable.

1  2  
$columns = 3;    .col-width { width: percentage(1/$columns); }

I divided the number 1 by the variable $columns in which result in a number between 0 and 1.0. The function multiplies this result by 100 to get the percentage.

The Sass compiles to the following CSS.

1  
.col-width { width: 33.3333333333%; }

round($number) rounds a number to the nearest whole number. You can include units with the number if you'd like.

1  2  3  4  5  6  7  
p {     font-size: round(18.2px);    }    h2 {     font-size: round(1.8em)    }

which compiles to:

1  2  3  4  5  6  7  
p {     font-size: 18px;    }    h1 {     font-size: 2em;    }

If you specifically want to round up or down you can use either ceil($number), which always rounds up or floor($number), which always rounds down.

1  2  3  4  5  6  7  
p {     font-size: ceil(18.2px);    }    h2 {     font-size: floor(1.8em)    }

which compiles to:

1  2  3  4  5  6  7  
p {     font-size: 19px;    }    h1 {     font-size: 1em;    }

If you need the absolute value of a number you can use abs($number), which as you would expect, returns the absolute value of the number.

1  2  3  4  
$gutter: -10px;    .gutter {     width: abs($gutter);    }

compiles to:

1  2  3  
.gutter {     width: 10px;    }

Sass includes two functions to determine the minimum or maximum from a series of numbers, min($numbers…) or max($numbers…). I trust you can figure out which one finds the minimum and which one finds the maximum.

You can use unitless numbers or you can include units as long as all the units being compared are the same.

1  2  3  4  5  6  7  
p {     font-size: min(18px, 24px, 16px);    }    h1 {     font-size: max(18px, 24px, 16px);    }

which compiles to:

1  2  3  4  5  6  7  
p {     font-size: 16px;    }    h1 {     font-size: 24px;    }

Finally there's the function random([$limit]), which returns a random number. The $limit is optional. If not included the function will return a number between 0.0 and 1.0. If you include an integer limit, the function returns an integer between 1 and the integer limit you set.

1  2  3  4  5  6  7  
p {     font-size: random() + px;    }    h1 {     font-size: random(24) + px;    }

Since the function returns a random or semi-random number, the code above compiles differently with each compile. Here's one possible result that I received on compiling my Sass.

1  2  3  4  5  6  7  
p {      font-size: 0.1465153965px;    }    h1 {     font-size: 9px;    }

You probably noticed in this example that I added px after the random() function. That's concatenation, but it's a subject for the next data type, strings.

Closing Thoughts

If you've worked with programming languages before, I assume this was a very simple review for working with numbers. If you haven't done any programming before, I hope you can see that Sass makes it easy to manipulate numbers and it gives you more options to manipulate them than you get with CSS alone.

I find operating on numbers or generating results from the number functions comes in handy at times, especially when you want to maintain proportions in a responsive design. They can save you from having to perform the math involved in dividing one variable by another and when calculating how many pixels a gutter should be when the layout resizes.

And sometimes it just makes your code more understandable to see the numbers in the calculation rather than the result.

Next week I'll continue with a look at the string data type along with the operators and functions Sass provides for working with them.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Tuesday 5 July 2016

An Introduction To Sass Data Types, Operators, and Functions - Vanseo Design

An Introduction To Sass Data Types, Operators, and Functions - Vanseo Design

An Introduction To Sass Data Types, Operators, and Functions

Posted: 05 Jul 2016 05:30 AM PDT

I'm the last person to call myself a programmer, but I have learned the basics of a handful of programming languages over the years. One topic important to all of them is the different data types you can work with and how the language allows you to manipulate them.

Telephone operators in Paris

As a scripting language, Sass is no different. It offers support for different types of data and it provides ways to manipulate each of them. I want to spend the next couple of months talking about data types in Sass and how you can manipulate them with different operators and functions.

Today I'll offer an overview and then talk about a couple of data types that don't have built-in functions and minimal operators. In the coming weeks I'll cover more data types in greater detail and I'll close the series talking about control structures and how to create your own custom functions.

Data Types in CSS

We don't usually think of data types in CSS. We think more in terms of selector {property: value}, but all the values will be of one of the allowed data types for the specific property.

For example when you set a font-family, the value will be a string. The flexbox order property accepts integers, while the line-height property accepts real numbers.

The W3C lists seven basic data types for CSS.

  • Integers and real numbers
  • Lengths
  • Percentages
  • URLs and URIs
  • Counters
  • Colors
  • Strings

While we use these data types to set property values, CSS doesn't provide much to manipulate any of them. For example there's no way to combine two strings into one property value without using some other language like Javascript or Sass.

CSS does offer the calc() function so we can do some basic math such as:

1  
width: calc(100% - 120px);

If you haven't used it before calc() comes in handy at times such as when you want a fixed gutter in a responsive grid. It's not something I use a lot, though.

Data Types and Operations

Sass allows you to work with any CSS data type as well as some additional data types of its own. It also offers operators for manipulating its own data types and it provides several functions to do even more with most of them.

Sass supports seven main data types.

  • Numbers
  • Strings
  • Colors
  • Booleans
  • Nulls
  • Lists
  • Maps

I'll talk about nulls and booleans in a moment and I'll cover the other data types in more detail over the next few weeks.

All of Sass's data types support equality operations.

  • equals (==)
  • not equals (!=)

Both can be used to compare values to determine if the values are the same or different. With one exception each data type also has support for its own set of operations, which I'll get to when we talk more in depth about the data types.

You can also use parenthesis to affect the order of operations. I'll show an example next week when we talk about numbers.

Functions

Functions consist of code to perform a specific task. They're similar to mixins, except that where mixins output lines of code, functions return a value that will be used elsewhere. Like mixins, functions can accept variables and they help you write DRYer code by abstracting reusable logic.

Sass provides quite a few built-in functions to help you work with the different data types. For example there are functions that let you darken or lighten a color by 10% or 28% or whatever you choose.

You can create your own custom functions and if you've ever used a library like Compass or Bourbon, you've likely used some custom functions before. I'll close this series talking about custom functions, but first we need to set the foundation by talking about data types, their operators, and the built-in functions of Sass that work with them.

However, the first two data types I'll talk about today have no built-in functions and only one has any operators associated with it.

The Null Data Type

The null data type has one value, which is null. It's a data type that doesn't have its own operators or built-in functions. The most common use of the null data type is to define an empty state, nothing, or unknown. You might use it when initializing empty variables in a mixin for instance.

1  
$color: null;

Note that null is all lowercase. NULL is not the same as null in Sass and will instead be interpreted as a string.

When compiling to CSS any property with a value of null will be ignored.

1  2  3  4  
h1 {      background: #fff;      color: null;    }

compiles to:

1  2  3  
h1 {      background: #fff;    }

Despite null representing nothing or an empty state, it has a length of 1 when passed to the length function. The reason has to do with how Sass stores variables, but that's something I'll get to more when talking about lists.

Booleans

Boolean values are either true or false. They come into play mostly with control directives. Sass supports three operators on boolean values (in addition to equals and not equals).

  • and evaluates to true when both values are true, otherwise it evaluates to false.
  • or evaluates to true when either value is true and evaluates to false when both values are false.
  • not negates the current value so true becomes false and false becomes true.

Note that like null each operator is lowercase. AND, OR, NOT, are not valid boolean operators in Sass.

There aren't any functions specific to booleans and again they come into play mostly to compare one value to another in conditional statements, which is something I'll talk more about toward the end of this series.

Closing Thoughts

Hopefully this serves as a very quick and simple introduction to data types, operators, and functions in Sass. I'll cover the remaining data types in more detail as we work through the series. The main thing to take away today is that Sass supports all CSS data types (the allowable property value types) and it supports some additional data types of its own.

Sass also provides ways to manipulate data through operators specific to each data type and through the use of functions, some of which are native to Sass and some of which are available through 3rd party libraries like Compass. You can even create your own custom functions.

Next week I'll look at numbers and and the following week I'll look at strings two types of data you work with all the time in CSS. In the weeks after I'll dig into the other data types. I'll close the series looking at control directives and then show you how to write your own custom functions.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Subscribe to: Posts (Atom)