Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you use sass scss, then you could write it once and reuse it as a simple line of code like this: </p> <p>In your sass or scss file, define mixin like this:</p> <pre><code>@mixin rounded($amount: "10px",$position: null) { @if $position != null { @if $position == "top" or $position == "bottom" { //top or bottom -webkit-border-#{$position}-left-radius: $amount; -moz-border-#{$position}-left-radius: $amount; border-#{$position}-left-radius: $amount; -webkit-border-#{$position}-right-radius: $amount; -moz-border-#{$position}-right-radius: $amount; border-#{$position}-right-radius: $amount; } @else { // top-left or top-right or bottom-left or bottom-right -webkit-border-#{$position}-radius: $amount; -moz-border-#{$position}-radius: $amount; border-#{$position}-radius: $amount; } } @else { // ALL IF EMPTY -webkit-border-radius: $amount; -moz-border-radius: $amount; border-radius: $amount; } } </code></pre> <p>Then in the scss file you can use mixin like so:</p> <pre><code> @include rounded(); /*as default 10px on all corners*/ @include rounded(15px); /*all corners*/ @include rounded(15px, top); /*all top corners*/ @include rounded(15px, bottom); /* all bottom corners*/ @include rounded(15px, top-right); /*this corner only*/ @include rounded(15px, top-left); /*this corner only*/ @include rounded(15px, bottom-right); /*this corner only*/ @include rounded(15px, bottom-left); /*this corner only*/ </code></pre> <p>This .scss code will generate this .css code:</p> <pre><code> /* as default 10px on all corners */ -webkit-border-radius: "10px"; -moz-border-radius: "10px"; border-radius: "10px"; /* all corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* all top corners */ -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; /* all bottom corners */ -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; /* top-right corner only */ -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; /* top-left corner only */ -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; /* bottom-right corner only */ -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; /* bottom-left corner only */ -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload