SCSS සහ Sass අතර වෙනස කුමක්ද?

1920

මා කියවා ඇති දෙයින්, සාස් යනු විචල්‍ය හා ගණිත ආධාරයෙන් CSS වඩා බලවත් කරන භාෂාවකි.

SCSS සමඟ ඇති වෙනස කුමක්ද? එය එකම භාෂාවක් විය යුතුද? සමාන? විවිධ?

css sass

— bruno077
source

1885

සාස් යනු සින්ටැක්ස් දියුණුව සහිත CSS පෙර සකසනයකි. උසස් සින්ටැක්ස් හි ඇති ස්ටයිල් ෂීට් වැඩසටහන මඟින් සකසන අතර සාමාන්‍ය CSS ස්ටයිල් ෂීට් බවට පත් කරයි. කෙසේ වෙතත්, ඔවුන් කරන්නේ නෑ තැටියක CSS සම්මත ම දීර්ඝ.

CSS විචල්‍යයන් සඳහා සහය දක්වන අතර ඒවා භාවිතා කළ හැකි නමුත් පෙර සකසන විචල්‍යයන් නොවේ.

SCSS සහ Sass අතර වෙනස සඳහා, Sass ප්‍රලේඛන පිටුවේ ඇති මෙම පා the ය ප්‍රශ්නයට පිළිතුරු දිය යුතුය:

සාස් සඳහා සින්ටැක්ස් දෙකක් තිබේ. පළමුවැන්න, SCSS (Sassy CSS) ලෙස හැඳින්වෙන අතර මෙම සඳහන පුරාම භාවිතා වේ, එය CSS හි වාක්‍ය ඛණ්ඩයේ දිගුවකි. මෙයින් අදහස් කරන්නේ සෑම වලංගු CSS විලාසිතාවක්ම එකම අර්ථයක් සහිත වලංගු SCSS ගොනුවක් බවයි. මෙම සින්ටැක්ස් පහත විස්තර කර ඇති සාස් විශේෂාංග සමඟ වැඩි දියුණු කර ඇත. මෙම වාක්‍ය ඛණ්ඩය භාවිතා කරන ලිපිගොනු .scss දිගුව ඇත.

දෙවන හා පැරණි සින්ටැක්ස් , ඉන්ඩෙන්ටඩ් සින්ටැක්ස් (හෝ සමහර විට “සාස්”) ලෙස හැඳින්වේ, CSS ලිවීමේ වඩාත් සංක්ෂිප්ත ක්‍රමයක් සපයයි. එය තේරීම් කරුවන්ගේ කැදැල්ල දැක්වීමට වරහන් වලට වඩා ඉන්ඩෙන්ටේෂන් භාවිතා කරයි, සහ ගුණාංග වෙන් කිරීමට අර්ධ සළකුණු වලට වඩා නව රේඛා භාවිතා කරයි. මෙම වාක්‍ය ඛණ්ඩය භාවිතා කරන ලිපිගොනු .sass දිගුව ඇත.

කෙසේ වෙතත්, මේ සියල්ල ක්‍රියාත්මක වන්නේ අවසානයේ CSS නිර්මාණය කරන Sass pre-compiler සමඟ පමණි. එය CSS ප්‍රමිතියටම දිගුවක් නොවේ.

— ප්රජා
source

237

පහත දැක්වෙන syntax භාවිතා තෝරා විට, එකම scss, sass ඔබ හැම විටම කාරක රීති වෙනස් කිරීම සඳහා ඇති ෙහයින්ද, stackoverflow සිට CSS පිටපත් හා අලවමින් ඉඩ හා බ්රවුසර 'සංවර්ධන මෙවලම් බව මතක තබා ගන්න

— fishbone

15

: CSS3 විචල්යයන් ඇති developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

— Jersh

තවත් ගොචා: 2019-05-10 වන විට, සාස් තවමත් බහු-රේඛීය ප්‍රකාශන සඳහා සහය නොදක්වයි, එබැවින් විශාල ලැයිස්තු / සිතියම් එක්-ලයිනර් විය යුතුය, බොහෝ ක්‍රියාකාරී ඇමතුම් භාවිතා කර අර්ථ දක්වා ඇත, නැතහොත් SCSS ලිපිගොනු වල අර්ථ දක්වා ඇත. එය තවමත් සැලසුම් සහගත අංගයක් බව පෙනේ, නමුත් ඇත්ත වශයෙන්ම ක්‍රියාත්මක කිරීම පිළිබඳ කිසියම් චලනයක් තිබේද නැද්ද යන්න මට විශ්වාස නැත.

— ජෝශප් සිකෝර්ස්කි

14

@ 0x1ad2 අතර තෝරා ගැනීමක් scssසහ sassපමණක් පෞද්ගලික කැමැත්ත වඩා මේ දින වේ. scssවැනි වඩාත් ජනප්රිය CSS රාමුව භාවිතා - තවත් බොහෝ පවතින්නේ Bootstrap, Foundation, Materializeප්රධාන UI රාමුව කරුණාව ආදිය scssපුරා sassක්රියාත්මක වෙන්න, ෙකෝණික, VUE - පෙරනිමියෙන්. ඕනෑම නිබන්ධන හෝ නිරූපණ සාමාන්‍යයෙන් භාවිතා කරනුයේ scssඋදා: create-react-app facebook.github.io/create-react-app/docs/…

— Drenai

ish ෆිෂ්බෝන් මුළුමනින්ම සත්‍ය නොවේ, ඔබ හොඳ කේත සංස්කාරකයක් භාවිතා කරන්නේ නම්, එයට බ්‍රව්සර් වලින් පිටපත් කළ මෝස්තර හැසිරවිය හැකි අතර ඉන්ඩෙන්ට් කිරීමට නැවත

— ලිවිය හැකිය

622

මම සාස් නිර්මාණය කිරීමට උදව් කළ සංවර්ධකයින්ගෙන් කෙනෙක්.

වෙනස UI ය. පා ual මය බාහිරට යටින් ඒවා සමාන වේ. Sass සහ scss ගොනු එකිනෙකා ආනයනය කළ හැක්කේ මේ නිසා ය. ඇත්ත වශයෙන්ම, සාස් සතුව සින්ටැක්ස් පාර්සර් හතරක් ඇත: scss, sass, CSS සහ ඊට අඩු. මේ සියල්ලම වෙනස් වාක්‍ය ඛණ්ඩයක් වියුක්ත සින්ටැක්ස් ගසක් බවට පරිවර්තනය කරයි, එය තවදුරටත් CSS නිමැවුමට හෝ සාස්-පරිවර්තන මෙවලම හරහා වෙනත් ආකෘතියකට සකසනු ලැබේ.

ඔබ වඩාත්ම කැමති සින්ටැක්ස් භාවිතා කරන්න, දෙකම සම්පුර්ණයෙන්ම සහාය වන අතර ඔබ ඔබේ අදහස වෙනස් කළහොත් පසුව ඒවා අතර වෙනස් විය හැකිය.

— chriseppstein
source

56

මට සමාවෙන්න? මම එය නිවැරදිව කියෙව්වාද? සැස්ට ඇත්ත වශයෙන්ම අඩු ගොනු නිවැරදිව ආනයනය කළ හැකිද? මික්සින් / විචල්යයන් අතර කිසියම් සහසම්බන්ධතාවයක් තිබේද?

— pilau

8

ඔබේ කේතය කියවීමට අවශ්‍ය පුද්ගලයින් සිටින කණ්ඩායම් පරිසරයන් තුළ සම්මත CSS හා සමාන වීම වඩා වැදගත් විය හැකිය, නමුත් ඉඳහිට පමණක් වන අතර ඔවුන්ට නව වාක්‍ය ඛණ්ඩයක් ඉගෙන ගැනීමට කාලය / උනන්දුවක් නොමැත.

— c roald

5

"යූඅයි" යන්නෙහි තේරුම "භාෂාව" ද?

— djechlin

jjjechlin - ඔව්, මෙහි “UI” පිළිබඳ මගේ අර්ථ නිරූපණය වනුයේ ක්‍රමලේඛකයා මුහුණ දෙන සින්ටැක්ස් ගොනුවයි. උදා: අර්ධ

— සළකුණු

10

ඕරියන්ලෙන්සිල් යෝජනා කළ පරිදි, පිළිතුරෙහි ඇති “යූඅයි” වඩාත් පොදුවේ තේරුම් ගත හැකි යෙදුමකින් ආදේශ කළ යුතුද?

— මයිකල් ෆ්‍රයිඩ්ජිම්

384

Sass .sassගොනුව දෘශ්‍යමය වශයෙන් ගොනුවට වඩා වෙනස් ය .scss, උදා

Example.sass - sass යනු පැරණි වාක්‍ය ඛණ්ඩයයි

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - Sassy css යනු Sass 3 හි නව වාක්‍ය ඛණ්ඩයයි

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

ඕනෑම වලංගු CSS ලේඛනය සරලව දීර්ඝ වෙනස් කිරීම මගින් Sassy CSS (SCSS) පරිවර්තනය කළ හැක .cssකිරීමට .scss.

— ඇන්තුවාන් වාස්කෙස්
source

Ov නොවොකේන් +1, මම එකඟ වෙමි. සී ++ ක්‍රමලේඛකයෙකු ලෙස මම වරහන් සහ අර්ධ සළකුණු වලට කැමැත්තෙමි. BTW, මට ප්රශ්නයක් තිබෙනවා, සිට පරිවර්තනය කරන්නේ .scssකිරීමට .cssමෙන් ම .cssකිරීමට .scss?

— JW.ZG

1

ඉහත පිළිතුරු සමඟ සංසන්දනය කිරීමට මා උනන්දු වන්නේ මෙයයි ... කියවීමට කම්මැලි ය ;-)

— LYu

9

W JW.ZG, එය පරිවර්තනයක් නොවේ, ස්වදේශිකයා .cssවලංගු වේ .scss. ඔබ scss විශේෂිත කේතයක් එක් කළ විගසම, ගොනුවේ නම නැවත වෙනස් කිරීම අවලංගු css ගොනුවක් ලෙස අවසන් වේ. cssඑය හතරැස් වන අතර scssඑය සෘජුකෝණාස්රයකි. සියලුම චතුරස්රයන් සෘජුකෝණාස්රාකාර වේ, නමුත් සියලු සෘජුකෝණාස්රාකාර වර්ග නොවේ.

— ග්‍රාන්ට්

151

සාස් ( සින්ටැක්ටිකල් පුදුමාකාර ස්ටයිල් ෂීට් ) සින්ටැක්ස් දෙකක් ඇත:

අළුත්: SCSS ( Sassy CSS )
සහ පැරණි, මුල්: indent syntax, එය මුල් Sass වන අතර එය Sass ලෙසද හැඳින්වේ .

එබැවින් ඔවුන් දෙදෙනාම වෙනස් විය හැකි සින්ටැක්ස් දෙකක් සහිත සාස් පෙර සැකසුම්කරුගේ කොටසකි .

SCSS සහ මුල් සාස් අතර ඇති වැදගත්ම වෙනස :

SCSS :

සින්ටැක්ස් CSS වලට සමානයි (සෑම සාමාන්‍ය වලංගු CSS3 ද වලංගු SCSS වේ , නමුත් අනෙක් දිශාවේ සම්බන්ධතාවය පැහැදිලිවම සිදු නොවේ)
වරහන් භාවිතා කරයි {}
අර්ධ කොලන් භාවිතා කරයි ;
පැවරුම් ලකුණ වේ :
මික්සින් එකක් නිර්මාණය කිරීම සඳහා එය @mixinවිධානය භාවිතා කරයි
මික්සින් භාවිතා කිරීම සඳහා එය @includeනියෝගයට පෙරාතුව වේ
ලිපිගොනු වල .scss දිගුව ඇත.

මුල් සාස් :

