Sass ਨਿਮਕਸ ਰੂਲਾਂ ਅਤੇ ਅਤਿਰਿਕਤ ਰੂਪ

Sass ਨਾਮਕਰਣ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

Sass ਤੁਹਾਨੂੰ HTML ਦੇ ਸਮਾਨ ਤਰੀਕੇ ਨਾਲ CSS ਚੋਣਕਰਤਾ ਨਾਮਕਰਣ ਨਾਮਕਰਣ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ。

ਇਸ ਵੈੱਬਸਾਈਟ ਨੇਵੀਗੇਸ਼ਨ ਦੇ Sass ਕੋਡ ਉਦਾਹਰਣ ਦੇਖੋ:

SCSS ਸਿਰੀਜ਼:

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 ਚੋਣਕਰਤਾ ਵਿੱਚ。

ਜਦੋਂ ਕਿ CSS ਵਿੱਚ, ਨਿਯਮ ਇੱਕ ਇੱਕ ਨਾਲ ਨਿਰਧਾਰਿਤ ਹਨ (ਨਾਮਕਰਣ ਵਿੱਚ ਨਹੀਂ):

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-align
• text-transform
• text-overflow

ਸਸ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਤੁਸੀਂ ਇਹ ਨਾਪਸਤਾ ਹੱਕਾਇਤਾਂ ਲਿਖ ਸਕਦੇ ਹੋ

SCSS ਸਿਰੀਜ਼:

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

Sass ਟਰਾਂਸਲੇਟਰ ਇਸ ਕੋਡ ਨੂੰ ਆਮ CSS ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ:

CSS ਆਉਟਪੁੱਟ:

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