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

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!

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.