සින්ටැක්ස් රූබිට සමානයි
වරහන් නොමැත
දැඩි ඉන්ඩෙන්ෂන් නැත
අර්ධ කොලන් නොමැත
පැවරුම් ලකුණ =වෙනුවට:
මික්සින් එකක් සෑදීමට එය =ලකුණ භාවිතා කරයි
මික්සින් භාවිතා කිරීම සඳහා එය +ලකුණට පෙරාතුව වේ
ලිපිගොනු වල .sass දිගුව ඇත.

සමහර කැමති Sass , මුල් කාරක රීති - අන් අය කැමති අතර SCSS . කෙසේ හෝ වේවා , නමුත් සාස්ගේ ඉන්ඩෙන්ට් වාක්‍ය ඛණ්ඩය නොතිබූ අතර එය කිසි විටෙකත් ප්‍රතික්ෂේප නොකෙරේ .

සාස්- පරිවර්තනය සමඟ පරිවර්තනය :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass සහ SCSS ප්‍රලේඛනය

— simhumileco
source

14

එවැනි පැහැදිලි හා සංක්ෂිප්ත පිළිතුරකට අනෙක් අයට වඩා අඩු ඡන්ද ප්‍රමාණයක් තිබීම පුදුමයකි. සාස් සහ ස්කස් අතර ඇති වෙනස්කම් මොනවාදැයි වටහා ගැනීම සඳහා මම මූලාශ්‍ර රාශියක් හරහා ගොස් ඇති අතර අවසානයේ මෙය ක්ෂණිකව මා දැනුවත් කරයි. අක්ෂර වින්‍යාසය / ව්‍යාකරණ දෝෂ කිහිපයක් හැර හොඳ රැකියාවක්.

— tnkh

3

Ony ටෝනිං ස්තූතියි. මට ඔබට උදව් කිරීමට හැකිවීම ගැන මම සතුටු වෙමි. කරුණු සම්බන්ධයෙන්, එය ඉතා විශ්වාසයි, මන්ද මම ඉතා ප්‍රමාද වී පිළිතුරු දුන් නිසා - ප්‍රශ්න ඇසීමෙන් වසර 6 කට පමණ පසු. මා අක්ෂර වින්‍යාසය හෝ ව්‍යාකරණ දෝෂ ඇති කළ මාව නිවැරදි කිරීමට නිදහස් වන්න.

— simhumileco

3

විවිධ වාක්‍ය ඛණ්ඩය පෙන්වීමට සරල උදාහරණයක් එක් කරන්න, මෙම පිළිතුර පරිපූර්ණ වනු ඇත.

— හොගන්

3

පිරිසිදු පිළිතුර, ආකර්ෂණීය

— හයිඩයිට් රහ්මාන්

3

විශිෂ්ට පිළිතුර මෙයයි!

— මොහොමඩ් අෆ්රාෂ්ටේ

81

එහි වාක්‍ය ඛණ්ඩය වෙනස් වන අතර එය ප්‍රධාන ගැති (හෝ කොන්, ඔබේ ඉදිරිදර්ශනය අනුව).

අනෙක් අය පැවසූ බොහෝ දේ නැවත නොකිරීමට මම උත්සාහ කරමි, ඔබට එය පහසුවෙන් ගූගල් කළ හැකිය, ඒ වෙනුවට, මගේ අත්දැකීම් වලින් කරුණු කිහිපයක් පැවසීමට මම කැමතියි, සමහර විට එකම ව්‍යාපෘතියක පවා.

SASS pro

පිරිසිදු කරන්නා - ඔබ පැමිණෙන්නේ පයිතන්, රූබි (ඔබට සංකේත වැනි සින්ටැක්ස් සමඟ මුක්කු ලිවිය හැකිය) හෝ කෝපි ස්ක්‍රිප්ට් ලෝකයෙන් නම්, එය ඔබට ඉතා ස්වාභාවික වනු ඇත - මික්සින්, කාර්යයන් සහ සාමාන්‍යයෙන් නැවත භාවිතා කළ හැකි ඕනෑම දෙයක් ලිවීම .sassවඩා පහසුය. .scss(ආත්මීය) වලට වඩා කියවිය හැකි ය .

සාස් අවාසි

