Sass-ı tez bazar öyrənmək

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;
  }
}