Sass Notes The basic part of sass has been written. This article introduces the advanced features of Sass - scripting features. Sass can do a lot of things to make stylesheets smarter. We'll start by looking at the data types that Sass sees, and there are operations that can be done on those data types. In addition, the built-in functions in Sass (especially color functions) can help you A lot of things are automatically calculated, and sass has its own set of control structure syntax, which can implement loops or branches, all of which give the characteristics of sass scripts.
zero. What is an expression
Anything that can be placed on the right side of a property is an expression. Commonly, an expression is a simple value, but expressions can also contain mathematical operators, and expressions can appear anywhere in a property or variable value. The most straightforward understanding is that an expression is a string of things. This string of things contains operations such as operations or function calls. In the end, this string of things has a value, which is an expression.
1. Data type
The data types in Sass include strings, numbers, colors, lists, and booleans . Yes, it seems to be different from the data types of our programming languages such as JS, Java, etc., especially about colors .
1. String
Sass's string types are divided into quoted strings and unquoted strings:
- Quoted strings : can contain any character
"except - Unquoted strings : cannot start with numbers or special characters, and cannot contain spaces and special characters such as
*or&, etc.
Sass also treats several other special constructs as strings, such as !important, url()值but url($val)not because it contains variables.
The most commonly used string operator is +- used to concatenate strings. As for whether the concatenated result is quoted or not, it is determined by the string on the left of the concatenation. For historical reasons, -sums /are also concatenated, but the operators themselves are also included in the resulting string.
2. Numerical value
In Sass and CSS, numeric values consist of two parts: the actual number and (optional) units such as px, em, %, etc. When multiplying and dividing values with units, the units also follow scientific operations, such as: 5em * 4px = 20em*px.
Numeric values can be +, -, *, / and % operators.
Since it /is also used to separate values in CSS, the /following rules apply to operations:
- If either of the two values is a string, the result will be an ordinary forward slash, that is, the operation that becomes the concatenated string and the
/character is included in the result - The division operation will be performed if any of the following conditions are met:
/use a variable on either side of- The entire value is surrounded by parentheses
- The value is used as part of other arithmetic expressions
3. Color
There are several ways of expressing color values, which describe different aspects of color composition:
- Starting with
#the hexadecimal method, a total of 6 hexadecimal numbers are represented, and each 2-digit hexadecimal number indicates the composition of the three channels of Red, Green, and Blue in turn, from 00 to ff; - The color described by the
rgb()ORrgba()function is passed in the color components of the three channels of R, G, and B in turn, from 0 to 255, andrgba()an alpha channel is passed in at the end, indicating opacity, 0 means completely transparent, 1 means completely opaque ; - The color described by the
hsl()ORhsla()function is passed in hue, saturation and lightness in turn, the latter also has an alpha channel parameter; - Named colors, such as
white,grayetc.
4. List
A list is a sequence of data, separated by spaces or commas, you can understand it as an array. Lists can contain other lists (are they like two-dimensional arrays, multi-dimensional arrays), and it is common to add lists separated by spaces to lists separated by commas. For example a b, c d, e f, parentheses can also be used to nest other lists of the same type.
The use of the list is generally two, one is that it uses @eachinstructions to traverse, the code is more concise; the other is that it can be used to pass more complex parameters to the mixer.
5. Boolean
Boolean values are mainly used for judgment in the branch structure of Sass. The operators of Boolean values are and, orand not, that is, and or not.
In addition, the comparison operators <, <=, >, >=only work on numbers, but ==all types, and these operators return boolean values.
2. Functions - a highlight of Sass
Sass's built-in functions (especially color functions) can help us calculate a lot of things, and we don't need to master every function immediately, just need to understand what Sass's functions can do for us, and then check the documentation.
Sass functions, rgb（）like CSS functions such as this, are considered part of a Sass expression and return a Sass value (that is, of the types described above). When calling, $name: valuethe parameters can be specified in the form, so that the parameters can be passed in out of order.
1. Numerical processing common functions
Arrangement
ceil($number): Improvement arrangementround($number): the nearest whole number, rounded upfloor($number): round down
Other possible functions
abs($number): take the absolute valuecomparable($number_1, $number_2): Returns whether two values can be comparedunit($number)Andunitless($number): the former returns the numerical unit, the latter returns whether there is a unit
2. Function to get color information
The color function is divided into two parts, one part is used to return the specific information of the color, and the other part is used to convert an old color into a new color value.
The functions that return color information are commonly used:
alpha($color)Oropacity($color): the returned$coloralpha channel, which is the opacityred($color),green($color),blue($color): Returns the R, G, B channels corresponding to the color, so the value of 0-255 will be returnedhue($color),saturation($color),lightness($color): Returns the hue (0-359deg), saturation (percent) and lightness (percent) of the color corresponding to the color
3. Functions that convert colors
The two most comprehensive color conversion functions : adjust($color, ...)and scale($color, ...).
adjust($color, ...): Receive a color as the first parameter, the latter parameter is a list of keywords describing how to convert, such asadjust($color, $red: 20, $alpha: -0,5)increasing$colorthe red component of 20 and reducing the opacity by 0.5scale($color, ...): Receives a color as the first parameter, but the difference from the above is that it does not accept a fixed value, but adjusts in a percentage, but does not support$hueadjustment, because the hue is a ring, it is meaningless to adjust with a percentage
As long as the parameters in either function do not belong to both RGB and HSL components, the two functions can accept any number of parameters for adjustment to convert new colors.
Most mixed color function : mix($color_1, $color_2, [$weight]).
This function mixes two colors together. $weightThe closer an optional parameter is to 100%, the more components of the previous color are used. In addition, this function is also affected by the transparency of the two colors. The smaller the transparency, the color will affect the result. bigger.
Common one-factor color conversion functions : such as lighten(), darken(), saturate(), desaturate(), you can see what these functions are used for by looking at the names of these functions. The above functions all accept a color as the first parameter, and then accept a percentage for Adjustment, followed by increase brightness, decrease brightness, increase saturation, decrease saturation.
Convenient special color conversion functions : grayscale($color)reduce saturation to 0, thus converting to grayscale; complement($color)rotate chroma by 180 degrees to obtain the complementary color of the original color; invert($color)invert the color.
4. List functions
nth($list, $n): Returns an item in the list, counting from 1join($list1, $list2, [$separator]): concatenates two lists, the optional delimiter parameter determines how the final list is split (comma or space)length($list): returns the number of items in the list
5. Other useful sass functions
type-of($value): returns an unsigned string representing the type of the valueif($condition, $if-true, $if-false): According to the boolean value of the first parameter, decide whether to return the second or third parameter,?:similar to the ternary operator we use in other languages
3. Interpolation
You can wrap an expression anywhere between selectors and property names, #{and }the result of the expression will be replaced in the CSS output #{...}.
For example, we can build a mixer using interpolation
@mixin thing($class, $prop){
.thing.#{$class} {
prop-#{$prop}: val;
}
}
4. Structural Control Instructions
Sass can have loop and branch structure control instructions, similar to what we see in other programming languages, but it has its own writing method, which is only introduced @forhere .@each@if
1. @for
There are two syntaxes:
@for $i from 1 to 5 {...}: After jumping out of the loop like this, i stays at 4@for $i through 5 {...}: After jumping out of the loop like this, i stays at 5
2. @each
Use a style block for each item in the list:@each $item in you, me, he {...}
3. @if
Syntax: @if condition {...}, like other programming languages, you can connect any number of @else if condition {...}blocks, and at most one @else {...}block can be connected at the end.
V. Summary
The script properties of Sass can help us automate calculations and process many things, such as the calculation of related values. You no longer have to press the calculator to calculate a value and fill it in css, or when you need to modify a value, you need to re- After all the new values are calculated and filled in, Sass calculates it for you, helping you to quickly modify it.
The most attractive of these is the color function of Sass, which bids farewell to the tedious process of selecting colors in some color tools, then creating color matching, modifying the color selection, copying color values, and then applying them to see the effect. Even when you are familiar with some color theory After matching the color circle, you can completely convert the color you need with the code in the code editor, and then go to the browser to see the effect is just to confirm your color matching, Sass generates other color matching based on the existing color (such as changing Change the lightness, saturation, etc.), it is easy to help you generate a good set of colors.
So far, the basic Sass features and advanced scripting features introduced are enough to handle most of the work in production. If you have other needs, you can try to read the Sass documentation. Of course, if you want to be more "lazy" and more convenient, then the Sass framework can be used. Next, we will talk about a framework of Sass, Compass, to see how it can help us do our best on the basis of Sass. Some of the style design patterns that are often encountered.