වයිට්ස්පේස් සංවේදී (ආත්මීය), මට එය වෙනත් භාෂාවලින් කමක් නැත, නමුත් මෙහි CSS හි එය මට කරදර කරයි (ගැටළු: පිටපත් කිරීම, ටැබ් එදිරිව අභ්‍යවකාශ යුද්ධය ආදිය).
පේළිගත කිරීමේ නීති නොමැත (මෙය මට ක්‍රීඩාව බිඳ body color: redදැමීමකි ), ඔබට .scss හි කළ හැකි ආකාරයට කළ නොහැකbody {color: red}
වෙනත් වෙළෙන්දන් ආනයනය කිරීම, වැනිලා සීඑස්එස් ස්නිපෙට් පිටපත් කිරීම - කළ නොහැකි නමුත් ටික කලකට පසු ඉතා කම්මැලි ය. විසඳුම වන්නේ ඔබේ ව්‍යාපෘතියේ .scssලිපිගොනු (ලිපිගොනු සමඟ .sass) තිබීම හෝ ඒවා පරිවර්තනය කිරීමයි .sass.

මේ හැර - ඔවුන් කරන්නේ එකම කාර්යයයි.

දැන්, මම කිරීමට කැමති වන්නේ හැකි නම් .sassCSS සමඟ සම්පාදනය වන මික්සින් සහ විචල්‍යයන් සහ කේත ලිවීමයි .scss(එනම් දෘශ්‍ය චිත්‍රාගාරයට සහය නොලැබෙන .sassනමුත් මම රේල්ස් ව්‍යාපෘතිවල වැඩ කරන සෑම විටම මම ඒවා දෙකක් ඒකාබද්ධ කරමි, ofc එක ගොනුවක).

මෑතකදී, මම සලකා බලන්නේ ස්ටයිලස්ට අවස්ථාවක් ලබා දීම (පූර්ණ කාලීන CSS පෙර සැකසුම් සඳහා) එය එක් ගොනුවක සින්ටැක්ස් දෙකක් ඒකාබද්ධ කිරීමට ඔබට ඉඩ සලසන බැවිනි (වෙනත් විශේෂාංග අතර). එය කණ්ඩායමකට ගත යුතු හොඳ දිශාවක් නොවිය හැකි නමුත් ඔබ එය තනිවම නඩත්තු කරන විට - එය හරි. වාක්‍ය ඛණ්ඩය සැබවින්ම නම්‍යශීලී වන්නේ වාක්‍ය ඛණ්ඩය සැක සහිත විටය.

.scssඑදිරිව .sassසින්ටැක්ස් සංසන්දනය සඳහා අවසාන මික්සින් :

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

— බිංදු
source

4

imcimmanon එහි වාසි සහ අවාසි පැහැදිලිව දක්වා ඇත. මෙය සහ වෙනත් පිළිතුරු අතර වෙනස එයයි. මම රතු පාටින් එලියට ගන්නවා. අනෙක් සෑම SO පෝස්ට් එකකම සුපුරුදු පිළිතුරු සටහනක් අතිච්ඡාදනය වුවද එය ප්‍රයෝජනවත් යැයි මම සිතුවෙමි. මාර්ග දෙකෙහි තේරීම කරන කෙනෙකුට මෙය වඩාත් ප්‍රයෝජනවත් විය හැකිය. පිළිගත් පිළිතුරට වඩා එය ටිකක් හොඳ යැයි මම සිතමි. මන්දයත් එය ඇත්ත වශයෙන්ම භාෂාවේ වෙනස පෙන්වන නිසා “සාස් වෙනස් වන්නේ එය SCSS නොවන නිසා” යැයි පැවසීම වෙනුවට එය මට නිෂ් .ල ය. පුද්ගලික භාවිත දේවල් නොමැතිව මට කළ හැකි නමුත් තවමත් :)

— coblr

62

සිට භාෂාව මුල් පිටුව

සාස්ට සින්ටැක්ස් දෙකක් තිබේ. නව ප්‍රධාන වාක්‍ය ඛණ්ඩය (සාස් 3 වන විට) “SCSS” (“Sassy CSS” සඳහා) ලෙස හැඳින්වෙන අතර එය CSS3 හි වාක්‍ය ඛණ්ඩයේ සුපිරි කට්ටලයකි. මෙයින් අදහස් කරන්නේ සෑම වලංගු CSS3 ස්ටයිල්ෂීට් එකක්ම වලංගු SCSS බවයි. SCSS ගොනු .scss දිගුව භාවිතා කරයි.

