Table of contents

Helpers

As part of making SFUMATO work as a whole, a bunch of helper mixins and functions were created, which you can use directly. This includes things like a mixin to hide an element based on a media query.

                                        
                                            div {
                                            
                                                @include sf-hide(
                                                    $from: tablet-portrait
                                                );
                                            }
                                        
                                    

What's here?

Some of the functions directly assist with styling, and others are for SCSS variable manipulation. For example, there are functions to add and strip measurement units from SCSS variables, perform string find/replace, and more.

Functions

The following are miscellaneous SCSS functions provided by SFUMATO.

sf-hide()

Hide an object based on a media breakpoint using display: none;. As such this is not suitable for CSS animation.

  • $from — default: false

    Styles will be used for this breakpoint and wider.

  • $upto — default: false

    Styles will be used for screen sizes up to but not including this breakpoint.

Example

                                        
                                            div {
                                            
                                                @include sf-hide(
                                                    $from: tablet-portrait
                                                );
                                            }
                                        
                                    

Attributes

You can also hide an object using simple HTML tag attributes and using media breakpoints.

  • sf-hide-X-and-up

    Hide an object at a specific media breakpoint and wider, where X is the breakpoint shortcut.

  • sf-hide-below-X

    Hide an object below a specific media breakpoint (not inclusive), where X is the breakpoint shortcut.

Example

                                        
                                            <div sf-hide>
                                                Hide this for mobile.
                                            </div>
                                            <div sf-hide-tabp-and-up>
                                                Hide this for tablet portrait and wider.
                                            </div>
                                            <div sf-hide-below-tabp>
                                                Hide this below tablet portrait.
                                            </div>
                                        
                                    

sf-visually-hide()

Hide an object based on a media breakpoint using a variety of properties except display: none;. As such this is more suitable for CSS animation.

  • $from — default: false

    Styles will be used for this breakpoint and wider.

  • $upto — default: false

    Styles will be used for screen sizes up to but not including this breakpoint.

Check the _core-helpers.scss file to see what properties this mixin changes in case this documentation is out of date.

Example

                                        
                                            div {
                                            
                                                @include sf-visually-hide(
                                                    $from: tablet-portrait
                                                );
                                            }
                                        
                                    

What is set?

                                        
                                            border: 0;
                                            clip: rect(0 0 0 0);
                                            height: 1px;
                                            margin: -1px;
                                            overflow: hidden;
                                            padding: 0;
                                            position: absolute;
                                            width: 1px;
                                        
                                    

sf-str-replace()

Replace a substring in a given string with another substring. The substring search is case-sensitive.

  • $string

    Source string variable to search.

  • $search

    Substring to find.

  • $replace

    Substring replacement.

                                        
                                            div {

                                                content: '#{sf-str-replace($string, 'cat', 'dog')}';
                                            }
                                        
                                    

sf-str-endswith()

Determine if a string ends with a specific substring. The comparison is case-sensitive.

  • $string

    Source string variable to search.

  • $endswith

    Substring to find at the end of $string.

                                        
                                            $string: "quickly";
                                            $adverb: sf-str-endswith($string, 'ly');
                                            $yikes: sf-str-endswith($string, 'LY');

                                            // $adverb is true
                                            // $yikes is false
                                        
                                    

sf-str-split()

Split a string into substrings using a delimitter. The delimitter is case-sensitive.

  • $string

    Source string variable to split.

  • $separator

    Substring delimitter to use when splitting the string. Defaults to a space character.

                                        
                                            $string: "these are words";
                                            $words: sf-str-split($string);
                                            
                                            // $words is a list with three words
                                            // ('these', 'are', 'words')
                                        
                                    

sf-to-number()

Convert a SCSS string to a number.

  • $string

    String with a numeric value.

                                        
                                            $string: "42";
                                            $int: sf-to-number($string);
                                            
                                            // $int is now equal to 42
                                        
                                    

sf-to-length()

Convert a SCSS string or numeric variable to a value with a unit of measure; for example, convert 3 to 3rem.

  • $value

    Variable with a numeric value.

  • $unit

    Unit of measure (as a string) to use (e.g. "rem").

                                        
                                            $value: 42;
                                            $new: sf-to-length($value, "px");
                                            
                                            // $new is now equal to 42px
                                        
                                    

sf-strip-unit()

Strip the unit from a measurement and return a numeric value; for example, convert 3rem to 3.

  • $number

    Variable with a measurement value.

                                        
                                            $value: 42px;
                                            $new: sf-strip-unit($value);
                                            
                                            // $new is now equal to 42
                                        
                                    

sf-get-unit()

Get the unit from a measurement value; for example, get "px" from 3px.

  • $value

    Variable with a measurement value.

                                        
                                            $value: 42px;
                                            $unit: sf-get-unit($value);
                                            
                                            // $unit is now equal to "px"