How to realize fillet by sass
This article mainly explains "how to achieve rounded corners in sass". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve rounded corners in sass".
/ / text shows the number of lines hidden =
@ mixin lines ($line:1) {
Text-overflow:-o-ellipsis-lastline
Overflow: hidden
Text-overflow: ellipsis
Display:-webkit-box
-webkit-line-clamp: $line
-webkit-box-orient: vertical
}
/ / fillet =
@ mixin radius ($radius:5px) {
-moz-border-radius:$radius
-webkit-border-radius:$radius
-o-border-radius:$radius
-ms-border-radius:$radius
-khtml-border-radius:$radius
Border-radius:$radius
}
/ / Border =
@ mixin border ($path,$size: 1pxjie type: solid,$color: # efefef) {
@ if $path = = all {
Border:$size $type $color
} @ else {
Border-# {$path}: $size $type $color
}
}
/ / Animation time =
@ mixin antime ($time:1s) {
Transition: $time
-moz-transition: $time
-webkit-transition: $time
-o-transition: $time
}
/ / Shadow =
@ mixin shadow ($shadowx:15px,$shadowy:15px, $shadowz:15px, $shadowcl:#000) {
-webkit-box-shadow: $shadowx $shadowy $shadowz $shadowcl
-moz-box-shadow: $shadowx $shadowy $shadowz $shadowcl
Box-shadow: $shadowx $shadowy $shadowz $shadowcl
}
/ / Button =
@ mixin btn ($type,$size: 1pxMagneur radius: solid,$bgcolor: # fff,$txtcolor: # 333 dagger radius: 3px) {
@ if $type = = solidbtn {/ / solid button
Border:$size $btnline $bgcolor
Background: $bgcolor
Color: $txtcolor
Border-radius: $radius
&: hover {
Background: lighten ($bgcolor,10%); / / sass color function lighten
}
&: focus {
Outline: none! important
}
} @ else if $type = = emptybtn {/ / Hollow button
Border:$size $btnline $txtcolor
Background: $bgcolor
Color: $txtcolor
Border-radius: $radius
&: hover {
Background: lighten ($bgcolor,10%); / / sass color function lighten
}
&: focus {
Outline: none! important
}
}
}
/ / Link =
@ mixin link ($cl:#333,$hovercl:#666,$visited:#999) {
Color: $cl
&: hover {
Color: $hovercl
}
&: visited {
Color: $visited
}
}
/ / Transparency =
@ mixin opacity ($opacity) {
Opacity: $opacity
$opacity-ie: $opacity * 100
Filter: alpha (opacity=$opacity-ie); / / IE8
}
At this point, I believe you have a deeper understanding of "how to achieve fillet in sass". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