දෙවන, පැරණි සින්ටැක්ස් ඉන්ඩෙන්ට් සින්ටැක්ස් (හෝ “සාස්”) ලෙස හැඳින්වේ. හැම්ල්ගේ ආතතියෙන් පෙලඹී, එය CSS හා සමානතාවයට වඩා සංක්ෂිප්තභාවයට කැමති අය සඳහා අදහස් කෙරේ. වරහන් සහ අර්ධ සළකුණු වෙනුවට, එය කුට්ටි නියම කිරීම සඳහා රේඛා ඉන්ඩෙන්ටේෂන් භාවිතා කරයි. තවදුරටත් ප්‍රාථමික වාක්‍ය ඛණ්ඩය නොවුනත්, ඉන්ඩෙන්ට් කරන ලද සින්ටැක්ස් දිගටම සහාය දෙනු ඇත. ඉන්ඩෙන්ට් කරන ලද සින්ටැක්ස් හි ගොනු .sass දිගුව භාවිතා කරයි.

සාස් යනු CSS විහිදුවන පරිවර්ථනය කරන ලද භාෂාවකි. Sass ව්යුහය බලයි CSS (දුරස්ථව) වැනි, නමුත් එය විස්තර ටිකක් නොමඟ යවන බව මට පෙනේ; ඒක නැති CSS ආදේශනයක්, හෝ දීර්ඝ. එය අවසානයේ CSS විහිදුවන පරිවර්තකයෙකි, එබැවින් සාස් තවමත් සාමාන්‍ය CSS හි සීමාවන් ඇත, නමුත් එය සරල කේතයකින් ඒවා ආවරණය කරයි.

— බ්ලෙන්ඩර්
source

22

මූලික වෙනස වන්නේ වාක්‍ය ඛණ්ඩයයි. SASS හි සුදු පැහැති අවකාශයක් සහ අර්ධ සළකුණු නොමැති ලිහිල් වාක්‍ය ඛණ්ඩයක් ඇති අතර, SCSS CSS වලට වඩා සමාන ය.

— designNProgrammer
source

22

SASS යනු සින්ටැක්ටිකල් පුදුමාකාර ස්ටයිල් ෂීට් ය. එය CSS හි දිගුවක් වන අතර එය මූලික භාෂාවට බලය සහ අලංකාරය එක් කරයි. SASS අළුතින් SCSS ලෙස නම් කර ඇත්තේ සමහර පරිච්ඡේදයන් සමඟ වන නමුත් පැරණි SASS ද එහි ඇත. ඔබ SCSS හෝ SASS භාවිතා කිරීමට පෙර කරුණාකර පහත වෙනස බලන්න.

සමහර SCSS සහ SASS සින්ටැක්ස් සඳහා උදාහරණයක්:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

සාස්

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

සම්පාදනයෙන් පසු ප්‍රතිදානය CSS (දෙකටම සමාන)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

වැඩි මග පෙන්වීමක් සඳහා ඔබට නිල වෙබ් අඩවිය දැක ගත හැකිය .

— ශ්‍රීකෘෂ්ණා
source

16

සාස් පළමුවැන්නා වූ අතර වාක්‍ය ඛණ්ඩය ටිකක් වෙනස් ය. උදාහරණයක් ලෙස, මික්සින් ද ඇතුළුව:

Sass: +mixinname()
Scss: @include mixinname()

සාස් කැරලි වරහන් සහ අර්ධ සළකුණු නොසලකා කැදැල්ල මත තැබීම මට වඩාත් ප්‍රයෝජනවත් විය.

— පරිශීලක 3522940
source

13

SASS සහ SCSS ලිපිය අතර වෙනස විස්තරයේ වෙනස පැහැදිලි කරයි. SASS සහ SCSS විකල්පයන් සමඟ පටලවා නොගන්න, මා මුලදී වුවද, .scss යනු Sassy CSS වන අතර .Sass හි ඊළඟ පරම්පරාව වේ.

