SASS 多个 类 相同和不同 css
SASS multiple classes share same and different css
我有 3 个 html 个元素
<div id="top-bg-animate-0"></div>
<div id="top-bg-animate-1"></div>
<div id="top-bg-animate-2"></div>
两者具有相同的css
#top-bg-animate-0,
#top-bg-animate-1,
#top-bg-animate-2 {
position:absolute;
top:0; left:0;
width:100%;
bottom:-50%;
display:block;
background-size:cover;
background-position:top left;
background-repeat:no-repeat;
opacity:0;
}
也很独特 css
#top-bg-animate-0 {
background-image:url(../images/level3.png);
transform:translateY(-20%);
-webkit-transform:translateY(-20%);
transition:opacity 1s, visibility 1s, transform 10s;
-webkit-transition:opacity 1s, visibility 1s, transform 10s;
}
#top-bg-animate-1{
background-image:url(../images/level2.png);
transform:translateY(-30%);
-webkit-transform:translateY(-30%);
transition:opacity 1s, visibility 1s, transform 9s;
-webkit-transition:opacity 1s, visibility 1s, transform 9s;
}
#top-bg-animate-2 {
background-image:url(../images/level1.png);
transform:translateY(-30%);
-webkit-transform:translateY(-30%);
transition:opacity 1s, visibility 1s, transform 6s;
-webkit-transition:opacity 1s, visibility 1s, transform 6s;
}
我想用 SAAS 的方式写这个也许 mixins
会帮助我,但我也不知道如何嵌套 类 就像 class1,class2,class3
我卡住帮助我出去!
你可以使用这个 mixin,它接受 类 的映射(列表)及其样式,以及所有样式的通用样式。
// a mixin that accepts a $defs parameter.
@mixin bg-animations($defs) {
// for simplicity, a sass map is basically an array.
// check the typeof to be map.
@if type-of($defs) == "map" {
// if the map $defs has a key "common"
@if map-has-key($defs, common) {
// save common in a variable called $common
$common: map-get($defs, common);
// "map-remove" removes keys and returns a new array.
// redefine $defs as itself without common.
$defs: map-remove($defs, common);
// "map-keys" returns a list of keys
// "#{}" is string interpolation, to spit all keys as classes.
#{map-keys($defs)} {
// loop over each element in $common map
@each $key, $value in $common {
// key : value. string interpolation is needed for key
// so it gets evaluated as style name
#{$key}: $value;
}
}
}
//now whether there is a common or not, its been removed from $defs
// loop over $defs which contains all class names and styles
@each $className, $styles in $defs {
// set className
#{$className} {
// loop over every style for this specific className
@each $key, $value in $styles {
#{$key}: $value;
}
}
}
}
}
你可以这样使用它:
// a map with all the classes and their styles.
// common is a preserved optional keyword for the bg-animations mixin, which puts styles for all the classes.
$defs: (
#top-bg-animate-0: (
transition: (opacity 1s, visibility 1s, transform 10s),
background-image:url(../images/level3.png),
transform:translateY(-20%)
),
#top-bg-animate-1: (
transition: (opacity 1s, visibility 1s, transform 9s),
background-image:url(../images/level2.png),
transform:translateY(-30%)
),
#top-bg-animate-2: (
transition: (opacity 1s, visibility 1s, transform 6s),
background-image:url(../images/level3.png),
transform:translateY(-30%)
),
common: (
position:absolute,
top:0,
left:0,
width:100%,
bottom:-50%,
display:block,
background-size:cover,
background-position: top left,
background-repeat:no-repeat,
opacity:0
)
);
// call bg-animations and pass the map to it.
@include bg-animations($defs);
我有 3 个 html 个元素
<div id="top-bg-animate-0"></div>
<div id="top-bg-animate-1"></div>
<div id="top-bg-animate-2"></div>
两者具有相同的css
#top-bg-animate-0,
#top-bg-animate-1,
#top-bg-animate-2 {
position:absolute;
top:0; left:0;
width:100%;
bottom:-50%;
display:block;
background-size:cover;
background-position:top left;
background-repeat:no-repeat;
opacity:0;
}
也很独特 css
#top-bg-animate-0 {
background-image:url(../images/level3.png);
transform:translateY(-20%);
-webkit-transform:translateY(-20%);
transition:opacity 1s, visibility 1s, transform 10s;
-webkit-transition:opacity 1s, visibility 1s, transform 10s;
}
#top-bg-animate-1{
background-image:url(../images/level2.png);
transform:translateY(-30%);
-webkit-transform:translateY(-30%);
transition:opacity 1s, visibility 1s, transform 9s;
-webkit-transition:opacity 1s, visibility 1s, transform 9s;
}
#top-bg-animate-2 {
background-image:url(../images/level1.png);
transform:translateY(-30%);
-webkit-transform:translateY(-30%);
transition:opacity 1s, visibility 1s, transform 6s;
-webkit-transition:opacity 1s, visibility 1s, transform 6s;
}
我想用 SAAS 的方式写这个也许 mixins
会帮助我,但我也不知道如何嵌套 类 就像 class1,class2,class3
我卡住帮助我出去!
你可以使用这个 mixin,它接受 类 的映射(列表)及其样式,以及所有样式的通用样式。
// a mixin that accepts a $defs parameter.
@mixin bg-animations($defs) {
// for simplicity, a sass map is basically an array.
// check the typeof to be map.
@if type-of($defs) == "map" {
// if the map $defs has a key "common"
@if map-has-key($defs, common) {
// save common in a variable called $common
$common: map-get($defs, common);
// "map-remove" removes keys and returns a new array.
// redefine $defs as itself without common.
$defs: map-remove($defs, common);
// "map-keys" returns a list of keys
// "#{}" is string interpolation, to spit all keys as classes.
#{map-keys($defs)} {
// loop over each element in $common map
@each $key, $value in $common {
// key : value. string interpolation is needed for key
// so it gets evaluated as style name
#{$key}: $value;
}
}
}
//now whether there is a common or not, its been removed from $defs
// loop over $defs which contains all class names and styles
@each $className, $styles in $defs {
// set className
#{$className} {
// loop over every style for this specific className
@each $key, $value in $styles {
#{$key}: $value;
}
}
}
}
}
你可以这样使用它:
// a map with all the classes and their styles.
// common is a preserved optional keyword for the bg-animations mixin, which puts styles for all the classes.
$defs: (
#top-bg-animate-0: (
transition: (opacity 1s, visibility 1s, transform 10s),
background-image:url(../images/level3.png),
transform:translateY(-20%)
),
#top-bg-animate-1: (
transition: (opacity 1s, visibility 1s, transform 9s),
background-image:url(../images/level2.png),
transform:translateY(-30%)
),
#top-bg-animate-2: (
transition: (opacity 1s, visibility 1s, transform 6s),
background-image:url(../images/level3.png),
transform:translateY(-30%)
),
common: (
position:absolute,
top:0,
left:0,
width:100%,
bottom:-50%,
display:block,
background-size:cover,
background-position: top left,
background-repeat:no-repeat,
opacity:0
)
);
// call bg-animations and pass the map to it.
@include bg-animations($defs);