scss 更方便的sass mixins
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 更方便的sass mixins相关的知识,希望对你有一定的参考价值。
// Set all transitions across browsers
@mixin transition($property: all, $duration: .4s, $easing: ease-in-out) {
-webkit-transition: $property, $duration, $easing;
-moz-transition: $property, $duration, $easing;
-ms-transition: $property, $duration, $easing;
-o-transition: $property, $duration, $easing;
transition: $property, $duration, $easing;
}
// Set drop shadows on elements
@mixin box-shadow($top, $left, $blur, $color, $inset: false, $spread: 0) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $spread $color;
-o-box-shadow:inset $top $left $blur $spread $color;
-moz-box-shadow:inset $top $left $blur $spread $color;
box-shadow:inset $top $left $blur $spread $color;
} @else {
-webkit-box-shadow: $top $left $blur $spread $color;
-o-box-shadow: $top $left $blur $spread $color;
-moz-box-shadow: $top $left $blur $spread $color;
box-shadow: $top $left $blur $spread $color;
}
}
// Sets rounded corners on elements
@mixin rounded($radius: 0.3em) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
// Sets shadows on text if desired
@mixin text-shadow($top: 0, $left: 1px, $blur: 1px, $color: rgba(0,0,0,.3)) {
text-shadow: $top $left $blur $color;
}
//cross browser opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
// set a rem font size with a pixel fallback
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
// USAGE
p {
@include font-size(14px)
}
//BREAKPOINTS
@mixin bp-large {
@media only screen and (max-width: 60em) {
@content;
}
}
@mixin bp-medium {
@media only screen and (max-width: 40em) {
@content;
}
}
@mixin bp-small {
@media only screen and (max-width: 30em) {
@content;
}
}
// USAGE
.sidebar {
width: 60%;
@include bp-small {
width: 100%;
}
}
// KEYFRAMES CROSSBROWSER
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
// USAGE
@include keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
.element {
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
}
以上是关于scss 更方便的sass mixins的主要内容,如果未能解决你的问题,请参考以下文章
scss 方便的sass mixin用于媒体查询
scss 简单的“Hocus”Sass @mixin:悬停和:聚焦伪。使它们更容易编写,您永远不会忘记同时指定它们。
scss SASS,SCSS mixins
scss SASS,SCSS,mixin:PX到EM的转换
scss sass_vertical-ALIGN-mixin.scss
scss 用于媒体查询的Sass mixins