የሲ.ኤስ. ቅድመ-ፕሮሴሰር: አጠቃላይ እይታ, ምርጫ, ማመልከቻ

ሁሉም ልምድ ያላቸው ንድፍ አውጪዎች ቅድመ-ፕሮፕሪሰሮችን ይጠቀማሉ. ምንም ልዩነት የላቸውም. በዚህ እንቅስቃሴ መሳካት ከፈለጉ እነዚህን ፕሮግራሞች አይረሱ. በአንጻራዊነት, ለጀማሪዎች አስቀያሚ አስፈሪ አሰቃቂ ያስከትላል - እንደ ፕሮግራሙ በጣም ብዙ ነው! በእርግጥ, በአንድ ቀን ውስጥ የ CSS ቅድመ-ስራዎች ሁሉንም ችሎታዎች መረዳት ይችላሉ, እና ከሞከሩ, ለሁለት ሰዓቶች. ለወደፊቱ, ህይወታቱን በጣም ቀላል ያደርጋሉ.

የሲኤስ ኮምፕዩተር ፕሮፌሽሎች እንዴት ተገለጡ

የዚህን ቴክኖሎጂ ገፅታዎች በተሻለ ለመረዳት, በድረ ገፆች የሚታዩ ምስሎችን በማስተዋወቅ ታሪክ ውስጥ በአጭር ጊዜ ውስጥ እራሳችንን አስጠግደን.

የጅምላ ኢንተርኔት ትግበራ ሲጀምር, ምንም ቅጥ አልነበራቸውም. የሰነድ ንድፍ በአሳሾች ላይ ብቻ የተወሰነ ነው. እያንዳንዳቸው የራሳቸው የሆነ ስልቶች ነበሯቸው, እነሱም የተወሰኑትን መለያዎች ለማስተናገድ ጥቅም ላይ የዋሉ. በዚህ መሠረት ገጾቹ በየትኛው አሳሽ እንደከፈቷቸው ተለይተው ይታዩ ነበር. በውጤቱም ግራ መጋባት, ግራ መጋባት, ለገንቢዎች ችግሮች.

እ.ኤ.አ. በ 1994 የኖርዌይ ሳይንቲስት ሀኮን ሊ የጫጩን ገጽታ ከኤችቲኤምኤል ሰነድ በተናጠል ለመሥራት ሊያገለግል የሚችል የቅጥ ሉሆችን አዘጋጅቷል. ሃሳቡ ለ W3C ኮንትራክተሮች ተወካይ ተጋባዥ ሲሆን ወዲያውኑ ሥራውን ማካሄድ ጀመረ. ከጥቂት ዓመታት በኋላ የሲኤስኤል መግለጫ የመጀመሪያ ስሪት ታትሟል. ከዚያም ዘመናዊ ተሻሽሏል, የተሻሻለ ነበር ... ነገር ግን ጽንሰ-ሐሳቡ አንድ አይነት ነው-እያንዳንዱ ቅጥ አንድ የተወሰነ ባህሪ አለው.

የሲ ኤስ ኤስ ሠንጠረዦች አጠቃቀም ሁልጊዜ ችግር ፈጥሯል. ለምሳሌ, ኮድደር ብዙውን ጊዜ የመፈርደልና አደራደሮችን የመሰብሰብ ችግር ነበረው, ውርስም ቀላል አይደለም.

በዚያን ጊዜም ሁለት ሺህ አምሳ ሁለት ተቀመጠ. የባለሙያ የፊት መስመር ደንበኞች በተደጋጋሚ ተለዋዋጭነትን ማዘጋጀት ይጀምራሉ. በወቅቱ የነበረ የነበረው የሲኤስኤል ለአዳዲስ የአሳሽ ባህሪያት ቅድመ ቅጥያ እና ክትትል ይጠይቃል. ከዚያ የጃቫስክሪፕት እና የሩቢ ኤክስፐርቶች ወደ ኮምፕዩተር ተቀይረዋል, ቅድመ-ፕሮሴክሽኖችን - ተጨማሪዎች ለሲኤስኤስ አዳዲስ ባህሪያት በማከል.

CSS ለጀማሪዎች: የቅድሚያ ፕሮፐርቲስቶች

