SDS Tools

Collection of functions and mixins into SDS-Core package

As we mentioned in this section's Intro, Sipster is a SCSS tool library, offering developers a collections of functions and mixins that facilitate styles implementation. To make these collections easier to navigate, we have divided them into two sections: Styles and the Layout System.

Using Functions

In SCSS, functions are actions that can receive params and will return a specific value based on that param. So, functions can be used seamlessly with different CSS properties without any problem. One thing to keep in mind is that the value that the function will return must be compaitble with the CSS property where it is being applied.

For example, developers should not apply a function that returns an anss hexadecimal color code into a CSS property that expects a numeric value.

Here are some examples showcasing how SDS-Core functions are implemented:

Spacing: sds-spc()

button {
  padding: sds-spc(8) sds-spc(12);
}


//--------------
// Compiled CSS 
//--------------

button {
  padding: 8px 12px;
}

Color: sds-color()

button {
  color: sds-color(blue);
  background-color: sds-color(blue, 80);
}


//--------------
// Compiled CSS 
//--------------

h1 {
  color: #3579F5;
  background-color: #06307D;
}

Using Mixins

Mixins, like functions in SCSS, are actions that can receive params to work properly. However, there are three main distinctions between mixins and functions:

• Mixins are not going to return a specific value. Instead, they are going to return a property or a group of properties whose values are already set. So, mixins are a great asset for developers to reduce code. Rather than needing to write 4 or 5 lines of CSS properties, mixins allow developers to only write one line with its params.

• Mixins can have a "content area,” where developers can write their own properties to include within the mixin. For example, this feature is used in Sipster-Core at calling the screen breakpoints mixins.

• Whereas functions can be called inside any CSS property because they return a specific value, mixins cannot because they bring a group of properties with their values already set. So, in order to apply mixins,developers have to declare the mixins at the same level as the other CSS properties. Besides, it is necessary to write a @include before calling the mixin.

Here are some examples showcasing how SDS-Core mixins are implemented:

Flexbox: sds-flex()

div {
  @include sds-flex(center, center, column);
}


//--------------
// Compiled CSS 
//--------------

div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

CSS Grid: sds-grid()

div{
  @include sds-grid(4);
}


//--------------
// Compiled CSS 
//--------------

div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

StylesLayout System