SASS - Operators

Copyright Notice: Copyright, without permission prohibited reproduced! https://blog.csdn.net/weixin_43031412/article/details/91492755

---

• SASS - Introduction
• SASS - environment to build
• SASS - use program Sass
• SASS - Syntax
• SASS - variable
• SASS- local file (Partial)
• SASS - Mixed (Mixin)
• SASS - @extend (inherited) Directive
• SASS - Operators
• SASS - Functions
• SASS - Output format

---

This article describes Sass operator (or operators). Including addition, subtraction, division, and the like equals operator.

Equality operator

All data types are supported equals operator:

==	equal
!=	not equal to

In addition to the equality operator, each data type also supports a respective set of operators.

Numeric operators

SassScript supports the following standard arithmetic operators:

+	plus
-	Less
*	Multiply
/	except
%	Modulo

One common use is the width of arithmetic operators calculated.

For example, the following example of calculating the percentage Width:

.container { 
    width: 100%; 
}

article {
    float: left;
    width: 700px / 960px * 100%;
}

.sidebar {
    float: right;
    width: 200px / 960px * 100%;
}

CSS code compiled the following output:

.container {
  width: 100%; }

article {
  float: left;
  width: 72.91667%; }

.sidebar {
  float: right;
  width: 20.83333%; }

When using the arithmetic operators involved in operations unit of data must be the same. Otherwise it will error (for example, with a px, another with em):

 .box-big {
        font-size:  22px + 4em; // Error: Incompatible units: 'em' and 'px'.
        width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
    }

Color operator

Arithmetic operators also applies to color. Calculating the color, is involved in computing the R, G, B component, rather than the entire six-digit color values.

For example, when the two hexadecimal color value sum, adding sequentially to each of the component values.

Example:

body {
    color: #991100 + #002299;
}

CSS code compiled the following output:

body {
  color: #993399; }

Operators may also be applied to the colors and numbers. E.g

body {
    color: #112233 * 2;
}

CSS code compiled the following output:

body {
  color: #224466; }

String operator

+Operators can also be used to connect strings.

img {
  cursor: zoom + -in;
}

CSS code compiled the following output:

img {
  cursor: zoom-in; }

Logical Operators

Sass also supports the use and, or and not operators such as Boolean values.