በርካታ ተግባራትን ያከናውናሉ:

• የአሳሽ ቅጥያዎችን እና የሂደቶችን ይያዙ.

• አገባብ ቀለል ያድርጉት;

• ያለምንም ስህተት ከተመረጡ መምረቶች ጋር መስራት.

• የቅንጦት አመክንዮ ያሻሽሉ.

በአጭሩ: ቅድመ አሠሪው የሲፒኤስ ችሎታዎችን የፕሮግራም አገባብ ያክላል. አሁን የደብዳቤ ልውውጥ የሚከናወነው በተለመደው የአጻጻፍ ስልት አይደለም, ነገር ግን በብዙ ቀላል አሰራሮች እና አቀራረቦች እርዳታ: ተለዋዋጮች, ተግባራት, ማይሲን, ዑደት, ሁኔታዎች. በተጨማሪም, በሂሳብ መጠቀም ተችሏል.

የእነዚህ እንደ-ሱቆች ታዋቂነት ሲታይ, W3C ቀስ በቀስ ከእነርሱ ባህሪያት ወደ የሲሲአይዲ ኮድ መጨመር ጀመረ. ለምሳሌ, የካል ካልኩ () ተግባር በተወሰነው ዝርዝር ውስጥ በብዙ አሳሾች የሚደገፍ ነው. ተለዋዋጭዎችን ማዋቀር እና የእኔxx መፍጠርን በቅርቡ እንደሚፈጥር ይጠበቃል. ሆኖም, ይህ የሚከናወነው በቅርብ ጊዜ ውስጥ ነው, እና ቅድመ-ፕሮፕሬተሮች እዚህ አሉ እናም አሁን በትክክል በመስራት ላይ ናቸው.

ታዋቂ የሲ.ኤስ.ኤስ ቅድመ-ፕሮሴስቶች. ሳስ

በ 2007 ተገንብቷል. በመጀመሪያ የሆምኤል ኤች.ቲ.ኤም. አብነት አካል ነው. የሲ ኤስ ክፍሎችን ለማስተዳደር አዲስ ባህሪያት በዙሪያው ራይስ ላይ የሚገኙትን ገንዳዎች ጣዕም እያገኙ ነው. በ Sass በቅድመ-ይሁንታ ላይ የተካተቱ እጅግ በጣም በርካታ አጋጣሚዎች ተገለጡ: ተለዋዋጮች, የመምጠጫዎች አቀማመጥ, ድብልቅ (ለምሳሌ ያህል ግን ለእነሱ ምንም ክርክር አልጨመሩም).

ተለዋዋጭዎችን በ Sass በማወጅ

ልዩነቶች የ $ ምልክት በመጠቀም ይገለጻሉ. በነሱ ውስጥ ባህሪያትን እና ስብስቦችን ማስቀመጥ ይችላሉ, ለምሳሌ: «$ borderSolid: 1px solid red»; በዚህ ምሳሌ, borderSolid የሚባለው ተለዋዋጭ (variable) እና የዋጋ 1 ፒክስል ቀይ ጥቁር በእሱ ውስጥ አስቀምጠናል. አሁን, በሲኤስ ውስጥ ከ 1 ፒክሰል ስፋት ጋር ቀያይን መፍጠር አለብን, ከንብረቱ ስም በኋላ ይሄን ተለዋዋጭ ያብራራል. መግለጫው ከተሰጠ በኋላ ተለዋዋጮች ሊለወጡ አይችሉም. ብዙ አብሮ የተሰሩ ተግባራት አሉ. ለምሳሌ, # FF5050 እሴት ያለው ተለዋዋጭ ቀይ ካርድ. አሁን, በሲኤስ ሲ, በአንድ አባል ባህሪያት ውስጥ የቅርፀ ቀለምን ለማዘጋጀት እኛ እንጠቀማለን. P {color: $ redColor; }. በቀለም መሞከር ይፈልጋሉ? ተግባሩን ጨለማ ወይም ብርሃን ይለዋውጡ. ይሄ የሚደረገው እንደዚህ ነው: p {color: darken ($ redColor, 20%); }. በዚህም ምክንያት የቀይ ቀለም ቀለሙ 20% ያነሰ ይሆናል.

