ሰላም ጓዶች!

ይህ ዝርዝር መመሪያበቅድመ-ፕሮሰሰር ሳስለጀማሪዎች. እዚህ ከ Sass ቅድመ-ፕሮሰሰር ፣ ጥቅሞቹ ፣ አገባብ ጋር እንተዋወቃለን እና አጠቃቀሙን በምሳሌዎች እናስብ።

ጥሩ

በተጨማሪም

ተንተባተብ

ጉዳይ ስፖንሰር - አስተናጋጅ አጋር: partnerwp.ru

ለዚህ አጋዥ ስልጠና ሁሉንም የ Sass/CSS ምሳሌዎችን እና የተበጀውን የጉልፕ ፕሮጀክት ከ GitHub ማውረድ ይችላሉ።

ሳስበጣም የዳበረ እና የተረጋጋ የሲኤስኤስ ቅድመ-ፕሮሰሰር አንዱ ነው፣ እንዲሁም በባለሙያዎች ዘንድ በጣም ታዋቂ ከሆኑት ቅድመ-ፕሮሰሰር አንዱ ነው።

የ Sass ጥቅሞች

• የሚጣጣም የተለያዩ ስሪቶች CSS፣ በፕሮጀክትዎ ውስጥ ማናቸውንም የሲኤስኤስ ቤተ-መጻሕፍት መጠቀም ስለሚችሉበት ምስጋና ይግባውና፤
• ለማንኛውም አጋጣሚ እጅግ በጣም ብዙ የተለያዩ ተግባራት። ጥቂት የ CSS ቅድመ-ፕሮሰሰሮች እንደዚህ ባለ የበለፀገ ተግባር ሊኮሩ ይችላሉ።
• Sass በኖረባቸው ብዙ ዓመታት ውስጥ ብዙ ልምድ በመቅሰም ከቀደምቶቹ የሲኤስኤስ ቅድመ ፕሮሰሰር አንዱ ነው።
• ለገንቢው ህይወትን ቀላል የሚያደርግ የ Sass ማዕቀፎችን ለመጠቀም ጥሩ አጋጣሚ። ከእንደዚህ አይነት ማዕቀፍ ውስጥ አንዱ ቦርቦን ነው, እሱም በአንዳንድ የጄዲ እትሞች Sass ስንጽፍ እንጠቀማለን;
• አገባብ። እርስዎን የሚስማማዎትን ከሁለት አገባቦች አንዱን መምረጥ ይችላሉ-ቀላል (SASS) እና የተስፋፋ CSS-like (SCSS)።

ከሲኤስኤስ ቅድመ-ፕሮሰሰር ጋር ለመጀመሪያ ጊዜ ሳውቅ፣ እኔ፣ ልክ እንደሌሎች ብዙ ጀማሪ የድር ገንቢዎች፣ የሲኤስኤስ ቅድመ-ፕሮሰሰሮችን የመጠቀም ሃሳብ ሙሉ በሙሉ አልገባኝም። ለምን ተጨማሪ ንብርብር ይሠራሉ, አንዳንድ መሳሪያዎችን ይጠቀሙ, CSS ን ያወሳስበዋል, ብዬ አሰብኩ. ነገር ግን ከጊዜ በኋላ CSS መጻፍ ማሰቃየት መሆኑን መረዳት ጀመርኩ ቀን በኋላ, ግራጫ ተዕለት, ብዙ ድርጊቶች መድገም ነበረበት, መራጮች, ንብረቶች, እና CSS ኮድ ሙሉ ብሎኮች የሚፈለገውን ውጤት ለማግኘት መገልበጥ ነበረበት. ዛሬ ምሳሌዎችን በመጠቀም የ Sass ቅድመ ፕሮሰሰርን በመጠቀም ስራዎን እንዴት ማቃለል እንደሚችሉ፣ እድገታችሁን እንደሚያሳድጉ እና እንዲያውም ትንሽ ወይም ትንሽ ውስብስብ ተግባራትን በመፃፍ እንዴት እንደሚያዝናኑ አሳይዎታለሁ።

አካባቢን ማዘጋጀት

በዚህ ትምህርት ከ Sass ጋር ለመስራት እንደ አካባቢ፣ እንደሌሎች ትምህርቶቻችን ሁሉ፣ ለጉልፕ ተግባር አስተዳዳሪ የ Sass ስሪት እንጠቀማለን። ጉልፕ-ሳስ). ዋናውን የሩቢ ስሪት ለመጠቀም ወይም ልዩ ሶፍትዌር በመጠቀም Sassን ለማጠናቀር፣ መመሪያዎችን በቢሮ ውስጥ ማንበብ ይችላሉ። ድህረገፅ። ይህ ትምህርትበዋነኛነት ተግባራዊ ተፈጥሮ ነው፣ ስለዚህ ከፕሮጀክቱ ጋር ለመገናኘት በሚችሉ አማራጮች ላይ አንቀመጥም ፣ ጉልፕን በመጠቀም ሳስን በጣም ታዋቂ በሆነ መንገድ እናገናኘዋለን።

መጫኑን ያረጋግጡ የቅርብ ጊዜ ስሪት Node.js እና Gulp. Node.js ካልተጫነ ያውርዱት እና ይጫኑት። Node.js ን ከጫኑ በኋላ በትእዛዙ ጉልፕን ይጫኑ "npm i -g ጉልፕ"(ዊንዶውስ) ወይም "sudo npm i -g ጉልፕ"(ሊኑክስ፣ ኦኤስ ኤክስ)። አንብብ፡.

Npm i --save-dev gulp gulp-sass

Var gulp = ይጠይቃል ("ጉልፕ"), // ጉልፕ sass ያገናኙ = ፍላጎት ("ጉልፕ-ሳስ"); // የ Sass ጥቅልን ያገናኙ gulp.task ("sass" ተግባር() .scss "]) // ምንጩን ይውሰዱ.pipe (sass ((outputStyle: "expanded"))) ላይ ("ስህተት", sass.logError)) // ጉልፕ-ሳስ .ፓይፕ (ጉልፕ) በመጠቀም Sass ወደ CSS ቀይር. dest ("css")) // ውጤቱን ወደ css አቃፊ ይስቀሉ)); gulp.task ("ሰዓት", ተግባር () ( gulp.watch (["sass/**/*.sass", "sass/**/*.scss"), ["sass"]); // ይመልከቱ በ sass አቃፊ ውስጥ ከ sass ፋይሎች በስተጀርባ)); gulp.task ("ነባሪ", ["ሰዓት"]);

ወደ መስመር 6 ትኩረት ይስጡ - እዚህ ለተገኘው ፋይል የውጤት ዘይቤ አንዱን እንጠቀማለን- መክተቻ- ጎጆ, በነባሪ; ተዘርግቷል- የተስፋፋ; የታመቀ- የታመቀ ፣ መራጩ እና ንብረቶቹ በተጠማዘዙ ቅንፎች ውስጥ በአንድ መስመር ላይ ሲታዩ; የታመቀ- የታመቀ. በተጨማሪም, ለሂደቱ ምስጋና ይግባው .በር ("ስህተት"፣ sass.logError)ስህተት ከተፈጠረ የጉልፕፋይል ማስፈጸሚያ ትዕዛዝን እንደገና መጫን የለብንም እና የትኛው የ Sass ፋይል መስመር ላይ ስህተት እንዳለብን እናያለን። በምሳሌዎቹ ውስጥ የውጤት ዘይቤን እጠቀማለሁ ተዘርግቷልግልጽ ለማድረግ.

ሊኖርህ ይገባል። የሚከተለው መዋቅርበእርስዎ ውስጥ ፕሮጀክት የፋይል ስርዓት:

• የእኔ ፕሮጀክት/
  • css/
    • የተለመደ.css
  • ሳስስ/
    • የተለመደ.sass
  • መስቀለኛ_ሞዱሎች/
  • ጉልፕፋይል.js
  • ጥቅል.json

በትእዛዙ Gulpfile ን መፈጸም እንጀምራለን መጎተትበፕሮጀክት አቃፊ ተርሚናል ውስጥ.

እዚህ ሁሉንም የ Sass ፋይሎች ከማውጫው ውስጥ እንወስዳለን ሳስስ/የእርስዎን ፕሮጀክት እና የተጠናቀቀውን የሲኤስኤስ ውጤት ወደ አቃፊ ይስቀሉ css/. በተጨማሪም ፣ እዚህ ምልከታ እናቋቁማለን። ይመልከቱለ Sass ፋይሎች ለውጦች እና በራስ ሰር ወደ ሲኤስኤስ ለማቀናጀት፣ እንደዚህ አይነት ለውጦች ከተከሰቱ። የተገኘው css ፋይል በአቀማመጥ ውስጥ ተካትቷል።

