Sass - DataTypes

Data Types

Data Type is a type of information, which requires declaring data type for every data object. The following table shows various data types supported by SassScript −

S.No.	Data Type & Description	Example
1	Numbers It represents integer types.	2, 10.5
2	Strings It is sequence of characters defined within single or double quotes.	'Tutorialspoint', "Tutorialspoint"
3	Colors It is used for defining color value.	red, #008000, rgb(25,255,204)
4	Booleans It returns true or false boolean types.	10 > 9 specifies true
5	Nulls It specifies null value which is unknown data.	if(val==null) {//statements}
6	Space and Comma Represents the values which are separated by spaces or commas.	1px solid #eeeeee, 0 0 0 1px
7	Mapping It maps from one value to another value.	FirsyKey: frstvalue, SecondKey: secvalue

Strings

Strings are series of characters, which are represented within single or double quotes. The strings which are defined with single quote or double quotes will be displayed as unquoted string value by using #{ } interpolation (it is a way of using variables in selectors).

Example

The following example demonstrates the use of strings in the SCSS file −

<html>
   <head>
      <title>Strings</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <h2>Example using Strings</h2>
         <p class = "tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

Next, create file style.scss.

style.scss

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\style.scss:style.css

Next, execute the above command; it will create the style.css file automatically with the following code −

style.css

p.tutorialspoint {
   color: blue;
}

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in strings.html file.
Open this HTML file in a browser, an output is displayed as shown below.

Lists

Lists specify multiple values which are separated using spaces or commas. Even single value are considered as a list.

SASS uses some of the list functions such as −

nth function − It provides specific item of the list.
join function − It joins multiple lists into one.
append function − It appends the item to other end of the list.
@each directive − It provides styles for the each item in the list.

For example, consider there are two types of list; the first list contains the following values which are separated using comma.

10px 11px, 15px 16px

If the inner list and the outer list have same separator, then you can use parentheses to specify where both the lists will start and stop. You can specify these lists as shown below −

{10px 11px} {15px 16px}

Maps

Maps are combination of keys and values in which keys are used to represent the values. Maps define values into groups and can be accessed dynamically. You can write a map expression as −

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

It uses some of the functions such as −

map-get − It provides values of the map.
map-merge − It adds values to the map.
@each directive − It specifies styles for key/value pair in the map.

Maps represent empty key/value pairs as ( ) with no elements and uses the inspect ($value) function to display the output for the maps.

Colors

It is used for defining SassScript color value. For instance, if you are using color code as #ffa500, then it will display as orange color in the compressed mode. SASS provides the same output format as typed in the other output modes, which becomes an invalid syntax when a color is interpolated into a selector. To overcome this issue, use the color names within quotes.

sass_script.htm