ሳስ ብዙ አብሮ የተሠራ ተግባራት አሉት. ቢያንስ ከእነሱ ጋር በደንብ እንዲተዋወቁ እና የበለጠ እንዲማሩ እንመክራለን.

ጎረቤት

ቀደም ሲል አጎራባቾችን ለመጥቀስ, ረጅምና ያልተስማሙ ንድፎችን መጠቀም ነበረብን. የሐሰት ክርክር እንዳለበት አስቡት እና በምላሹም የተራዘመ ጊዜ አለው. ለ div ለመደበኛ የፒካርድ ቀለም ለፖ-ቢጫ ለስላሳ-ሮዝ ማዘጋጀት ያስፈልገናል. በተለመደው የሲኤስሲ, ይሄ እንደሚከተለው ይሰራል-

Div {

ቀለም: ቀይ;

}

Div p {

ቀለም: ቢጫ;

}

Div p span {

ቀለም: ሮዝ;

}

በ CSS ቅድመ-ፕሮፕርሽን, ሁሉም ነገር ቀላል እና ይበልጥ እምብዛም የተፈጠረ ነው:

Div {

ቀለም: ቀይ;

P {

ቀለም: ቢጫ;

.span {

ቀለም: ሮዝ;

}

}

}

ዐውደ-ጽሑፉ እያንዳንዳቸው ቃል በቃል "የተቀመጡ" ናቸው.

ቅድመ-ተያያዥ መመሪያዎች

በ @import መመሪያ, ፋይሎችን ማስመጣት ይችላሉ. ለምሳሌ, ለቅርጸ ቁምፊዎች የሚታወቁበት ቅርፀት ቅርጸ-ቁምፊ (fonts) ተብሎ የሚጠራ ፋይል አለን. ዋናውን ከዋናው ቅጥ .sass ፋይል ጋር ያገናኘናል: @import 'fonts'. ተጠናቅቋል! ከተለያዩ ቅጦች ጋር አንድ ትልቅ ፋይል ከመሆን ይልቅ አስፈላጊ የሆኑትን ባህሪያቶች በፍጥነት እና በቀላሉ ለመድረስ የሚጠቀሙባቸው ብዙ ብዙ ክፍሎች አሉን.

ድብልቆች

በጣም አስደሳች ከሆኑት ዛዲቱም አንዱ. አንድ የገጸ ባህሪያት ስብስቦች በአንድ መስመር ውስጥ እንዲገለጹ ይፈቅዳል. እንደሚከተለው ይሰሩ:

@mixin bigFont {

የቅርጸ-ቤተሰብ-'Times New Roman';

የቅርጸ ቁምፊ መጠን-64 ፒክስል;

የመስመር-ቁመት: 80px;

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

}

በገጹ ላይ ወደ አንድ አባል ለመጠቀም, የ @include መመሪያን ይጠቀሙ. ለምሳሌ, ለ h1 ራስጌ ልንጠቀምበት እንፈልጋለን. የሚከተለው ግንባታ ተገኝቷል: h1 {@include: largeFont; }

ከተቀባው ውስጥ ያሉ ሁሉም ባህሪያት ለኤለመንት h1 ይመደባሉ.

ያነሰ የቅድመ-ቆጣሪ

የ Sass አገባብ የፕሮግራሙን ያስታውሳል. ለካውንቲ የሲኤስ ተማሪዎች ተማሪዎች ይበልጥ አመቺ የሆነ አማራጭ እየፈለጉ ከሆነ, ለታችዎ ትኩረት ይስጡ. የተቋቋመው በ 2009 ነው. ዋናው ገጽታ የቤንሲ ሲቲሲ ኮምፕዩተር ድጋፍ ነው, ስለዚህ ከኮዲፐር ፕሮግራሙ ጋር የማይተዋወቁ ካልሆኑ እንግዶች ጋር ለመማር በጣም ቀላል ነው.

