آموزش Sass

sass به شما این امکان را میدهد تا از ویژگی های یک کلاس در یک کلاس دیگر استفاده کنید.

مثال زیر قوانین تو در تو nested rules در sass را نشان میدهد:

 
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
 

در sass، سلکتورهای ul، li و a درون سلکتور nav قرار دارند (are nested).

درحالی که در CSS، قوانین یک به یک تعریف میشوند:

 
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
 

بخاطر ویژگی تو در تو، کدهای sass خواناتر از CSS میباشد.

پراپرتی های تو در تو در sass

خیلی از پراپرتی های CSS پیشوند یکسانی دارند، مانند font-family، font-size و font-weight یا text-aign، text-transform و text-overflow.

در sass میتوانید آنها را بصورت یک پراپرتی تو در تو بنویسید.

 
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  wight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}
 

sass دستورات بالا را به CSS تبدیل خواهد کرد:

 
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  font-weigt: bold;
 
  text-align: center;
  text-transform: lowercase;
  text-overflow: hidden;