የጉልፕ ፓኬጆችን ስለማዘጋጀት አንድ ነገር ካልገባህ በዚህ ምሳሌ፣ የጉልፕ መመሪያን ያንብቡ።

አካባቢያችን ከተዋቀረ በኋላ እና Sass በማውጫው ውስጥ *.sass ፋይሎችን በሚያስቀምጡበት ጊዜ በተሳካ ሁኔታ ወደ ሲኤስኤስ ከተቀየረ በኋላ ሳስስ/, በደህና መማርዎን መቀጠል እና ዛሬ በተግባር የምንተነትናቸውን ምሳሌዎች ማከናወን ይችላሉ.

Sass አገባብ

Sass 2 የአጻጻፍ ልዩነቶች፣ 2 አገባቦች አሉ፡ SASS እና SCSS። አብዛኞቹ የድሮ ስሪት Sass መጻፍ ነው የመግቢያ አገባብ. በትምህርታችን የምንጠቀመው ይህ የፊደል አጻጻፍ ነው። የዚህ አገባብ የፋይል ቅጥያ ነው። *.ሳሳ. ሁለተኛው አማራጭ አገባብ ነው, ማስፋፋት የሲኤስኤስ አገባብ , Sassy CSS. ኤስ.ሲ.ኤስ.ኤስ እንደ መደበኛ ሲኤስኤስ ነው የተፃፈው ነገር ግን በ Sass ተጨማሪ ባህሪያት የተሻሻለ ነው። የፋይል ቅጥያ በ SCSS አገባብ - *.scss.

በጣም አስፈላጊ! የመግቢያ አገባብ የጎጆ ቤት ንብረቶችን ወደ ውስጥ ለማስገባት በጣም ጥብቅ ክትትልን ይጠይቃል፣ እና በኮንሶሉ ውስጥ መስመር ሳይገልጹ ጉልፕን ወይም ስውር ስህተቶችን ሲያደርጉ ስህተቶች ካጋጠሙዎት ምናልባት ስህተቱ የተሳሳቱ ውስጠቶች ነው። ሌላ ጠቃሚ ዝርዝር - ትሮችን እንደ ውስጠ-ገብ ከተጠቀሙ, Sass ን ለመለወጥ ሲሞክሩ አቀናባሪው ስህተት ይጥላል, ይህም ከትሮች በተጨማሪ ክፍተቶችን እንደ ውስጠ-ገብ ይጠቀማል. ወይ ትሮችን ብቻ ወይም ባዶ ቦታዎችን ብቻ ትጠቀማለህ።

SASS እና SCSS አገባብ፡-

SASS - የመግቢያ አገባብ	SCSS - የኤክስቴንሽን አገባብ
$font-sck: Helvetica, sans-serif $ ዋና-ቀለም: #333 የሰውነት ቅርጸ-ቁምፊ: 100% $ ቅርጸ-ቁልል ቀለም: $ ዋና-ቀለም	$ ቅርጸ-ቁምፊ ቁልል: Helvetica, sans-serif; $ ዋና-ቀለም: # 333; አካል ( ቅርጸ-ቁምፊ: 100% $ ቅርጸ-ቁልል; ቀለም: $ ዋና-ቀለም;)

ከመሠረታዊ የአጻጻፍ ሕጎች በተጨማሪ (የተጣመመ ማሰሪያዎች, በመስመሮች መጨረሻ ላይ ሴሚኮሎኖች), SASS እና SCSS አንዳንድ ተግባራትን በመጻፍ ይለያያሉ. ስለዚህ ከበይነመረቡ ላይ ማንኛውንም ምሳሌዎች ሲጠቀሙ ይጠንቀቁ, በትክክል ምን ዓይነት አገባብ ጥቅም ላይ እንደሚውል ያረጋግጡ. ከበይነመረቡ በጣም ትልቅ ምሳሌ በ SCSS ዘይቤ ከተሰራ እና የእርስዎ ፕሮጀክት በ SASS ውስጥ ከተፃፈ መመሪያውን በመጠቀም አገባብ እና የፋይል ቅጥያውን ሳይቀይሩ ወደ ዋናው ፋይልዎ ማስመጣት ይችላሉ። @ ማስመጣት።ለምሳሌ ፋይል ካወረዱ carousel.scss, ከዚያ ከእርስዎ ጋር ማገናኘት ይችላሉ ዋና.sassመስመር @ አስመጣ "ካሮሴል". እንዲሁም * .sass ፋይሎችን ወደ main.scss ፋይል ማስመጣት ሲፈልጉ ተቃራኒውን ሁኔታ ማድረግ ይችላሉ። በእኛ ምሳሌ ከ Github, ሁሉንም ነገር እናስመጣለን _x.x.sassፋይሎችን ወደ አንድ የተለመደ.sass, x.x ከዚህ አንቀጽ የምሳሌው ርዕስ ቁጥር በሆነበት።

የመግቢያ አገባብ እንጠቀማለን።

1. CSS በ Sass ማራዘም

1.1 የኢንቨስትመንት ደንቦች

Sass ገንቢዎች የCSS ደንቦችን በሌሎች ውስጥ እንዲያስቀምጡ ትልቅ እድል ይሰጣል፣በዚህም ረጅም መራጮችን በመፃፍ/ለመቅዳት የሚጠፋውን ጊዜ በመቀነስ እና ኮዱን በይበልጥ የተዋቀረ ግልፅ ተዋረድ ያደርገዋል።

1.2 ከወላጅ መራጭ ጋር መያያዝ

አዲስ ህግ ሳይፈጥሩ መራጩን ለማራዘም ከፈለጉ ምልክቱን ተጠቅመው ተጨማሪ መራጮችን ከተጠናቀቀው መራጭ ጋር ማሰር ይችላሉ። & . በውጫዊ መልኩ ፍጡር ይመስላል ልጅ መራጭበተዋረድ ፣ ግን በመጠቀም & ልጅ ከመፍጠር ይልቅ የወላጅ መራጩን እያራዘምን ነው።

ለደንቡ ትኩረት ይስጡ አካል.ፋየርፎክስ &, ይህም በመጨረሻው ላይ ከተዘጋጀ ከአሁኑ በፊት ከማንኛውም ንጥረ ነገር አዲስ ሰንሰለት እንድናገኝ ያስችለናል & .

በተጨማሪም፣ ውሁድ መራጮችን ለመፍጠር የወላጅ ማሰርን መጠቀም ይቻላል፡-

1.3 የተከተፉ ንብረቶች

ለመመቻቸት የንብረቱን ስም ቦታ ቅጥያ ወደ ዓባሪዎች መስበር ይችላሉ። ለምሳሌ፣ ህዳግ- ከላይ, ህዳግ- ከታች ህዳግ-ግራ፣ ህዳግ- መብት አለኝ የጋራ መሬት ህዳግእና እንደሚከተለው ወደ አባሪዎች ሊከፋፈል ይችላል.

1.4 Wildcard መራጮች

አንዳንድ ጊዜ በገጽ ላይ ያሉ ብዙ አካላት አንድ አይነት የሲኤስኤስ መሰረት፣ ተመሳሳይ የንብረት ስብስብ ሲጠቀሙ አንድ ሁኔታ ይፈጠራል። እነዚህ መሰረታዊ የሲኤስኤስ ህጎች በሳስ ውስጥ በበርካታ ቦታዎች ጥቅም ላይ እንዲውሉ እንደ ዱር ካርድ መራጭ ሊታሸጉ ይችላሉ። Wildcard መራጮች የሚገመቱት መመሪያን በመጠቀም ነው። @ማራዘም.

2. SassScript

SassScript ብጁ ተለዋዋጮችን፣ ሒሳብን እና ሌሎች ተግባራትን በመጠቀም የ Sassን ችሎታዎች በከፍተኛ ሁኔታ ለማስፋት ይፈቅድልዎታል። SassScript ለ አውቶማቲክ ማመንጨትአዲስ መራጮች እና ንብረቶች.

2.1 ተለዋዋጮች በ Sass

በእርስዎ Sass ፋይል ውስጥ በማንኛውም ቦታ ጥቅም ላይ ሊውሉ የሚችሉ ተለዋዋጮችን መግለጽ መቻል በጣም ጥሩ ባህሪ ነው። ቀለሞች, ነባሪ እሴቶች, ክፍሎች, ይህ ሁሉ ወደ ተለዋዋጭ ተወስዶ ለወደፊቱ ጥቅም ላይ ሊውል ይችላል. ተለዋዋጭው እንደሚከተለው ይገለጻል. $ ስም: ዋጋ.

2.2 ክዋኔዎች ከቁጥሮች እና ሕብረቁምፊዎች + ኢንተርፖል ጋር

Sass እንደ መደመር (+)፣ መቀነስ (-)፣ ክፍፍል (/) እና ሞዱሎ (%) ባሉ ቁጥሮች ላይ መደበኛ የሂሳብ ስራዎችን እንድትጠቀም ችሎታ ይሰጥሃል። የንፅፅር ኦፕሬተሮች (<, >, <=, >=, ==,!=) ለቁጥሮችም ይደገፋሉ.

በተጨማሪም, Sass ገመዶችን የመገጣጠም (የማገናኘት) ችሎታ አለው.

ከምሳሌው እንደምንመለከተው $ summ: 10 + 20/2, የሂሳብ ስራዎችን በማከናወን ላይ ቅድሚያ ይስተዋላል - የመጀመሪያ ክፍፍል, ከዚያም መደመር. የክዋኔዎችን ቅደም ተከተል ለመወሰን, በሂሳብ ውስጥ እንደ ቅንፍ መጠቀም ይችላሉ. እባክዎ ሲጨመሩ ያስታውሱ 12 ፒክስል + 8 ፒክስል, እናገኛለን 20 ፒክስል.

እንዲሁም በመስመር 2 እና 9 ላይ ትኩረት ይስጡ ፣ እዚህ በ Sass ፋይል ውስጥ የንብረቱ ስም ፣ የመራጩ ስም ወይም በማንኛውም መስመር ላይ ባሉበት ቦታ ላይ ተለዋዋጭ እሴቶችን ለማስቀመጥ interpolation እንጠቀማለን .

መጠላለፍ- ይህ ሌሎችን በመጠቀም አዲስ እሴት ማግኘት ነው።

በ Sass ውስጥ በጣም የተለመደው የኢንተርፖላሽን አጠቃቀም ለተለዋዋጭ አዲስ እሴት "በማዋሃድ" ወደ ሌላ ተለዋዋጭ እሴት, በግንባታው በኩል ማግኘት ነው. #{} ፣ ለምሳሌ፥

በPHP ውስጥ እንደሚያደርጉት ኢንተርፖላሽን ሳይጠቀሙ ተለዋዋጭ ወደ ሕብረቁምፊ ብቻ ማስገባት አይችሉም፣ ለምሳሌ በ ድርብ ጥቅሶች. ተለዋዋጮች ወደ interpolation መጠቀም እርግጠኛ ይሁኑ.

2.3 ከአበቦች ጋር ክዋኔዎች

በ Sass ውስጥ ያሉ ቀለሞች ሊጨመሩ ፣ ሊቀነሱ ፣ ሊከፋፈሉ እና ሊባዙ ይችላሉ። ሁሉም የሂሳብ ስራዎች ለእያንዳንዱ ቀለም በተናጠል ይከናወናሉ: ቀይ, አረንጓዴ እና ሰማያዊ.

እባክዎን ያስታውሱ የ rgba ቀለሞችን ሲጨምሩ የመጨረሻው 0.75 ግልጽነት መለኪያ በገለፃው ውስጥ ከሌሎቹ የተለየ መሆን የለበትም, አለበለዚያ መጨመር አይሳካም. በምትኩ፣ በመጠቀም የrgba alpha ቻናሉን ማስተካከል ይችላሉ። ግልጽ ያልሆነእና ግልጽ ማድረግወይም የ rgba ተግባርን በመጠቀም የHEX ቀለምን ግልጽነት ይቆጣጠሩ።

3. መመሪያዎች እና ደንቦች

3.1 @ ማስመጣት።

ወደ Sass ፋይልህ ማስመጣት ትችላለህ sass, scssእና cssመመሪያን በመጠቀም ፋይሎች @ ማስመጣት።, ሁሉም ድብልቅ እና ተለዋዋጮች ማስመጣቱ በሚከሰትበት ዋናው ፋይል ውስጥ ይሰራሉ.

@import እንደ መደበኛ CSS @import ከሚከተሉት ይሰራል።

• ወደ ፋይሉ በሚወስደው መንገድ ላይ መገኘት http://;
• ፋይሉ በ በኩል ይባላል url();
• ወይም ማስመጣቱ የሚዲያ መለኪያዎችን ይዟል።

ሌላ ፋይል ሙሉ በሙሉ ወደ ዋናው የ Sass ፋይል እንዲመጣ የፋይል ቅጥያው መሆን አለበት። *.ሳሳ, *.scssወይም *.css.

እስቲ አንዳንድ ምሳሌዎችን እንመልከት።

የሚከተሉት ፋይሎች ገብተዋል። አይሆንም:

የሚከተሉት ፋይሎች ያደርጋልከውጭ የመጣ፡

ትኩረት! በአዲስ ስሪቶች ውስጥ ጉልፕ-ሳስየሲኤስኤስ ፋይሎችን ወደ Sass ለማስገባት የ.css ቅጥያውን መጥቀስ ያስፈልግዎታል

በነጠላ ሰረዞች ተለያይተው ብዙ ፋይሎችን ማስመጣት ይቻላል፡- @ አስመጣ "ራስጌ", "ሚዲያ".

ከስር ነጥብ የሚጀምሩ ፋይሎች ተጠርተዋል። ቁርጥራጮችእና በሚያስገቡበት ጊዜ የስር ምልክቶች ወይም ቅጥያዎች እንዲገለጹ አይፈልጉም። ለምሳሌ, ፋይል _header.sassበዚህ መልኩ ማስመጣት ይቻላል፡- @ አስመጣ "ራስጌ".

ማስመጣቱ የሚከሰተው መመሪያውን በገለጹበት ቦታ ላይ መሆኑን ልብ ይበሉ @ ማስመጣት።. በዚህ መሠረት አስፈላጊ በሚሆንበት ቦታ ላይ የጎጆ አስመጪዎችን ማድረግ ይቻላል-

#ዋና @ አስመጣ "ምሳሌ"

3.2 @ ስር

መመሪያ @ ስርበውስጡ ያሉትን ደንቦች ወደ ሥሩ ያነሳል, ሰንሰለቱን ከወላጅ ይሰርዛል. እዚህ ሁሉም ነገር ቀላል ነው:

በሳስ ውስጥ ያሉትን ሁሉንም መመሪያዎች አልተመለከትንም, ነገር ግን በተግባር በጣም ጥቅም ላይ የዋሉትን ብቻ ነው. ወደ Sass መመሪያዎች በጥልቀት ለመጥለቅ ፍላጎት ካለህ ሰነዶቹን ተመልከት።

4. መግለጫዎች

ሳስ መግለጫዎችን እና ተግባራትን በመጠቀም ይደግፋል የተለያዩ ሁኔታዎች, loop ትግበራዎች, ወዘተ.

4.1 @ ከሆነ () መመሪያ

መመሪያ @ ከሆነ() SassScript በተወሰኑ ሁኔታዎች እንዲተገበር ይፈቅዳል እና የሚከተለው አገባብ አለው፡

4.2 @ ለመመሪያ

@ ለየተወሰነ ጊዜ ብዛት ከቅጦች ጋር ብሎክ ያሳያል። በሂደት ጊዜ የቆጣሪ ተለዋዋጭ ማዘጋጀት ይችላሉ።

መግለጽ ትችላለህ በኩልበምሳሌው ላይ እንደተገለጸው እስከ 10 ብቻ ሳይሆን ከ1 ወደ 11 አካታች መሄድ ካለቦት ይልቅ።

4.3 @ እያንዳንዱ መመሪያ

ከቁጥሮች ይልቅ የእሴቶችን ዝርዝር ለመድገም ከፈለጉ መመሪያውን መጠቀም ይችላሉ። @እያንዳንዱ:

4.4 @ መመሪያ እያለ

@ እያለአገላለጹ እያለ በቅጥ ብሎኮች በኩል ቀለበቶች እውነት ነው።.

5. ድብልቅ

ሃግፊሽ- Sass code blocks (ወይም አብነት ሚክስክስ)፣ ክርክሮችን ሊወስድ ይችላል (አማራጭ) እና የአጻጻፍ ስልቶችን እድሎች በከፍተኛ ሁኔታ ሊያሰፋ እና ተመሳሳይ ህጎችን እና አጠቃላይ የ CSS ብሎኮችን በመተግበር ላይ ያለውን ጊዜ ሊቀንስ ይችላል። ክርክርን የሚወስድ፣ ከፍተኛ መጠን ያለው ስራ የሚሰራ እና በግብአት መለኪያው ላይ በመመስረት ውጤትን የሚያመጣ እንደ ተግባር ያለ ነገር ነው።

ድብልቅ በመመሪያ ይገለጻል። @ሚክሲን, ከማስታወቂያው በኋላ መጠቆም አለበት ስምሃግፊሽ በድብልቅ መመሪያ ተጠርቷል። @ ማካተት, ይህም ድብልቅ እና ያለፉ ግቤቶች ስም ይወስዳል, ካለ.

ጓደኞች፣ ከCSS ድርጣቢያ ቅጦች ጋር ፍሬያማ ስራ ለመስራት በቂ የሆኑትን የ Sass ዋና ባህሪያት ተመልክተናል። አንዳንድ መመሪያዎች እና ባህሪያት አልተካተቱም። ይህ መመሪያ, ነገር ግን ስለ ሁሉም የ Sass ባህሪያት ለመማር ፍላጎት ካሎት, ጠቃሚ ይሆናል.

ለጥያቄው ወዲያውኑ መልስ እሰጣለሁ - በተጠናቀቀ ድህረ ገጽ ላይ ከ Sass ቅጦች ጋር እንዴት እንደሚሠራ, የተጠናቀቀውን CSS ማርትዕ እና በኤፍቲፒ በኩል መጫን በእርግጥ አስፈላጊ ነው? አይ፣ ያንን ማድረግ አይችሉም። የአካባቢያዊ የ Sass ቅጦች ወይም የጠቅላላው ጣቢያ ቅጂ ሊኖርዎት ይገባል እና ስራውን ከጨረሱ በኋላ በኤፍቲፒ በኩል ያሰማሩ (ስቀል) ዝግጁ የሆኑ ቅጦች. ለእዚህ, የጉልፕ ጥቅል መጠቀም ይችላሉ vinyl-ftp. ወይም በኤፍቲፒ/ኤስኤፍቲፒ በኩል የተሰቀሉ ፋይሎችን ለመሰብሰብ የ Sass አካባቢን በአገልጋይዎ ላይ ያዘጋጁ።

ለዛሬ ያ ብቻ ነው። ለሰጠህው አትኩሮት እናመሰግናለን!

Sass ምንድን ነው ፣ ለምን ያስፈልጋል ፣ አቅሞቹ ፣ መጫኑ እና በፕሮጀክቶችዎ ውስጥ እንዴት እንደሚጠቀሙበት

Sass ምንድን ነው?

ሳስ(Syntactically Awesome Stylesheets) በጣም የላቁ፣ የተረጋጋ እና ባህሪ ካላቸው ቅድመ ፕሮሰሰር አንዱ ነው። በገንቢዎች መካከል በጣም ታዋቂ ነው. ሳስ የበለጠ ነው። የላቀያለው የ CSS ስሪት ብዙተጨማሪ ባህሪያት, እና Sass የተነደፈ ነው ማቅለል cascading ቅጥ ሉሆች.

የሳስ አገባብ ሁለት ዓይነቶች አሉት። SASSእና ኤስ.ኤስ.ኤስ. ኤስ.ኤስ.ኤስ.ኤስ ከሲኤስኤስ ጋር የበለጠ ተመሳሳይ ነው፣ SASS ደግሞ በሌለበት የተለየ ነው። የተጠማዘዘ ቅንፍ. የጎጆ አባሎች ገብን በመጠቀም ይተገበራሉ። እዚህ የምንጠቀመው ይህ አገባብ ነው።

ለምን Sass ያስፈልግዎታል?

Sass ለምን እንደሚያስፈልግ ለመረዳት ጥቂቶቹን እንዘርዝራቸው፡- ዕድሎች:

1. Sass መክተቻ ይፈቅዳል የሲኤስኤስ ደንቦችእርስ በእርሳቸው ውስጥ
2. የንብረት መክተቻ
3. ተለዋዋጮችን በመጠቀም
4. አርቲሜቲክ ድጋፍ
5. ስራዎች ከአበቦች ጋር
6. የ sass ፋይል የማስመጣት ችሎታ sass, scssእና cssፋይሎች
7. Mixins በመጠቀም
8. እና ብዙ ተጨማሪ

በአጭሩ, ለምን ሳስ ያስፈልግዎታል: እሱ ያፋጥናልእና ያቃልላልየእድገት ሂደት.

Sass እንዴት መጠቀም እንደሚቻል

አለ። የተለያዩ መንገዶች Sass ን መጠቀም ይጀምሩ

1. አፕሊኬሽኖችን መጠቀም (ኮዋላ ፣ ኮድኪት ፣ ኮምፓስ እና ሌሎች)
2. የትእዛዝ መስመርን በመጠቀም
3. የተግባር አስተዳዳሪዎችን መጠቀም
4. የመስመር ላይ አገልግሎቶችን በመጠቀም Sassን በቀላሉ ወደ CSS ቀይር

ለመጠቀም ያስቡበት ሳስለተግባር አስተዳዳሪ ጉልፕ. መጫኑን ከመጀመርዎ በፊት እራስዎን ከጉልፕ መሰረታዊ ነገሮች ጋር በደንብ እንዲያውቁት ይመከራል.

gulp-sass መጫን እና ማገናኘት

ተሰኪውን ለመጫን ጉልፕ-ሳስወደ ፕሮጄክታችን, በፕሮጀክት አቃፊ ውስጥ የትእዛዝ መስመርን ይክፈቱ. የሚከተለውን ትዕዛዝ እናስገባ፡-

npm i gulp - sass -- ማስቀመጥ - dev

ተሰኪው በ node_modules አቃፊ ውስጥ ይጫናል እና ተዛማጅ ግቤት ወደ pack.json ፋይል ይታከላል። ከተሳካ ጭነት በኋላ ያስፈልገናል ለመሰካትየእኛ ጥቅል በፋይል ውስጥ ጉልፕፋይል.js.

var gulp = ፍላጎት ("ጉልፕ"); sass = ተፈላጊ ("ጉልፕ-ሳስ");

አሁን አንድ ተግባር እንፍጠር sass.

መጎተት ተግባር ("sass"፣ ተግባር ()( መመለስ ጉልፕ . src ( "app/sass/main.sass") "መተግበሪያ / css"));

ጉልፕ.src- ለማቀነባበር ምን እንወስዳለን?

.ቧንቧ (ሳሲ())- Sass ወደ CSS ቀይር

ሳስስ()- በቅንፍ ውስጥ መግለጽ ይችላሉ ተጨማሪ ቅንብሮች ማሳያ CSSመውጫው ላይ.
ለምሳሌ፣ sass((outputStyle:" ተዘርግቷል")) - ሙሉ በሙሉ የተስፋፋ CSS.
ሌሎች ትርጉሞች፡- መክተቻ(ነባሪ) የታመቀ- እያንዳንዱ መራጭ በርቷል የተለየ መስመር, የታመቀ- ሁሉም በአንድ መስመር.

በድንገት ስህተት ከሠራን, አንድ መልእክት በሚገኝበት ስክሪን ላይ ማሳየት እንችላለን. ይህንን ለማድረግ, እንጨምር .በር ("ስህተት"፣ sass.logError).

የፈጠርነውን ስራ እንስራ ጉልፕ-ሳስ. በትእዛዝ መስመር ውስጥ እንገባለን ጉልፕ sass.

ጉልፕ SASSን ወደ ሲኤስኤስ ቀይሮ ፋይሉን ፈጠረ ዋና.css.

አንድ ፋይል ሳይሆን ብዙ መምረጥ ከፈለጉ ሁሉንም ፋይሎች በአንድ ጊዜ መምረጥ ይችላሉ። ይህንን ለማድረግ፣ ለመለወጥ የ sass ፋይሎችን የምንመርጥበትን መስመር ትንሽ እንለውጥ፡-

መጎተት src ("app/sass/**/*.sass")

sass/**/*.ሳስ- ሁሉንም ፋይሎች መምረጥ ማለት ነው (ከቅጥያ ጋር .ሳሳ) በሁሉም የ sass አቃፊ አቃፊዎች ውስጥ።

ለማሳጠር፥ተሰኪውን አገናኘው ጉልፕ-ሳስ፣ አንድ ተግባር ፈጠረ sassእና የተጨመረው የስህተት ውጤት (አንድ ከተከሰተ). አሁን ነባሪውን ተግባር ማከናወን ይችላሉ. እነዚያ። የእኛ የታክስ ጉልፕ-ሳስ በትእዛዙ ይጀምራል መጎተት.

መጎተት ተግባር ("ነባሪ", ["sass"]);

የሚከተለውን gulpfile.js እናገኛለን

var gulp = ፍላጎት ("ጉልፕ"); var sass = ተፈላጊ ("ጉልፕ-ሳስ"); መጎተት ተግባር ("sass"፣ ተግባር ()( መመለስ ጉልፕ . src ( "app/sass/**/*.sass") .dest("app/css"))); መጎተት ተግባር ("ነባሪ", ["sass"]);

ምሳሌዎችን በመጠቀም አንዳንድ የ Sass ባህሪያትን እንመልከት።

