The Popover API provides a built-in way to create various types of popover used in web applications. Previously, these required you to use JavaScript, and take great care to implement them in an accessible manner. The API brings all of this to the browser, and a simple popover can be created declaratively in HTML.
Category: CSS
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: |
| 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: |
| 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: |
| 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: |
| grayscale(color) | Sets a gray color with the same lightness as color.
Example: |
| complement(color) | Sets a color that is the complementary color of color.
Example: |
| 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: |
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 Selector Functions
Sass Selector Functions
The selector functions are used to check and manipulate selectors. Continue reading Sass Selector 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: |
| ceil(number) | Rounds number up to the nearest integer.
Example: |
| comparable(num1, num2) | Returns whether num1 and num2 are comparable.
Example: |
| floor(number) | Rounds number down to the nearest integer.
Example: |
| max(number…) | Returns the highest value of several numbers.
Example: |
| min(number…) | Returns the lowest value of several numbers.
Example: |
| percentage(number) | Converts number to a percentage (multiplies the number with 100).
Example: |
| random() | Returns a random number between 0 and 1.
Example: |
| random(number) | Returns a random integer between 1 and number.
Example: |
| round(number) | Rounds number to the nearest integer.
Example: |
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: |
| str-index(string, substring) | Returns the index of the first occurrence of the substring within string.
Example: |
| str-insert(string, insert, index) | Returns string with insert inserted at the specified index position.
Example: |
| str-length(string) | Returns the length of string (in characters).
Example: |
| str-slice(string, start, end) | Extracts characters from string; start at start and end at end, and returns the slice.
Example: |
| to-lower-case(string) | Returns a copy of string converted to lower case.
Example: |
| to-upper-case(string) | Returns a copy of string converted to upper case.
Example: |
| unique-id() | Returns a unique randomly generated unquoted string (guaranteed to be unique within the current sass session).
Example: |
| unquote(string) | Removes quotes around string (if any), and returns the result.
Example: |
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;
...
}