Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you an example analysis of the CSS framework sass. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The file at the end of sass has stricter format requirements, and the scss file is closer to the native css.

Such as sass files

CSS

# main

Color: # fff

&-sidebar

Border: 1px solid

Equivalent to scss

CSS

# main {

Color: black

&-sidebar {border: 1px solid;}

}

Compiled for

The one that represents the parent element can only appear in the header, otherwise it cannot be parsed.

Nested attribut

CSS

.funky {

Font: {

Family: fantasy

Size: 30em

Weight: bold

}

}

Compile to

CSS

.funky {

Font-family: fantasy

Font-size: 30em

Font-weight: bold;}

This is useful for some complex css3 attributes, such as animate

String interpolation

Use # {} as a selector variable

CSS

$name: foo

$attr: border

P.# {$name} {

# {$attr}-color: blue

}

P {

$font-size: 12px

$line-height: 30px

Font: # {$font-size} / # {$line-height}

}

In the second example, if you don't use the literal quantity, 12 divided by 30.

Operator

CSS

P {

Width: 1in + 8pt

}

If the unit can be converted, it will be converted automatically.

Compiled to:

CSS

P {

Width: 1.111in;}

P {

Font: 10pxamp 8px; / / Plain CSS, no division

$width: 1000px

Width: $width/2; / / Uses a variable, does division

Width: round (1.5) / 2; / / Uses a function, does division

Height: (500px/2); / / Uses parentheses, does division

Margin-left: 5px + 8pxamp 2px; / / Uses +, does division

}

Direct literals, variable usage, functions, parentheses, priority

The above is compiled as

CSS

P {

Font: 10px/8px

Width: 500px

Height: 250px

Margin-left: 9px

}

Color:

CSS

P {

Color: # 010203 + # 040506 rbg / add three digits are added

Color: # 010203 * 2ramp / multiply

Color: rgba (255,0,0,0.75) + rgba (0,255,0,0.75); / / overlay with alpha channel

Color: opacify ($translucent-red, 0.3); / / controls transparent functions to enhance non-transparency

Background-color: transparentize ($translucent-red, 0.25); / / functions that control transparency to enhance transparency

}

Default variable:

CSS

$content: "First content"

Content: "Second content?"! default

$new_content: "First time reference"! default

# main {

Content: $content

New-content: $new_content

}

! default if the variable is assigned to use the previous assignment, not assigned, assigned

The above is the example analysis of the CSS framework sass shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.