Compass module ---- Helpers, compass ---- helpers
Color Stops: when using the CSS3 gradient attribute to generate an image, in addition to declaring the starting point and ending point of the gradient line, we also declare the Color values of some intermediate points, which we call Color Stops. Add the current vertex position to a color value. Color Stops helper function automatically calculates and outputs the vertex position when we omit the vertex position representation.
Colors: Used to brighten and adjust a color value (rarely used)
Constants:
Cross Browser: if we want to contribute a new Cross-Browser CSS plug-in
Display Helpers: Only one helper function with the value of inline and block
Environment Helpers: obtains the Environment information of the current compilation.
Example: compass-env ();
Returns the current compass compilation environment. There are only two possible results for function execution ('Development'Or'Production') One is the development environment and the other is the production environment. Some of the two compass actions are different. For example, you can modify the annotation information in the config. rb file:
line_comments = false;
View the compiling environment: @ debug compass-env ();
Use the production environment forcibly in the command line:
compass compile -e production --force
-E:Used to specify the compiling environment.
-- Force: Overwrite existing files with compass
You can specify the compiling environment in config. rb:
Environment =: production or: development
Font Files: configure the font path for the Font file config. rb: fonts_dir = "fonts ";
Image Dimensions: contains two helpers used to calculate the width and height of an Image.
Inline Data: Convert the file into a base64 encoded format embedded in our CSS file
Math: helper of some mathematical computing
Selectors: A nested selector combination function, and a selector superposition combination function.
Example: append-selector ($ selector, $ to-append)
There are two parameters.Second ParameterOverlayCombined into the firstUsed in the selector position.
1 #{append-selector("p, div, span", ".bar")}{2 color: #ccc;3 }
Compiled as CSS:
1 p.bar, div.bar, span.bar {2 color: #ccc;3 }
Sprites: helpers related to the Union Graph
URLs: