Các câu lệnh thường dùng trong SASS
$width: 50px;
$key: oadding;
@mixin box ($pd, $bc, $br, $ta, $circle: false) {
#{padding}: $pd;
background-color: $bc;
border-radius: $br;
text-align: $ta;
@if $circle == true {
border-radius: 50%;
} else {
border-radius: $br;
}
}
.header {
@include box(50px, grey, 20px, center, true);
&-text {
font: {
family: "arial";
size: 50px;
wight: 400;
}
}
&:hover &-text {
color: white;
}
}
.header1 {
@include box(75px, deeppink, 20px, center);
&-text {
@extend .header-text // extends
}
&:hover &-text {
color: white;
}
}
%common { // placeholder
background: #00e5ff;
height: 20px;
border-radius: 10px;
text-align: center;
margin: 5px;
}
// each
$sizes: 20, 50, 100;
@each $size in $sizes {
.nav-#{$size} {
width: $size * 3px;
@extend %common;
}
}
// map
$size: (
20: 20px,
50: 50px,
100: 100px,
);
$each $key, $value in $sizes1 {
.nav-#{$key} {
width: $value * 3p;
@extend %common;
}
}
// for
$for $i from 1 to 5 {
.content:nth-child(#{$i}) {
opacity: $i * 0.1;
}
}
// while
$while $i < 5 {
.content:nth-child(#{$i}) {
opacity: $i * 0.1;
}
$i= $i + 1;
}
// append
$list: 1px, 2px, 3px;
$newList: append($list, 4px); // push 4 vao list moi
// nth
$item-item: set-nth($list, 1, 3px); // thay doi gia tri
// length
$length: length($list);
// nao-get, map-remove, map-merge, map-values
$map: (long: 50px, medium: 30px, short: 10px);
$map2: (long2: 50px, medium2: 30px, short2: 10px);
// map-get
$map: map-get($map, short);
// map-remove
$remove: map-remove($map, long);
// map-merge
$merge: map-merge($map, $map2);
// map-values
$value: map-value($map)
Hi 😀🤣😄
Trả lờiXóa