Dəyişənlər
Sass-da dəyişənin elan olunması:
təkcə bir dəyişən üçün:
$mycolor: #005DFF
// çağırırıq
body {
background-color: $mycolor;
}
müxtəlif dəyişənin bir yerdən çağırılması:
$colors: (
primary: #005DFF,
accent: #FFF6BB
);
// çağırırıq
body {
background-color: map-get($colors, primary);
}
Funksiya
@function color($color-name) {
@return map-get($colors, $color-name);
}
Mixin
Əgər funksia return
ilə bir dəyəri qaytarırsa mixinlər istənilən sətri dəyər kimi qaytarırı
@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}
@mixin horizontal-list {
@include reset-list;
li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}
nav ul {
@include horizontal-list;
}
css-də nəticə
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
margin-left: -2px;
margin-right: 2em;
}
Paylaşılan sass dəyərlər (shared sass values)
%btn {
display: inline-block;
border-radius: 5px;
padding: 8px 20px;
&:hover {
transform: scale(.98);
}
}
.btn-primary {
@extend %btn;
color: blue;
}
.btn-secondary {
@extend %btn;
color: red;
}
Compiled olmuş css nəticə:
.btn-primary, .btn-secondary {
display: inline-block;
border-radius: 5px;
padding: 8px 20px;
}
.btn-primary:hover, .btn-secondary:hover {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
.btn-primary {
color: blue;
}
.btn-secondary {
color: red;
}
Sass Loops
$spaceamounts : (1, 2, 3, 4, 5);
@each $space in $spaceamounts {
.m-#{$space} {
margin: #{$space}rem;
}
.p-#{$space} {
padding: #{$space}rem;
}
}
Compiled olunmuş css faylda nəticə:
.m-1 {
margin: 1rem;
}
.p-1 {
padding: 1rem;
}
.m-2 {
margin: 2rem;
}
.p-2 {
padding: 2rem;
}
.m-3 {
margin: 3rem;
}
.p-3 {
padding: 3rem;
}
.m-4 {
margin: 4rem;
}
.p-4 {
padding: 4rem;
}
.m-5 {
margin: 5rem;
}
.p-5 {
padding: 5rem;
}
Responsive-lik üçün
$desktop: 840px;
@mixin desktop {
@media (min-width: #{$desktop}) {
@content;
}
}
.ax {
@include desktop {
display: block;
}
}
CSS-də nəticə
@media (min-width: 840px) {
.ax {
display: block;
}
}
Rəylər
0