ልዩነቶች በ @ ምልክቱ ነው የሚታወቁት. ለምሳሌ: @fontSize: 14px;. ተመሳሳይ የሆኑ መርሆዎችን በሳይሣ ላይ በአንድ ላይ ያስተካክሉ. መዲሃኒቶች እንደሚከተለው እንደሚከተለው ተሰምቷቸዋል: .FargeFont () {ቅርጸ-ቁምፊ-ቤተሰብ: 'Times New Roman'; የቅርጸ ቁምፊ መጠን-64 ፒክስል; የመስመር-ቁመት: 80px; የቅርጸ ቁምፊ ክብደት: ደማቅ; }. ለግንኙነት, የቅድሚያ ፕሮሴክትን መጠቀም አያስፈልግዎትም - አዲስ የተፈጠረ ውህደት ለተመረጠው ኤለመንት ባህሪያት ብቻ ያክሉ. ለምሳሌ h1 {.largeFont; }.

Stylus

ሌላ ቅድመ-ፕሮሴክተር. ለዓለም ዓቀፍ ለጄይስ, ለኤክስፕረስ እና ለሌሎች ጠቃሚ ምርቶች የሰጠውን በ 2011 በተመሳሳይ ፈጣሪ የተፈጠረ.

ባህርያት በሁለት መንገዶች ሊገለጹ ይችላሉ - በግልጽ ወይንም በተዘዋዋሪ. ለምሳሌ: font = 'Times New Roman'; ውስጣዊ አማራጭ ነው. ነገር ግን $ font = 'Times New Roman' - ግልጽ. ድብልቆች ተሰብስበዋል እና በውጭ ተገናኝተዋል. አገባብ-redColor () ቀለም ቀይ ነው. አሁን ወደ አባል ደረጃ ልናክለው እንችላለን, ለምሳሌ h1 redColor ();.

በቅድሚያ, ስታይሊስ በቀላሉ ለመረዳት የማይቻል ይመስላል. «መነሻ» ቅንፍ እና ሰሚ ኮሎን ያሉት የት ነው? ነገር ግን ወደ ውስጥ ዘልለው ከገቡ, ሁሉም ነገር የበለጠ ግልጽ ይሆናል. ሆኖም ግን ከዚህ ረገም ረጅሙ (ረቂቅ) ጋር ረጅም እድገትን ("ፕሮግሴክተርስ") በመጠቀም "አይ" ይህ አንዳንድ ጊዜ ከ "ንጹሕ" ቅጦች ጋር መስራት በሚኖርበት ጊዜ ችግር ይፈጥራል.

ቅድመ አቀራረብ የትኛውን ቅድሚያን መምረጥ አለብኝ?

በእርግጥ, ነገሩ ምንም አይደለም. ሁሉም አማራጮች ተመሳሳይ እድሎችን ይሰጣሉ, የእያንዳንዱ አገባብ ግን የተለየ ነው. እንደሚቀጥሉ እንመክራለን-

• ፕሮግራም አድራጊ ከሆኑ እና እንደ ቅደም ተከተል በቅጥሮች ለመስራት ከፈለጉ Sass ይጠቀሙ;
• እርስዎ የአቀማመጥ ዲዛይን ከሆኑ እና ከተለመደው አቀማመጥ ጋር እንደ ቅጦች ጋር መስራት የሚፈልጉ ከሆነ ለትንካይ ትኩረት ይስጡ;
• ዝቅተኛነትዎን ከወደቁ Stylus ይጠቀሙ.

ለሁሉም አማራጮች የልጆችን እድገት ይበልጥ ቀላል ለማድረግ የሚስቡ በርካታ ቁጥር ያላቸው በርካታ ቤተ-መጻህፍት አሉ. የ Sass ተጠቃሚዎች ለ "ኮምፓስ" ትኩረት እንዲሰጡ ይመከራሉ - በርካታ አብሮ የተሰሩ ባህሪያት ያለው ኃይለኛ መሣሪያ. ለምሳሌ, ከተጫነ በኋላ ስለ ሻጭ ቅድመ ቅጥያ መጨነቅ አያስፈልግዎትም. ከቀላል ፍርግርግ ሥራ ጋር ቀለል ያለ ስራ. ከቀለም, ስፒሪት ጋር ለመስራት የሚያስችሉ አገልግሎቶች አሉ. በርካታ ቀድሞውኑ የተዘረዘሩ የእኔ ዝርያዎች ይገኛሉ. ይህንን መሳሪያ ለትቂት ቀናት ያስቀምጡ - ለወደፊትም ብዙ ጊዜ እና ጉልበት ስለሚያስቀምጡ.