በጣም ብዙ ቁጥር ያላቸው ናቸው, በጣም ተወዳጅ የሆኑትን ብቻ እናስብ. ጋር ሙሉ ዝርዝርበኦፊሴላዊው ድር ጣቢያ ላይ ሊገኝ ይችላል.

ደንቦችን መደርደር

የንብረት መክተቻ

$ ተለዋዋጮችን በመጠቀም

የሂሳብ ስራዎች ከቁጥሮች ጋር

ከቀለም ጋር አርቲሜቲክ ስራዎች

ሳስ ይፈቅዳል css ደንቦች, እርስ በርስ መተቃቀፍ. የውስጣዊው ደንብ የሚተገበረው በውጫዊው ደንብ መራጭ ውስጥ ብቻ ነው. ይህንን ለመተርጎም ሌላ መንገድ የለም ፣ ሀረጉ ብልህ ነው ፣ ግን በእውነቱ ሁሉም ነገር ቀላል ነው ፣ ምሳሌውን ይመልከቱ-

Scss ፋይል

#ዋናው ገጽ (

ቀለም: # 00ff00;

ስፋት: 97%;

ሬድቦክስ (

ዳራ-ቀለም: #ff0000;

ቀለም: # 000;

የተቀናበረ CSS

1 2 3 4 5 6 7 8

#ዋናው ገጽ (

ቀለም: # 00ff00;

ስፋት: 97%;

#ዋናው ፒ.ሬድቦክስ (

ዳራ-ቀለም: #ff0000;

ቀለም: # 000;

ይህ የወላጅ መራጩን ላለመድገም ይረዳል፣ እና ቡድኑን ለመረዳት በጣም ቀላል ያደርገዋል css ንብርብሮችብዙ ቁጥር ያላቸው የጎጆ መምረጫዎች. ለምሳሌ፥

Scss ፋይል

10 11 12

#ዋና (

ስፋት: 97%;

ገጽ፣ ዲቪ (

የቅርጸ-ቁምፊ መጠን: 2em;

የቅርጸ-ቁምፊ ክብደት: ደማቅ;

ቅድመ(

የቅርጸ-ቁምፊ መጠን: 3em;

የተቀናበረ CSS

11 12 13 14

#ዋና (

ስፋት: 97%;

#ዋናው ገጽ ፣

#ዋና ዲቪ (

የቅርጸ-ቁምፊ መጠን: 2em;

#ዋናው ገጽ ፣

#ዋና ዲቪ

የቅርጸ-ቁምፊ ክብደት: ደማቅ;

#ዋናው ቅድመ

የቅርጸ-ቁምፊ መጠን: 3em;

የመራጮች ወላጅ ማጣቀሻ (&)

የ Sass ገንቢዎች ለምን እንደጠሩት ግልጽ አይደለም. በአጠቃላይ, በቀላሉ ለማስቀመጥ, ይህ ለራሱ ዋቢ ተብሎ ሊጠራ ይችላል. ካልተሳሳትኩ፣ ያ ያነሰ ዶክመንቴሽን የሚጠራው ነው (ከሳሳ ብዙ ነገሮችን እንደወሰደ ላስታውሳችሁ እና ይህን ንድፍም ተበድሯል)። ብዙዎች ምናልባት ጥያቄውን ይጠይቃሉ ፣ ይህ ለምንድ ነው? ያለዚህ ግንባታ አንድ የውሸት ክፍልን ለመተግበር የማይቻል መሆኑን እንጀምር። ወይም ሌላ ምሳሌ፣ የትኛው ክፍል እንዳለው ላይ በመመስረት ሌሎች ኤለመንት ቅጦችን ማቅረብ አለብን አካል html ሰነድ. ከኦፊሴላዊው ሰነድ አንድ ምሳሌ አሳይሻለሁ።

Scss ፋይል

1 2 3 4 5 6 7 8 9 10

የቅርጸ-ቁምፊ ክብደት: ደማቅ;

ጽሑፍ-ማጌጫ: የለም;

&: ማንዣበብ (

ጽሑፍ-ማጌጫ: ከስር;

አካል .ፋየርፎክስ & (

የቅርጸ-ቁምፊ ክብደት: መደበኛ;

የተቀናበረ CSS

1 2 3 4 5 6 7 8 9 10

የቅርጸ-ቁምፊ ክብደት: ደማቅ;

ጽሑፍ-ማጌጫ: የለም;

አ: ማንዣበብ (

ጽሑፍ-ማጌጫ: ከስር;

አካል .ፋየርፎክስ ሀ (

የቅርጸ-ቁምፊ ክብደት: መደበኛ;

እኔ እንደማስበው ሁሉም ነገር በሐሰተኛ ክፍሎች ግልጽ ነው። መስመሩን ጠለቅ ብለን እንመርምር አካል.ፋየርፎክስ &. እዚህ ምን እየሆነ ነው፧ ከራስህ ጋር ያለው አገናኝ ከአንዳንድ ንጥረ ነገሮች በስተጀርባ ከታየ (እዚህ እንደ ነጠላ ሊሆን ይችላል። html ኤለመንት, እና ክፍል, መታወቂያ, ፍፁም አስፈላጊ አይደለም), ከዚያ ይህ ለአቀናባሪው ይህ ዝግጅት መደበኛውን የንጥረ ነገሮች መክተቻ እንደሚሰርዝ ይነግረዋል. አቀናባሪው እንዲህ ያለውን ንጥረ ነገር ያስወግዳል መደበኛ ዥረት. ከላይ ያለውን ምሳሌ ከተመለከቱ, css የሚጠናቀርበት ስሜት ሊሰማዎት ይችላል አካል.ፋየርፎክስ ሀ, ግን አይደለም. ለራሱ ማመሳከሪያ ክፍሉን ከክፍል ጋር ይከተላል, ስለዚህ ማጠናከሪያው ይፈጥራል አካል.ፋየርፎክስ ሀ(መደበኛ የንጥረ ነገሮች መክተቻ ተሰርዟል)። ይህ በትክክል መሠረታዊ ነገር ነው እና መረዳት አለበት። ወደ አንዳንድ ቅድመ ፕሮሰሰር የተቀየሩ ጀማሪዎች እራስን ማመሳከር እንዴት እንደሚሰራ በደንብ አይረዱም እና ብዙ ጊዜ የማይሰራ ኮድ ይፃፉ። ይህንን ማስታወስ ብቻ ያስፈልግዎታል.

Scss ፋይል

1 2 3 4 5 6 7 8 9

#ዋና (

ቀለም: ጥቁር;

የቅርጸ-ቁምፊ ክብደት: ደማቅ;

&: ማንዣበብ (

ቀለም: ቀይ;

የተቀናበረ CSS

1 2 3 4 5 6 7 8 9

#ዋና (

ቀለም: ጥቁር

#ዋናው ሀ (

የቅርጸ-ቁምፊ ክብደት: ደማቅ;

#ዋናው ሀ: ማንዣበብ (

ቀለም: ቀይ;

ከዚህ በላይ ባለው ምሳሌ ውስጥ ለራሱ ማጣቀሻው ማየት ይችላሉ &:ማንዣበብኢንቨስት አድርጓል #ዋናእና ኢንቨስት አድርጓል ሀእሱ ብቻውን ይቆማል ፣ ከፊት ለፊቱ ምንም ንጥረ ነገሮች የሉም ፣ ስለሆነም መደበኛ ጎጆ ይሠራል እና ማጠናከሪያው ያመነጫል #ዋና ሀ: ማንዣበብ.

በተለያዩ ጊዜያት ዓለም ኖረ የቴክኒክ አብዮቶች. ይህ የተከሰተበት ምክንያት ነው። በአነጋገር፣ ነሐስ እና ባም፣ የብረት ዘመን መጣ። አሁን መንኮራኩሩን ወይም ማረሻውን ማን እንደፈለሰ አናውቅም, ነገር ግን በዛን ጊዜ እነዚህ ግኝቶች በተፈጥሮ ውስጥ አብዮታዊ እና የሁለቱም የግለሰቦችን እና የሰው ልጅን ህይወት ለውጠዋል. በድሩ ሕይወት ውስጥ፣ ወይም በተለይ፣ በአቀማመጥ ንድፍ አውጪዎች ሕይወት ውስጥ፣ ሕይወታቸውን የቀየሩ እና በጥልቅ የቀየሩ ሦስት ፈጠራዎች ነበሩ። የመጀመሪያው እርግጥ ነው፣ የአጻጻፍ ስልት ሉሆችን መቅዳት ነው፣ ነገር ግን ያ በድሩ የመጀመሪያ ቀናት ነበር። ሁለተኛው jquery ነው, አሁን በ DOM ሞዴል ውስጥ መጓዝ ቀላል እና ምቹ ሆኗል, በተጨማሪም የተለያዩ ተፅዕኖዎች. እና ሦስተኛ, ይህ አስቀድሞ የበለጠ ነው ዘመናዊ ጊዜ፣ ይህ BEM ነው። አንድ ጊዜ አሪፍ ነገር ለመጻፍ ይስማሙ እና ከዚያ ያለምንም ችግር በተለያዩ ፕሮጀክቶች ላይ ይጠቀሙበት። የሚከተለው የ Sass ቋንቋ ግንባታ በዚህ ላይ ያግዝዎታል።

Scss ፋይል

1 2 3 4 5 6

#ዋና (

ቀለም: ጥቁር;

&-የጎን አሞሌ (

ድንበር: 1 ፒክስል ጠንካራ ቀይ;

የተቀናበረ CSS

1 2 3 4 5 6

#ዋና (

ቀለም: ጥቁር;

# ዋና-ጎን አሞሌ (

ድንበር: 1 ፒክስል ጠንካራ ቀይ;

ከሰነዱ አንድ ምሳሌ ወሰድኩ። በእውነተኛ ህይወት፣ BEM እንደሚለው፣ ይህ id-ik አይሆንም #ዋናሀ .ዋና, ነገር ግን ዋናው ነገር አይለወጥም. አንድ ቀላል እሰጥዎታለሁ

27.07.2017

ይህ ተከታታይ የSASS ትምህርቶች ለጀማሪዎች እና ልምድ ላላቸው ገንቢዎች የታሰበ ነው። ይህ በቅድመ-ፕሮሰሰሩ ውስጥ የሚራመድዎት፣ የሚጭነው እና ስለ አንዳንድ ባህሪያቱ የሚማርበት የአራት ክፍል አጋዥ ስልጠና የመጀመሪያው ነው።

SASS ምንድን ነው?

SASS (በአገባብ ግሩም የቅጥ ሉሆች)- በጣም ተወዳጅ ከሆኑት አንዱ. በፍጥነት እና በብቃት ኮድ እንዲያደርጉ የሚያስችልዎ የ CSS ተግባራት ስብስብ ነው። SASS ከፋየርፎክስ ፋየርቡግ ጋር መቀላቀልን ይደግፋል። ሳስስክሪፕት ተለዋዋጮችን፣ የጎጆ ዘይቤዎችን እና የተወረሱ መራጮችን እንድትፈጥር ይፈቅድልሃል።

SASS ያነሰ ለመጻፍ ፈጣን እና ቀላል ያደርገዋል (አንዳንዴ በጣም ያነሰ) የሲኤስኤስ ኮድ እና በተለዋዋጭ እንደ ፕሮግራሚንግ ቋንቋ ያስተዳድራል (በነገራችን ላይ የፕሮግራሚንግ ቋንቋ አይደለም)። ይህ ምርጥ መሳሪያየማንኛውንም ዲዛይነር እና ገንቢ የስራ ሂደት ሊያፋጥን የሚችል የበለጠ ተግባራዊ እና ንጹህ CSS ለመጻፍ።

ለምን SASS ያስፈልግዎታል?

Bootstrap፣ Materialize እና ፋውንዴሽን ጨምሮ አብዛኛዎቹ የፊት-መጨረሻ ማዕቀፎች የተገነቡት በዚህ እጅግ በጣም ጥሩ ቅድመ-ፕሮሰሰር ነው። SASS ማወቅ የእነዚህን ማዕቀፎች ተጨማሪ ባህሪያት እንድትጠቀም ያግዝሃል።

SASS ን እንዴት መጠቀም እንደሚቻል?

SASS መጠቀም ለመጀመር ቀላል እና ፈጣን የሚያደርጉ ብዙ አፕሊኬሽኖች አሉ፡ CodeKit, Compass, Koala, ወዘተ. ስለእነሱ በሌሎች የመማሪያ ክፍሎች ውስጥ ይማራሉ. በዚህ ምእራፍ ውስጥ SASS ን በኮምፒዩተር ላይ ለማስኬድ ከሚያስፈልገው ውጪ ምንም አይነት አፕሊኬሽን ወይም መሳሪያ አንጠቀምም። ስለ ስርዓተ ክወናው መጨነቅ አይኖርብዎትም ምክንያቱም ሁሉም ነገር ለሁሉም ተጠቃሚዎች ግልጽ ይሆናል.

SASS ያውርዱ እና ይጫኑ

SASS ን መጫን የሚችሉት ቀድሞውኑ Ruby በተጫነበት ማሽን ላይ ብቻ ነው፡-

• Ruby በ Mac ላይ አስቀድሞ ተጭኗል፣ ስለዚህ Sass Macintosh ን ወዲያውኑ መጫን ይችላሉ።
• በዊንዶውስ ላይ ከሆኑ በመጀመሪያ Ruby ን ማውረድ ያስፈልግዎታል;
• በሊኑክስ ላይ ያለው Ruby በተገቢው የጥቅል አስተዳዳሪ፣ rbenv ወይም rvm በኩል ማውረድ ይችላል።

አንዴ Ruby ከተጫነ SASS ን በማሽንዎ ላይ መጫን ይችላሉ። የ Ruby ትዕዛዝ መስመርን እንከፍት እና SASS ን በስርዓትዎ ላይ እንጭነው፡-

Gem install sass

ከላይ ያለው ትዕዛዝ የማይሰራ ከሆነ የ sudo ትዕዛዝን መጠቀም ሊኖርብዎ ይችላል፡-

Sudo gem install sass

የ SASS ሥሪቱን ለማየት ከፈለጉ የሚከተለውን ትዕዛዝ ይጠቀሙ።

SASS ተጭኗል። የፕሮጀክት ማህደር እንፍጠር እና sass-basic እንበለው። ፍጠር መሠረታዊ htmlበሚከተለው ኮድ ፋይል ያድርጉ

የእኔ የመጀመሪያ SASS ፕሮጀክት

ሰላም ጓደኛዬ SASS እየተማርኩ ነው እና በጣም አሪፍ ነው።

አካል (ጽሑፍ-አሰላለፍ: መሃል;) h1 (ቀለም: #333;) p ( ቀለም: #666;)

አሁን የትእዛዝ መስመር/ተርሚናልን በመጠቀም ይህንን ፋይል ማጠናቀር ያስፈልግዎታል። በተመሳሳዩ ማውጫ ውስጥ የትዕዛዝ ጥያቄን እንክፈተው (የተለመደው የትዕዛዝ ጥያቄ ካልሰራ የ Ruby ትዕዛዝ ጥያቄን መጠቀም ሊኖርብዎ ይችላል)። የሚከተለውን ይተይቡ እና አስገባን ይጫኑ:

Sass -- watch style.scss:style.css

አዲስ ፋይሎች እንደተፈጠሩ ያስተውላሉ፡ style.css እና style.css.map። ልክ እንደ .css ፋይል የካርታውን ፋይል መንካት እንደማያስፈልግ ልብ ሊባል ይገባል። ማናቸውንም ለውጦች ማድረግ ከፈለጉ፣ ይህንን በ style.scss በኩል ማድረግ ይችላሉ። ቅጦችን በቀየሩ ቁጥር ይህን ሂደት መድገም አያስፈልግዎትም። በ.scss ፋይል ላይ ለውጦችን ሲያደርጉ የSASS ማጠናቀር በራስ ሰር ይሰራል።

በሚቀጥለው ምእራፍ፣ የSASS ተለዋዋጮችን እና ለምን በ SASS ውስጥ በጣም ጠቃሚ ባህሪ እንደሆኑ እንመለከታለን (እና ማንኛውም ሌላ የ CSS ቅድመ ፕሮሰሰር)።

የጽሁፉ ትርጉም፡- የ Sass ፍጹም ጀማሪ መመሪያ።
አንድሪው ቻክሌይ.

SASS ምንድን ነው?

SASSየሚል ምህጻረ ቃል ነው። በአገባብ ግሩም የቅጥ ሉሆች- ውስጥ የብረት ቋንቋ በሲኤስኤስ ላይ የተመሠረተ፣ ስሙ እንደ ሊተረጎም ይችላል። "CSS ከምርጥ አገባብ ጋር"በሃምፕተን ካትሊን የተነደፈ።

የምስረታ ሂደቱን ለማቃለል ዘዴ ነው የሲኤስኤስ ቅጦች, ይህም ኮድን የማዳበር እና ከዚያ በኋላ የመጠበቅን ስራ በእጅጉ ያቃልላል.

እርስዎ፣ ለምሳሌ፣ ለአንድ የተወሰነ ቆራጥ ደንበኛ በምታስተናግዱበት ጊዜ፣ በሌላ ለመተካት የተወሰነ የHEX ቀለም ዋጋ ለማግኘት ሙሉውን የቅጥ ፋይል ይዘት ውስጥ ማለፍ ነበረቦት? ወይም ለብዙ-አምድ አብነት የአምዱን ስፋት ለማስላት ሁልጊዜ ወደማይገኝ ካልኩሌተር መተግበሪያ ዞር ይበሉ?

SASS እርስዎን ከዚህ የዕለት ተዕለት ተግባር ለማስታገስ በእጅዎ ላይ ያሉ መሳሪያዎች አሉት። እነዚህም ያካትታሉ ተለዋዋጮች, ሃግፊሽ, መክተቻእና መራጭ ውርስ.

በመሠረቱ, የ SASS ኮድ ከሲኤስኤስ ጋር ተመሳሳይ ነው, ግን መሠረታዊው ልዩ ባህሪወዲያውኑ የሚታየው ከእያንዳንዱ የንብረት እሴት ጥንድ በኋላ ሴሚኮሎን አለመኖር እና የተጠማዘዘ ማሰሪያዎች አለመኖር ነው.

የሚከተለውን የሲኤስኤስ ኮድ እንደ ምሳሌ እንውሰድ፡-

# ሰማይ ጠቀስ_ጠቀስ ማስታወቂያ
{
ማሳያ፡ ማገድ;
ስፋት: 120 ፒክስል;
ቁመት: 600 ፒክስል;
}

#የመሪ_ቦርድ_ማስታወቂያ
{
ማሳያ፡ ማገድ;
ስፋት: 728 ፒክስል;
ቁመት: 90 ፒክስል;
}

ከዚህ SASS ጋር የሚመጣጠን፡-

# ሰማይ ጠቀስ_ጠቀስ ማስታወቂያ
ማሳያ: አግድ
ስፋት: 120 ፒክስል
ቁመት: 600 ፒክስል

#የመሪ_ቦርድ_ማስታወቂያ
ማሳያ: አግድ
ስፋት: 728 ፒክስል
ቁመት: 90 ፒክስል

SASS የኮድ ቁርጥራጮችን መደርደርን ለማመልከት የሁለት ክፍተቶችን ክፍተት (በሚቀጥለው መስመር መጀመሪያ ላይ ያስገባ) ይጠቀማል። ( *በመጨረሻው ቅንጭብጭብ ግልፅ ለማድረግ እነዚህን ቦታዎች በቀይ ዳራ ገለጽኳቸው።)

አሁን የ SASS ኮድ እንዴት እንደሚፈጠር ሀሳብ አለን ፣ ይህንን የሚያደርጉትን ጉዳዮች እንመልከት በጣም ጥሩ.

ተለዋዋጮች

በSASS ውስጥ፣ ተለዋዋጭን ለማወጅ ስሙን በ$$ ምልክት ማስቀደም አለቦት። እና የተለዋዋጭዎ ስም ፣ ቀይ ፣ ይበሉ ፣ ከዚያ ከኮሎን በኋላ የሚከተለውን እሴት ከእሱ ጋር ልንጠቁም እንችላለን-

SASS የእነዚህን አይነት ተለዋዋጮች እሴቶችን ለመለወጥ የሚያገለግሉ እንደ ጨለማ እና ማቅለል ያሉ አብሮገነብ ተግባራት አሉት።

ስለዚህ፣ በሚከተለው ምሳሌ፣ በአንቀጾች ውስጥ ያለው የቅርጸ-ቁምፊ ቀለም እንዲሁ ቀይ ይሆናል፣ ግን በ h1 ርእሶች ውስጥ ጥቅም ላይ ከዋለ የበለጠ ጠቆር ያለ ይሆናል።

$ ቀይ: # FF4848
$ ቅርጸ-ቁምፊ: 12 ፒክስል
h1
ቀለም: ቀይ

ገጽ
ቀለም፡ ጠቆር($ቀይ፣ 10%)

ጥቅም ላይ የዋሉት እሴቶች ተመሳሳይ የውሂብ አይነት እስከሆኑ ድረስ እንደ መደመር እና መቀነስ ባሉ ተለዋዋጮች የሂሳብ ስራዎችን ማከናወን ይችላሉ። ለምሳሌ, ጥቁር ቀለምን ለመተግበር ከፈለግን, እኛ ማድረግ ያለብን በኮዱ ውስጥ ቀድሞውኑ ጥቅም ላይ ከዋለው የቀለም ዋጋ መቀነስ ነው, በተለዋዋጭ ውስጥ የተከማቸ, ትንሽ ሄክሳዴሲማል HEX ዋጋ, በሉት, #101. የቅርጸ-ቁምፊውን መጠን መለወጥ አስፈላጊ በሚሆንበት ጊዜ ለጉዳዩ ተመሳሳይ ነው ፣ በ 10 ፒክስል ይጨምሩ ፣ ለዚህ ​​ደግሞ የጎደሉትን ፒክሰሎች እንጨምራለን ።

p.መደመር_እና_መቀነስ
ቀለም: $ ቀይ - # 101
የቅርጸ-ቁምፊ መጠን፡ $ ፎንሲዝ + 10 ፒክስል

መክተቻ

በ SASS ውስጥ ሁለት ዓይነት ጎጆዎች አሉ።

የመራጮች መክተቻ።

ይህ የመጀመሪያው የመክተቻ አይነት ነው, እሱም ጥቅም ላይ ከዋለው ጋር ተመሳሳይ ነው HTML ማዋቀርኮድ፡-

$ ቅርጸ-ቁምፊ: 12 ፒክስል

ተናጋሪ
.ስም
ቅርጸ-ቁምፊ፡
ክብደት: ደፋር
መጠን: $ fontsize + 10 ፒክስል
.አቀማመጥ
ቅርጸ-ቁምፊ፡
መጠን: $ fontsize

የተገኘውን የሲኤስኤስ ኮድ ከተመለከቱ, ማንኛውም አስተያየቶች አላስፈላጊ ይሆናሉ. የ.ስም ክፍሉን በ.ድምጽ ማጉያ ክፍል ውስጥ በመክተት ( * በተመሳሳይ መንገድ - በሚቀጥለው መስመር መጀመሪያ ላይ ሁለት ቦታዎችን መጠቀም) የ CSS መራጭ .speaker.ስም ተፈጥሯል። ተመሳሳይ በሆነው በሚከተለው የክፍል ስም .ቦታ , ለመጀመሪያው መራጭ ከንብረቱ መግለጫ በኋላ የሚገኘው, ይህም የሁለተኛውን መራጭ . ተናጋሪ. ቦታ መክተትን ያመጣል.

ተናጋሪ.ስም(
የቅርጸ-ቁምፊ ክብደት: ደማቅ;
የቅርጸ-ቁምፊ መጠን: 22 ፒክስል; )
.ተናጋሪ.አቀማመጥ (
የቅርጸ-ቁምፊ መጠን: 12 ፒክስል; )

የንብረት መክተቻ.

ሁለተኛው ዓይነት ጎጆ በአንድ ቅድመ ቅጥያ (*) ንብረቶችን እንዲያዋቅሩ ይፈቅድልዎታል የቅርጸ-ቁምፊ-ቤተሰብ ፣ የቅርጸ-ቁምፊ መጠን ፣ የቅርጸ-ቁምፊ-ክብደት ወይም የድንበር ዘይቤ ፣ የድንበር-ቀለም ፣ የድንበር-ራዲየስ ወዘተ):

$ ቅርጸ-ቁምፊ: 12 ፒክስል

ተናጋሪ
.ስም
ቅርጸ-ቁምፊ፡
ክብደት: ደፋር
መጠን: $ fontsize + 10 ፒክስል
.አቀማመጥ
ቅርጸ-ቁምፊ፡
መጠን: $ fontsize

ከላይ በምሳሌው ላይ የወላጅ መግለጫን እንጠቀማለን, ሁለንተናዊ ንብረት ቅርጸ-ቁምፊ: ከዚያም በአዲስ መስመር ላይ ከሁለት-ክፍተት ውስጠ-ገጽታ በኋላ የንብረቱን ሁለተኛ ክፍል እንጠቁማለን, ይህም ብዙውን ጊዜ ከሰረዝ በኋላ ይገኛል.

ማለትም, ቅርጸ-ቁምፊውን ከገለፅን: ንብረት, በርቷል ቀጣዩ መስመርከሁለት ክፍተቶች በኋላ ክብደቱ: ንብረት, ከዚያም ውጤቱ ከሚታወቀው የቅርጸ-ቁምፊ ክብደት ንብረት ጋር እኩል ይሆናል.

ተናጋሪ.ስም(
የቅርጸ-ቁምፊ ክብደት: ደማቅ;
የቅርጸ-ቁምፊ መጠን: 22 ፒክስል; )
.ተናጋሪ.አቀማመጥ (
የቅርጸ-ቁምፊ መጠን: 12 ፒክስል; )

ሞጁሉ ሰረዝን ለያዙ ንብረቶች ሁሉ ድጋፍ ይሰጣል።

እንደዚህ አይነት መክተቻ የእርስዎን CSS ኮድ ለማደራጀት እና ለማዋቀር እና አላስፈላጊ መደጋገምን ለማስወገድ ጥሩ መንገድ ነው። ( *ደረቅ- "ራስህን አትድገም" - "ራስህን አትድገም." ሁኔታዎች መቼ የሲኤስኤስ ቅርጸትአንዳንድ አካላት፣ ስልቶቻቸው ተደጋግመው እና/ወይም በሌላ ቦታ ይገለፃሉ፣ ይህም ኮዱን ለማንበብ እና ለማቆየት አስቸጋሪ ያደርገዋል).

ሃግፊሽ

ሌላው የ SASS ታላቅ ባህሪ ነው። ሃግፊሽ.

Mixins ሙሉውን የSASS ኮድ ቁርጥራጮች እንደገና እንድትጠቀም እና አስፈላጊ ከሆነ ክርክሮችን እንድታስተላልፍ ያስችልሃል። እና በአስፈላጊ ሁኔታ, እርስዎም የመጀመሪያ እሴቶቻቸውን መግለጽ ይችላሉ.

ድብልቅን ለመግለጽ በSASS ውስጥ ልዩ የሆነ ነገር ይጠቀሙ ቁልፍ ቃል@mixin ፣ በመረጡት ድብልቅ ስም ይከተላል። የክርክር ፍላጎት ካለ በቅንፍ ውስጥ ይዘርዝራቸው። የክርክሩ ነባሪ እሴቶች የሚገለጹት ድብልቅን ሲገልጹ በኮሎን ተለያይተዋል። ( *በሌላ አነጋገር ሚክስክስ የሲኤስኤስ ተግባራት ናቸው።)

ሚክስክስን የመጠቀም ሂደት በጣም ቀላል ነው - ከ @include ቁልፍ ቃል በኋላ የተፈለገውን ድብልቅ ስም ይግለጹ እና አስፈላጊዎቹን መለኪያዎች በቅንፍ ውስጥ ይግለጹ።

የሚከተለውን ምሳሌ ተመልከት።

@mixin ድንበር-ራዲየስ($መጠን: 5px) /* ድብልቅውን ይግለጹ */
-moz-border-radius: $መጠን
-webkit-border-radius: $መጠን
ድንበር-ራዲየስ: $ መጠን

h1 /* ቅልቅል ይጠቀሙ */
@የድንበር-ራዲየስን (2 ፒክስልን ይጨምራል)

ተናጋሪ
@የድንበር-ራዲየስን ያካትቱ

ይህ SASS፣ ከተጠናቀረ በኋላ፣ ከዚህ በታች ወዳለው የCSS ኮድ ይቀየራል።

h1 (
-ሞዝ-ወሰን-ራዲየስ: 2 ፒክስል;
-webkit-border-radius: 2px;
ድንበር-ራዲየስ: 2x; )

ተናጋሪ (
-ሞዝ-ወሰን-ራዲየስ: 5 ፒክስል;
-webkit-border-radius: 5px;
ድንበር-ራዲየስ: 5 ፒክስል; )

ለ h1 ራስጌ የድንበር ጥግ ራዲየስ ዋጋን በግልፅ ገለፅን ነገርግን የክፍል ስም .ስፒከር ላለው ኤለመንት ይህንን አላደረግንም ስለዚህ የ5px ነባሪ እሴት ተወስዷል።

መራጭ ውርስ.

ሌላ በጣም ጥሩየSASS አገባብ ባህሪ የመራጮች ችሎታ ለሌሎች መራጮች የተገለጹትን ሁሉንም ቅጦች የመውረስ ችሎታ ነው። ይህንን ባህሪ ለመጠቀም የ@extend ቁልፍ ቃሉን መጠቀም አለቦት፣ ከዚያም ንብረቶቹን መውረስ የሚፈልጉት መራጭ ይከተሉ፡

h1
ድንበር: 4 ፒክስል ጠንካራ #ff9aa9

ተናጋሪ
@ማራዘም h1
የድንበር ስፋት፡ 2 ፒክስል

ምን ይዘጋጃል፡-

h1,. ተናጋሪ (
ድንበር: 4 ፒክስል ጠንካራ #ff9aa9; )

ተናጋሪ (
የድንበር-ስፋት: 2 ፒክስል; )

(* የድንበር መግለጫን አስተውል፡ 4px solid #ff9aa9; ከ. ተናጋሪው መራጭ ጋር በደንቡ ውስጥ አይደገምም, ነገር ግን ይልቁንስ ሁለተኛ መራጭ ወደ መጀመሪያው ህግ ይጨመራል. በሌላ አነጋገር, ምንም ኮድ ማባዛት የለም.)

SASSን በተግባር ይሞክሩ።

በመስመር ላይ።

ሞጁሉን በመጀመሪያ በአካባቢዎ ኮምፒውተር ላይ ሳይጭኑ SASS በመስመር ላይ ሊለማመዱ ይችላሉ።

ነገር ግን ሙከራን ከመጀመርዎ በፊት, ከገጹ ግርጌ ላይ, አማራጩን ይምረጡ "የተገባ አገባብ".

በፒሲ ላይ ተጭኗል።

SASS ራሱ የ Ruby መድረክ መተግበሪያ (ጌም) ነው። ስለዚህ እሱን ለመጫን መድረኩን እራሱ እና የዚህ የፕሮግራም አወጣጥ ቋንቋ RubyGems የጥቅል አስተዳዳሪን ሳይጭኑ ማድረግ አይችሉም። የመሳሪያ ስርዓቱን እና ስራ አስኪያጁን በተሳካ ሁኔታ ከጫኑ በኋላ በኮንሶል ውስጥ የሚከተለውን ትዕዛዝ ያሂዱ:

gem install sass

የኤስኤኤስኤስ ሞጁል የ SASS ፋይሎችዎን በትእዛዝ መስመር ሁነታ ወደ CSS ቅርጸት ፋይሎች ለመለወጥ እንደ መሳሪያ ሊያገለግል ይችላል።

ይህ ለምሳሌ የሚከተለውን ትዕዛዝ በማስገባት ሊከናወን ይችላል.

sass -- sass_folder ይመልከቱ፡stylesheets_folder

sass_folder የSASS ፋይሎችን ወደያዘው አቃፊ የሚወስደው መንገድ ነው (ይህም ከ.sass ቅጥያ ጋር) እና stylesheets_folder ወደ አቃፊው የሚወስደው መንገድ ከተጠናቀረ በኋላ የ CSS ፋይሎች የሚቀመጡበት ነው። የ --watch ትዕዛዙ ሞጁሉን በተጠቀሰው አቃፊ ውስጥ ለሚደረጉ ለውጦች እንዲመለከት ይነግረዋል እና ካለ ፣ ካስቀመጣቸው በኋላ ዋናዎቹን .sass ፋይሎች ወደ ተመጣጣኝ .css ፋይሎች ይቀይሩ።

የ CSS ወደ SASS መቀልበስ።

በነባር ፕሮጀክቶችህ ውስጥ ጥቅም ላይ የዋሉትን የ"sass-convert" መገልገያ ወደዚህ ቅርጸት በመቀየር SASS መጠቀም ትችላለህ።

ይህንን ለማድረግ በትእዛዝ መስመሩ ውስጥ ይዘቱ መለወጥ ወደሚያስፈልገው አቃፊ የሚወስደውን መንገድ ያስገቡ ( * ማለትም እነሱ የሚገኙበት ወደሚፈለገው ማውጫ ብቻ ይሂዱ ምንጭ ፋይሎች ). ከዚያ ከላይ የተጠቀሰውን መገልገያ ያሂዱ እና ከሚከተሉት መለኪያዎች ጋር ያቅርቡ።

sass-convert --ከ css --ወደ sass –R.

የ -R ባንዲራ ቀዶ ጥገናውን ለማከናወን ተደጋጋሚውን መንገድ የሚገልጽበት ቦታ. እና ከእሱ በኋላ የሚቀጥለው ነጥብ. ማለት የተገኘው .sass ፋይሎች አሁን ባለው ማውጫ ውስጥ ይቀመጣሉ ማለት ነው። ( *አስፈላጊ ከሆነ፣ በነጥብ ምትክ፣ የተገኙትን ፋይሎች ለማስቀመጥ ወደሚፈልጉበት አቃፊ የሚወስደውን መንገድ መግለጽ ይችላሉ።)