එය තේරුමක් නැතිනම් ඔබට පහත කේතයේ වෙනස දැකිය හැකිය.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

ඉහත කේතයේ අපි භාවිතා කරමු; ප්‍රකාශන වෙන් කිරීමට. මෙම කරුණ තවදුරටත් විදහා දැක්වීම සඳහා .බෝර්ඩර් සඳහා වන සියලුම ප්‍රකාශයන් එක පේළියකට එක් කර ඇත්තෙමි. ඊට හාත්පසින්ම වෙනස්ව, පහත දැක්වෙන SASS කේතය, ඉන්ඩෙන්ටේෂන් සමඟ විවිධ රේඛාවල තිබිය යුතු අතර, එයින් කිසිදු ප්‍රයෝජනයක් නොමැත.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

SCSS විලාසය පැරණි SASS ප්‍රවේශයට වඩා සාමාන්‍ය CSS වලට වඩා බොහෝ සෙයින් සමාන බව ඔබට පහත CSS වෙතින් දැක ගත හැකිය.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

මම හිතන්නේ මේ දිනවල බොහෝ විට ඔවුන් සාස් සමඟ වැඩ කරන බව යමෙකු සඳහන් කරන්නේ නම් ඔවුන් යොමු කරන්නේ සාම්ප්‍රදායික .සස් ක්‍රමයට වඩා .scss හි කර්තෘත්වය ගැන ය.

— ශයිලේෂ් වික්‍රම් සිං
source

12

මුල් පිටපත sassරූබි සින්ටැක්ස් වැනි ය, රූබි, ජේඩ් යනාදිය හා සමාන ය ...

එම සින්ටැක්ස් වලදී, අපි භාවිතා නොකරමු {}, ඒ වෙනුවට අපි සුදු අවකාශයන් සමඟ යමු, එසේම භාවිතයක් නොමැත ;...

දී scsssyntaxes වැඩි වගේ CSS, නමුත් ඒ වගේ විකල්ප ලබා සමග: කුරුල්ලන් ලැග සිටින ආදිය සමාන ප්රකාශ, lessපෙර-සැකසුම් හා වෙනත් CSS...

ඔවුන් මූලික වශයෙන් එකම දෙයක් කරන්න, නමුත් මම, පහත දැක්වෙන syntax භාවිතා වෙනස දකින්න එක් එක් පේළි කිහිපයක් තබා සලකා බලන {}, ;සහ spaces:

සාස්:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

— අලිරේසා
source

6

සංයුක්ත පිළිතුර:

SCSS යනු Sass CSS පෙර සකසනය මඟින් සහය දක්වන ප්‍රධාන වාක්‍ය ඛණ්ඩයයි .

අවසන් වන ලිපිගොනු .scssසාස් සහාය දක්වන සම්මත සින්ටැක්ස් නියෝජනය කරයි. SCSS යනු CSS හි සුපිරි කට්ටලයකි.
.sassරූබී ලෝකයේ ආරම්භ වූ සාස් විසින් සහාය දක්වන "පැරණි" සින්ටැක්ස් සමඟ අවසන් වන ලිපිගොනු නිරූපණය කරයි.

— මතතියස්
source

4

SASS යනු සින්ටැක්ටිකල් පුදුමාකාර ස්ටයිල් ෂීට් වන අතර එය CSS හි දිගුවක් වන අතර එය කැදැලි රීති, උරුමය, මික්සින් යන අංගයන් සපයන අතර SCSS යනු CSS වලට සමාන වන Sassy Cascaded Style Sheets වන අතර CSS සහ SASS අතර ඇති හිඩැස් හා නොගැලපීම් පුරවයි. එය MIT බලපත්‍රය යටතේ බලපත්‍ර ලබා දී ඇත. මෙම ලිපියේ වෙනස්කම් ගැන වැඩි විස්තර ඇත: https://www.educba.com/sass-vs-scss/

— ශෂි ඩබ්ලිව්ඩීඑන්
source