Example Analysis of CSS Framework sass
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.
