Tag: csstats

Sass Color Functions

Sass Color Functions

We have divided the color functions in Sass into three parts: Set color functions, Get color functions, and Manipulate color functions:

Sass Set Color Functions

Function Description & Example
rgb(red, green, blue) Sets a color using the Red-Green-Blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%).

Example:
rgb(0, 0, 255); // rendered as blue because the blue parameter is set to its highest value (255) and the others are set to 0
rgba(red, green, blue, alpha) Sets a color using the Red-Green-Blue-Alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity of the color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example:
rgba(0, 0, 255, 0.3); // rendered as blue with opacity
hsl(hue, saturation, lightness) Sets a color using the Hue-Saturation-Lightness (HSL) model – and represents a cylindrical-coordinate representation of colors. Hue is a degree on the color wheel (from 0 to 360) – 0 or 360 is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

Example:
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green
hsla(hue, saturation, lightness, alpha) Sets a color using the Hue-Saturation-Lightness-Alpha (HSLA) model. HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity of the color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example:
hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity
grayscale(color) Sets a gray color with the same lightness as color.

Example:
grayscale(#7fffd4);
Result: #c6c6c6
complement(color) Sets a color that is the complementary color of color.

Example:
complement(#7fffd4);
Result: #ff7faa
invert(color, weight) Sets a color that is the inverse or negative color of color. The weight parameter is optional and must be a number between 0% and 100%. Default is 100%.

Example:
invert(white);
Result: black

Continue reading Sass Color Functions

Sass Introspection Functions

Sass Introspection Functions

The introspection functions are rarely used when building a stylesheet. However, they are valuable if something does not work properly – to figure out what’s going on: like debugging functions. Continue reading Sass Introspection Functions

Sass Map Functions

Sass Map Functions

In Sass, the map data type represents one or more key/value pairs.

Tip: It is also possible to use the List functions from the previous page, with maps. Then the map will be treated as a list with two elements.

Sass maps are immutable (they cannot change). So, the map functions that return a map, will return a new map, and not change the original map. Continue reading Sass Map Functions

Sass List Functions

Sass List Functions

The list functions are used to access values in a list, combine lists, and add items to lists.

Sass lists are immutable (they cannot change). So, the list functions that return a list, will return a new list, and not change the original list.

Sass lists are 1-based. The first list item in a list is at index 1, not 0.

The following table lists all list functions in Sass : Continue reading Sass List Functions

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 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