Sass Numeric Functions

Sass Numeric Functions

The numeric functions are used to manipulate numeric values.

The following table lists all numeric functions in Sass:

Function Description & Example
abs(number) Returns the absolute value of number.

Example:
abs(15)
Result: 15
abs(-15)
Result: 15
ceil(number) Rounds number up to the nearest integer.

Example:
ceil(15.20)
Result: 16
comparable(num1, num2) Returns whether num1 and num2 are comparable.

Example:
comparable(15px, 10px)
Result: true
comparable(20mm, 1cm)
Result: true
comparable(35px, 2em)
Result: false
floor(number) Rounds number down to the nearest integer.

Example:
floor(15.80)
Result: 15
max(number…) Returns the highest value of several numbers.

Example:
max(5, 7, 9, 0, -3, -7)
Result: 9
min(number…) Returns the lowest value of several numbers.

Example:
min(5, 7, 9, 0, -3, -7)
Result: -7
percentage(number) Converts number to a percentage (multiplies the number with 100).

Example:
percentage(1.2)
Result: 120
random() Returns a random number between 0 and 1.

Example:
random()
Result: 0.45673
random(number) Returns a random integer between 1 and number.

Example:
random(6)
Result: 4
round(number) Rounds number to the nearest integer.

Example:
round(15.20)
Result: 15
round(15.80)
Result: 16

Continue reading Sass Numeric Functions

Sass String Functions

Sass String Functions

The string functions are used to manipulate and get information about strings.

Sass strings are 1-based. The first character in a string is at index 1, not 0.

The following table lists all string functions in Sass:

Function Description & Example
quote(string) Adds quotes to string, and returns the result.

Example:
quote(Hello world!)
Result: “Hello world!”
str-index(string, substring) Returns the index of the first occurrence of the substring within string.

Example:
str-index(“Hello world!”, “H”)
Result: 1
str-insert(string, insert, index) Returns string with insert inserted at the specified index position.

Example:
str-insert(“Hello world!”, ” wonderful”, 6)
Result: “Hello wonderful world!”
str-length(string) Returns the length of string (in characters).

Example:
str-length(“Hello world!”)
Result: 12
str-slice(string, start, end) Extracts characters from string; start at start and end at end, and returns the slice.

Example:
str-slice(“Hello world!”, 2, 5)
Result: “ello”
to-lower-case(string) Returns a copy of string converted to lower case.

Example:
to-lower-case(“Hello World!”)
Result: “hello world!”
to-upper-case(string) Returns a copy of string converted to upper case.

Example:
to-upper-case(“Hello World!”)
Result: “HELLO WORLD!”
unique-id() Returns a unique randomly generated unquoted string (guaranteed to be unique within the current sass session).

Example:
unique-id()
Result: tyghefnsv
unquote(string) Removes quotes around string (if any), and returns the result.

Example:
unquote(“Hello world!”)
Result: Hello world!

Continue reading Sass String Functions

Sass @extend and Inheritance

Sass @extend Directive

The @extend directive lets you share a set of CSS properties from one selector to another.

The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

The following Sass example first creates a basic style for buttons (this style will be used for most buttons). Then, we create one style for a “Report” button and one style for a “Submit” button. Both “Report” and “Submit” button inherit all the CSS properties from the .button-basic class, through the @extend directive. In addition, they have their own colors defined : Continue reading Sass @extend and Inheritance

Sass @mixin and @include

Sass Mixins

The @mixin directive lets you create CSS code that is to be reused throughout the website.

The @include directive is created to let you use (include) the mixin.

Defining a Mixin

A mixin is defined with the @mixin directive.

Sass @mixin Syntax:

@mixin name {
  property: value;
  property: value;
  ...
}

Continue reading Sass @mixin and @include

Sass @import and Partials

Sass keeps the CSS code DRY (Don’t Repeat Yourself). One way to write DRY code is to keep related code in separate files.

You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. Continue reading Sass @import and Partials

Sass Nested Rules and Properties

Sass Nested Rules

Sass lets you nest CSS selectors in the same way as HTML.

Look at an example of some Sass code for a site’s navigation:

Example

SCSS Syntax:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
  li {
    display: inline-block;
}
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}
}

Continue reading Sass Nested Rules and Properties

Sass Variables

Sass Variables

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

  • strings
  • numbers
  • colors
  • booleans
  • lists
  • nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

$variablename: value;

The following example declares 4 variables named myFont, myColor, myFontSize, and myWidth. After the variables are declared, you can use the variables wherever you want:

SCSS Syntax:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

Continue reading Sass Variables

Sass Installation

System Requirements for Sass

  • Operating system – Sass is platform independent
  • Browser support – Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
  • Programming language – Sass is based on Ruby

Continue reading Sass Installation

CSS Sass

Learn Sass

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

Examples in Each Chapter

Our “Show Sass” tool makes it easy to learn Sass, it shows both the code and the result.

Sass Example

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

Continue reading CSS Sass

Responsive Web Design – Videos

Using The width Property

If the width property is set to 100%, the video player will be responsive and scale up and down:

Example

video {
  width: 100%;
  height: auto;
}

Continue reading Responsive Web Design – Videos