×
Sass part 4 – Built in modules and functions. Writing custom functions with @function and @return


Sass part 4 – Built in modules and functions. Writing custom functions with @function and @return

January 15, 2020

This is the fourth part of our Sass series. This part covers built-in modules, functions, and modularization in Sass.

Part 1      – Introduction, variables, and nesting in Sass.

Part 2     – @-rules and Directives.

Part 3     – Operators and control directives in Sass

 

 

 

WHAT YOU WILL LEARN

  • Sass modularization, built-in modules, and functions in Sass.
  • Writing custom functions in Sass.

 

Sass modularization

Sass moved built-in functions into separate built-in modules in its Dart version DartSass. The C++ version of the preprocessor LibSass and the Ruby version of the preprocessor RubySass do not have this modification. Sass introduces @use and @forward which can be used to create custom modules. @forward makes mixins, variables, and functions in your Sass module available in other Sass sheets.  The modules with these forwarded variables, mixins, and functions, are loaded to Sass sheets using @use.

The built-in modules have functions and mixins which can be used to work on data types and selectors. Functions to observe the internal operations of Sass are also combined into a module.

Functions can be classified into three types.  Functions to work with values of different data types, selector functions, and introspection functions.

 

Built-in modules

The modules to work on datatypes are

sass:math  – Math functions

sass:string – To modify string values.

sass:map – Map functions

sass:list – Work on  list data type

sass:color – To work with color data type.

The 5 modules to work on data of different data types are above

sass:selector  – helps to work with selector

sass:meta  – Utility functions for observing Sass internally while doing operations like debugging.

 

Built-in functions

String functions

There are 9 string functions provided by SASS

quote

unquote

str-length

str-index

str-insert

str-slice

to-lower-case

to-upper-case

unique-id

While working with Dart Sass, the string modules have to be imported using @use

quote: Put quotes around a string. string.quote with Dart Sass.

 

unquote: Remove quotes around a string. string.unquote with Dart Sass


 

str-length: Get the length of a string. string.length while working with Dart Sass


 

str-index: Index of a substring in a string. string.index while working with Dart Sass


 

str-insert: Insert substring at a given index of a string. string.insert while working with Dart Sass


 

str-slice: Slice substring at a given index of a string. string.insert while working with Dart Sass


 

to-lower-case: Convert string to all lowercase. string.to-lower-case while working with Dart Sass


 

to-upper-case: Convert string to all uppercase. string.to-upper-case while working with Dart Sass

 

unique-id: Creates a unique string. string.unique-id while working with Dart Sass.

TRY IT OUT

 

 

Numeric functions or Math functions

There are 10 Numeric functions provided by Sass

percentage

round

ceil

floor

abs

max

min

random

unit

is-unitless

While working with Dart Sass, the numeric modules have to be imported using @use


 

comparable/compatible: returns true if two values are comparable/compatible. For example, two values, say 5px,10px, are comparable as they have the same units. math.compatible while working with Dart Sass others still have global comparable.

 

percentage: converts a number to a percentage. math.percentage while working with Dart Sass


 

round: rounds a number to the nearest whole number. For example, 4.2 will get rounded to 4 and 4.6 will get rounded to 5. math.round while working with Dart Sass

 

ceil: Converts a number to the next highest whole number. math.ceil while working with Dart Sass

 

floor: Converts a number to the nearest lowest whole number. math.floor while working with Dart Sass

 

abs: returns the absolute value of a number. math.abs while working with Dart Sass

 

max: returns the highest one among a list of numbers. math.max in Dart Sass

 

min: returns the lowest one among a list of numbers. math.min in Dart Sass

 

random: returns a random number between 0 and 10.If a limit is provided as an argument, the number returned will be between 0 and limit. math.random in Dart Sass

 

unit: returns the unit associated with data. math.unit with Dart Sass.

 

is-unitless: returns true if there is no unit associated with data. math.is-unitless with Dart Sass.

TRY IT OUT

 

 

List Functions

lists are separated by  spaces/commas

length

nth

set-nth

join

append

index

is-bracketed

list-separator

zip

While working with Dart Sass, the list modules have to be imported using @use

 

