Sass یا LESS ؟

نصب و راه اندازی

 

اکستنشن ها

زبان

کدنویسی تو در تو

nav {
    margin: 50px auto 0;
    width: 788px;
    height: 45px;
    ul {
        padding: 0;
        margin: 0;
    }
}

nav {
    margin: 50px auto 0;
    width: 788px;
    height: 45px;
    ul {
        padding: 0;
        margin: 0;
    }
border: {
    style: solid;
    left: {
      width: 4px;
      color: #333333;
    }
    right: {
      width: 2px;
      color: #000000;
    }
  }
}

nav {
  margin: 50px auto 0;
  width: 788px;
  height: 45px;
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #333333;
  border-right-width: 2px;
  border-right-color: #000000;
}
nav ul {
  padding: 0;
  margin: 0;
}

Mixin ها و وراثت در سلکتورهای CSS

@mixin border-radius ($values) {
    border-radius: $values;
}
nav {
    margin: 50px auto 0;
    width: 788px;
    height: 45px;
    @include border-radius(10px);
}

.border(@radius) {
    border-radius: @radius;
}
nav {
    margin: 50px auto 0;
    width: 788px;
    height: 45px;
    .border(10px);
}

.circle {
    border: 1px solid #ccc;
    border-radius: 50px;
    overflow: hidden;
}
.avatar {
    @extend .circle;
}

.circle, .avatar {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}

پیغام های خطا