length: returns the length of a list. list.length with Dart SASS

nth: returns the nth element of a list. list.nth with Dart Sass


 

set-nth: replace the nth element in the list. list.set-nth in Dart Sass.

 

join: join two lists, optionally specify separator as the third argument. list.join in Dart Sass


 

append: Append an element to a list, the separator is optional. list.append in Dart Sass.


 

index: Return index of a specific item in the list. list.index in dart Sass.

 

is-bracketed: return true or false depending on whether the list is bracketed. list.is-bracketed in Dart Sass

 

list-separator: returns the separator of a list. list.separator in Dart Sass

 

zip: combines multiple lists into a single list of sublists. list.zip in Dart Sass

TRY IT OUT

 

 

Map Functions

There are 8 map functions

map-get

map-merge

map-remove

map-keys

map-values

map-keys

map-values

has-key

While working with Dart Sass, the map modules have to be imported using @use

map-get: maps are key-value pair data types. map-get gets the value corresponding to a key. map.get while working with Dart Sass.

 

map-merge:  Merge or combine two maps together. map.merge while working with Dart Sass

map-remove: Remove value by keys. map.remove with Dart Sass


 

map-keys: Returns all the keys in the map as a list. map.keys() with Dart Sass

map-values:  Return all the values in the map. map as a list.values() with Dart Sass

has-key: Return true if a map has a key. map.has-key in Dart Sass.

TRY IT OUT

 

 

Color functions

While working with Dart Sass, the color modules have to be imported using @use

Sass provides a variety of functions to work with color. See more

Sass color functions

 

 

Sass Selector functions

While working with Dart Sass, the Selector modules have to be imported using @use

 

There are 8 selector function Sass inbuilt, to manipulate selectors

is-superselector

selector-append

selector-extend

selector-nest

selector-parse

selector-replace

selector-unify

simple-selectors

is-superselector($super,$sub): If all the elements matching a super selector matches all the elements of sub-selector, it is a super selector and true is returned. selector.is-superselector with Dart Sass

is-superselector($super,$sub) , $super is super selector and $sub is sub-selector.

 

selector-append($slector1,$selector2,$selector3…): Append all the selectors to the first selector. selector.append with Dart Sass

 

selector.extend : extend a selector with an extender selector. selector.extend with Dart Sass

 

selector-nest($selectors…):  Nest selectors given in the list. selector.nest with Dart Sass.

TRY IT OUT

 

 

 

Sass Introspection Functions

While working with Dart Sass, the introspection modules have to be imported using @use

Some introspection functions are available globally whereas some are in meta module while working with Dart Sass.

call: Call function calls a Sass function and returns the return value. Call introspection function with a function as the first argument and the arguments to the function as the next arguments. meta.call in Dart Sass


 

Now calling the function colorName using the call function will return the return value.


 

content-exists(): Returns boolean result whether the current mixin was passed a @content block.

feature-exists(feature):  Returns boolean result if a  feature is supported by the current Sass implementation.

 

function-exists: Return true or false depending on whether a function with the given name exists or not.

 

get-function(functionname,true ): Returns the function named functionname.

If the second parameter is false and there is no built-in or defined function with name colorName, Sass will throw an error. If the second parameter is true it will return a function that will generate an empty CSS

 

global-variable-exists: Check if the global variable exists. A global variable is something that is defined in the document root. Not inside a selector.


 

variable-exists : Check if a variable exists in the current scope. If global then global scope.


 

type-of : Return the type of a value.

inspect : Return the value of the variable in string data type.

 

unit: Returns the unit associated with a number;

unitless: check if there is a unit.

 

mixin-exists() : true If mixin with a given name exists.

TRY IT OUT

 

 

 

Writing custom functions using @function. @return returns the value from the function.

 

Arguments can be provided in a list so that an arbitrary number of arguments can be supplied

@function cannot contain style rules.

TRY IT OUT

 

Note: Code snippets given here are just examples to show how the  Sass features work.

 

 

 

WHAT YOU HAVE LEARNED

  • Types of Sass built-in functions. Selector functions,introspection functions and function on different data types(string,number,map,list,color)
  • @function is used to declare functions of your own @return will return the value.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *