მავნე პროგრამა არის შემაშფოთებელი ან საშიში პროგრამა, რომელიც...
HTML-ისა და CSS-ის დაწერის პროცესი შეიძლება გარკვეულწილად დამღლელი იყოს და მოითხოვს ბევრ ერთსა და იმავე ამოცანას. ამოცანები, როგორიცაა ტეგების დახურვა HTML-ში ან თექვსმეტობითი ფერის მნიშვნელობების ერთფეროვანი ნახვა CSS-ში.
ასეთი განსხვავებული ამოცანები, როგორც წესი, მცირეა, ოდნავ ამცირებს ეფექტურობას. საბედნიეროდ, ეს და რამდენიმე სხვა არაეფექტური ამოცანები იქნა აღიარებული და გამოწვეული წინაპროცესორების მიერ.
წინასწარი პროცესორი არის პროგრამა, რომელიც იღებს მონაცემთა ერთ ტიპს და გარდაქმნის მას სხვა მონაცემთა ტიპად. HTML და CSS-ის შემთხვევაში, ზოგიერთი უფრო პოპულარული წინასწარი პროცესორის ენაა Haml და Sass. Haml გარდაიქმნება HTML-ში, ხოლო Sass-ში გარდაიქმნება CSS-ში.
დაარსების დღიდან, ზოგიერთი ყველაზე გავრცელებული პრობლემის გადაჭრისას, Haml-მა და Sass-მა იპოვეს მრავალი დამატებითი გზა HTML და CSS-ის ძალაუფლების გასაძლიერებლად. არა მხოლოდ არაეფექტური ამოცანების მოხსნით, არამედ ისეთი მეთოდების შექმნით, რომლებიც აადვილებს და უფრო ლოგიკურს ხდის საიტის განვითარებას. წინასწარი პროცესორების პოპულარობა ასევე გამოწვეულია სხვადასხვა ჩარჩოებით, რომლებიც მხარს უჭერენ მათ; ერთ-ერთი ყველაზე პოპულარული არის კომპასი.
ჰამლი
CodeKit ასევე მხარს უჭერს სხვა წინასწარ პროცესორებს, რომლებიც შესაძლოა თქვენთვის სასარგებლოც იყოს.
დოქტიპი
Haml დოკუმენტის დაწერის პირველი ნაწილი არის იმის ცოდნა, თუ რა ტიპის დოქტიპი გამოიყენო. HTML დოკუმენტებთან მუშაობისას, ძირითადი დოკუმენტის ტიპი იქნება HTML5. Haml-ში დოკუმენტის ტიპები განისაზღვრება სამი ძახილის ნიშნით (!!!), რასაც საჭიროების შემთხვევაში მოჰყვება რაიმე კონკრეტული.
ნაგულისხმევი დოქტიპი Haml-ში არის HTML 1.0 Transitional. ასე რომ, HTML5-ის მსგავსი რომ გახადოთ, ძახილის ნიშნების შემდეგ (!!! 5) უნდა გაიაროთ ნომერი ხუთი.
დასრულებული HTML
ელემენტის დეკლარაცია
Haml-ის ერთ-ერთი განმსაზღვრელი მახასიათებელია მისი სინტაქსი და დეკლარირება და ბუდე. HTML ელემენტები, როგორც წესი, შეიცავს დაწყების და დასრულების ტეგებს, მაგრამ Haml ელემენტებს აქვთ მხოლოდ ერთი საწყისი ტეგი. ელემენტები იწყება პროცენტის ნიშნით (%), შემდეგ კი ჩაღრმავება განსაზღვრავს ბუდეს. Haml-ში ჩაღრმავება შეიძლება გაკეთდეს ერთი ან მეტი ინტერვალით, მაგრამ მნიშვნელოვანია, რომ შეწევა იგივე დარჩეს. ჩანართები და სივრცეები არ შეიძლება გაერთიანდეს ერთმანეთთან და ჩანართების ან სივრცეების იგივე რაოდენობა უნდა იყოს იგივე მთელ დოკუმენტში.
დაწყების და დასასრულის ტეგების საჭიროების აღმოფხვრა და სავალდებულო ჩაღრმავებული სტრუქტურა ქმნის ადვილად შესასრულებელ მონახაზს. დროის ნებისმიერ მომენტში, მარკირება შეიძლება გაიაროს და შეიცვალოს სირთულის გარეშე.
%body %header %h1 გამარჯობა მსოფლიო! %section %p Lorem ipsum dolor sit amet.
შედგენილი HTML
გამარჯობა მსოფლიო!
Lorem ipsum dolor sit amet.
სიტყვების დამუშავება
ტექსტი Haml-ში შეიძლება განთავსდეს იმავე სტრიქონზე, როგორც დეკლარირებული ელემენტი ან ჩაღრმავდეს ელემენტის ქვემოთ. ტექსტი არ შეიძლება იყოს როგორც დეკლარირებული ელემენტის ერთსა და იმავე ხაზზე და მის ქვემოთ ჩასმული; უნდა იყოს ერთი ან მეორე. ზემოთ მოყვანილი მაგალითი შეიძლება გადაიწეროს შემდეგნაირად:
%body %header %h1 გამარჯობა მსოფლიო! %section %p Lorem ipsum dolor sit amet.
ატრიბუტები
ატრიბუტები, ელემენტების მსგავსად, ოდნავ განსხვავებულად არის გამოცხადებული Haml-ში. ატრიბუტები გამოცხადებულია უშუალოდ ელემენტის შემდეგ, ხვეული ან ფრჩხილებში, იმისდა მიხედვით, გსურთ გამოიყენოთ Ruby ან HTML სინტაქსი. Ruby სტილის ატრიბუტები გამოიყენებენ სტანდარტულ ჰეშის სინტაქსს შიგნით (), ხოლო HTML სტილის ატრიბუტები გამოიყენებენ სტანდარტულ HTML სინტაქსს შიგნით ().
%img(:src => "shay.jpg", :alt => "შაი ჰოუ") %img(src: "shay.jpg", alt: "შაი ჰოუ") %img(src="shay.jpg" alt="შეი ჰოუ") !}
შედგენილი HTML
კლასები და იდენტიფიკატორები
თუ სასურველია, კლასები და იდენტიფიკატორები შეიძლება გამოცხადდეს სხვა ატრიბუტების მსგავსად, მაგრამ მათ ასევე შეიძლება განსხვავებულად მოექცნენ. იმის ნაცვლად, რომ ჩამოთვალოთ კლასი და id ატრიბუტები მათი მნიშვნელობებით ფრჩხილებში, მნიშვნელობა შეიძლება განისაზღვროს უშუალოდ ელემენტის შემდეგ. კლასებისთვის წერტილის ან იდენტიფიკატორის ჰეშის გამოყენებით, მნიშვნელობა შეიძლება დაემატოს ელემენტის შემდეგ დაუყოვნებლივ.
გარდა ამისა, ატრიბუტების ერთმანეთთან შერევა შესაძლებელია შესაბამის ფორმატში შეერთებით. კლასები უნდა გამოიყოს წერტილებით და სხვა ატრიბუტები შეიძლება დაემატოს ერთ-ერთი ადრე ასახული ფორმატის გამოყენებით.
%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")
შედგენილი HTML
კლასები და იდენტიფიკატორები ში იმ შემთხვევაში, თუ კლასი ან იდენტიფიკატორი გამოიყენება
, მაშინ %div შეიძლება გამოტოვდეს და კლასის ან id-ის მნიშვნელობა შეიძლება პირდაპირ იყოს ჩართული. ისევ, კლასები უნდა განისაზღვროს წერტილით, ხოლო იდენტიფიკატორები ფუნტის ნიშნით.გასაოცარია. გასაოცარია.გაკვეთილი #დაწყება.გაკვეთილი
შედგენილი HTML
ლოგიკური ატრიბუტები
ლოგიკური ატრიბუტები განიხილება ისევე, როგორც Ruby-ში ან HTML-ში, გამოყენებული სინტაქსიდან გამომდინარე.
%input(:type => "checkbox", :checked => true)
შედგენილი HTML
ტექსტის გაქცევა
Haml-ის ერთ-ერთი უპირატესობა არის Ruby-ის გამოთვლისა და გაშვების შესაძლებლობა, თუმცა ეს ყოველთვის არ არის სასურველი მოქმედება. ტექსტისა და კოდის სტრიქონების გაქცევა შესაძლებელია უკანა ხაზით (\), რაც საშუალებას აძლევს ტექსტს ცალსახად აჩვენოს შესრულების გარეშე.
ქვემოთ მოყვანილ მაგალითში, პირველი = @author ნიმუში შესრულებულია Ruby-ის მიერ, ავტორის სახელს აპლიკაციიდან იღებს. მეორე ნიმუში იწყება უკანა ხაზით ტექსტიდან გაქცევის მიზნით და იბეჭდება ისე, როგორც არის, შესრულების გარეშე.
ავტორი = @author \= @author
შედგენილი HTML
ტექსტის გაქცევის ალტერნატივები
ზოგჯერ ტექსტის გაქცევა საკმარისი არ არის და Ruby არის საჭირო სასურველი გამოსავლის გენერირებისთვის. ამის ერთ-ერთი პოპულარული მაგალითია წერტილის ჩასმა დაუყოვნებლივ ბმულის შემდეგ, მაგრამ არა როგორც ბმულის ტექსტის ნაწილი. წერტილის განთავსება ახალ ხაზზე მიუღებელია, რადგან ის განიხილება, როგორც ცარიელი კლასის მნიშვნელობა, რაც იწვევს კომპილაციის შეცდომას. უკუღმა ხაზის დამატება წერტილიდან გაურბის სიმბოლოს, მაგრამ აყენებს ინტერვალს ბოლო სიტყვასა და წერტილს შორის. ისევ და ისევ, არ იძლევა სასურველ შედეგს.
ამ შემთხვევებში, რუბის დამხმარე გამოდგება. ქვემოთ მოცემულ მაგალითში დამხმარე გამოიყენება ბოლო სიტყვის შემდეგ წერტილის დასაყენებლად, მაგრამ ბმულის ტექსტის გარეთ.
%p Shay - = წარმატება "." გააკეთე %a(:href => "#") კარგად
შედგენილი HTML
შეი - კარგად გაკეთებული.
კომენტარები
ელემენტებისა და ატრიბუტების მსგავსად, კომენტარები ოდნავ განსხვავებულად არის დამუშავებული Haml-ში. კოდის კომენტირება შეიძლება საკმაოდ მარტივი იყოს ერთი წინ გადაკვეთით (/). ცალკეული ხაზების კომენტირება შესაძლებელია ხაზის დასაწყისში ხაზებით, ხოლო კოდის ბლოკების კომენტირება შესაძლებელია ხაზის ქვეშ მოთავსებით.
%div / კომენტარის ხაზი ფაქტობრივი ხაზი / %div კომენტარების ბლოკი
შედგენილი HTML
მიმდინარე ხაზი
პირობითი კომენტარები
პირობითი კომენტარები ასევე განსხვავებულად არის დამუშავებული ჰამლში. პირობითი კომენტარის შესაქმნელად გამოიყენეთ კვადრატული ფრჩხილები () მდგომარეობის გარშემო. ეს კვადრატული ფრჩხილები უნდა განთავსდეს პირდაპირ დახრილობის შემდეგ.
/ %script(:src => "html5shiv.js")
შედგენილი HTML
მშვიდი კომენტარები
Haml ასევე იძლევა სპეციალური ჩუმი კომენტარების შექმნის შესაძლებლობას. მდუმარე კომენტარები განსხვავდება ძირითადი HTML კომენტარებისგან იმით, რომ შედგენის შემდეგ, ჩუმ კომენტარის ნებისმიერი შინაარსი მთლიანად წაიშლება ამ გვერდიდან და არ ჩანს შედეგებში. ჩუმი კომენტარები იწყება დეფისით, რასაც მოჰყვება ფუნტის ნიშანი (-#). როგორც სხვა კომენტარების შემთხვევაში, ჩუმი კომენტარები შეიძლება გამოყენებულ იქნას ერთი ან მეტი ხაზის ამოსაღებად ბუდეების გამოყენებით.
%div -# წაშლილი ხაზი მიმდინარე ხაზი
შედგენილი HTML
მიმდინარე ხაზი
ფილტრები
Haml გთავაზობთ რამდენიმე ფილტრს, რომელიც საშუალებას მოგცემთ გამოიყენოთ სხვადასხვა ტიპის შეყვანა Haml-ში. ფილტრები იწყება ორწერტილით, რასაც მოჰყვება ფილტრის სახელი, მაგ. :markdown , ნებისმიერი შინაარსით, რომ გაფილტროს დანართი ქვემოთ.
საერთო ფილტრები
ქვემოთ მოცემულია რამდენიმე გავრცელებული ფილტრი, მათ შორის ყველაზე პოპულარული ჯგუფი: css და: javascript.
- :cdata
- : ყავა
- :გაიქცა
- :javascript
- :ნაკლები
- :markdown
- :მარუკუ
- : უბრალო
- : შენახვა
- :რუბი
- :სასი
- :scss
- : ტექსტილი
Javascript ფილტრი
:javascript $("ღილაკი").on("დაწკაპუნება", ფუნქცია(მოვლენა) ($("p"). დამალვა("ნელი"); ));
შედგენილი HTML
CSS ფილტრები და Sass
:css .container ( ზღვარი: 0 ავტომატური; სიგანე: 960 პიქსელი; ) :sass .კონტეინერის ზღვარი: 0 ავტომატური სიგანე: 960 პიქსელი
შედგენილი HTML
რუბის ინტერპოლაცია
როგორც უკვე აღვნიშნეთ, ჰამლს შეუძლია შეაფასოს რუბი და ზოგჯერ შეიძლება იყოს შემთხვევები, როდესაც რუბი უნდა შეფასდეს უბრალო ტექსტში. ამ შემთხვევაში, Ruby უნდა იყოს ინტერპოლირებული საჭირო Ruby კოდის შეფუთვით.
ქვემოთ მოცემულია Ruby-ის მაგალითი, რომელიც ინტერპოლირებულია, როგორც კლასის სახელი.
%div(:class => "student-#(@student.name)")
შედგენილი HTML
SCSS და Sass
SCSS და Sass არის წინასწარი დამუშავების ენები, რომლებიც შედგენილია CSS-ში. ისინი ოდნავ ჰგვანან Haml-ს და აადვილებენ კოდის დაწერას ძალიან მცირე ბერკეტით. ინდივიდუალურად, SCSS და Sass-ს აქვთ იგივე წარმოშობა, მაგრამ ტექნიკურად მათ აქვთ განსხვავებული სინტაქსი.
მოკლედობისთვის, Haml და Sass იყვნენ ერთადერთი წინასწარი პროცესორები, რომლებიც განხილული იყო ამ სახელმძღვანელოში. ისინი ასევე აირჩიეს, რადგან ისინი აგებულია Ruby-ით და ჯდება პირდაპირ Ruby on Rails აპლიკაციებში. მათ ასევე დიდი მხარდაჭერა მიიღეს საზოგადოებისგან.
როდესაც საქმე ეხება წინასწარ პროცესორის არჩევას, მნიშვნელოვანია გავითვალისწინოთ რა არის საუკეთესო თქვენი გუნდისთვის და პროექტისთვის. Node.js-ში აშენებულ პროექტებს ალბათ უფრო მეტი სარგებლობა შეუძლიათ Jade-სა და Stylus-ისგან. თუმცა, ყველაზე მნიშვნელოვანი ასპექტი, რომელიც გასათვალისწინებელია, არის ის, რასაც თქვენი გუნდი იყენებს. ჩაატარეთ კვლევა თითოეული პროექტისთვის და შეარჩიეთ ყველაზე ინფორმირებული გადაწყვეტა.
რესურსები და ბმულები
- Haml - HTML აბსტრაქციის მარკირების ენა
- Sass - სინტაქსურად გასაოცარი სტილის ფურცლები
- Sass Playground SassMeister-ზე
განლაგების აბსოლუტურად ყველა გამოცდილი დიზაინერი იყენებს წინასწარ პროცესორებს. გამონაკლისები არ არის. თუ გსურთ იყოთ წარმატებული ამ საქმიანობაში, არ დაივიწყოთ ეს პროგრამები. ერთი შეხედვით, მათ შეუძლიათ დამწყებთათვის მშვიდი საშინელება გამოიწვიოს - ეს უკვე ძალიან ჰგავს პროგრამირებას! სინამდვილეში, თქვენ შეგიძლიათ გაარკვიოთ CSS წინასწარი პროცესორების ყველა მახასიათებელი დაახლოებით ერთ დღეში და თუ სცადეთ, თუნდაც რამდენიმე საათში. მომავალში ისინი მნიშვნელოვნად გაგიმარტივებენ ცხოვრებას.
როგორ გაჩნდა CSS წინასწარი პროცესორები
ამ ტექნოლოგიის მახასიათებლების უკეთ გასაგებად, მოდით მოკლედ ჩავუღრმავდეთ ვებ გვერდების ვიზუალური წარმოდგენის განვითარების ისტორიას.
როდესაც ინტერნეტის მასობრივი გამოყენება ახლახან დაიწყო, სტილის ფურცლები არ არსებობდა. დოკუმენტაცია დამოკიდებული იყო მხოლოდ ბრაუზერებზე. თითოეულ მათგანს ჰქონდა საკუთარი სტილი, რომელიც გამოიყენებოდა გარკვეული ტეგების დასამუშავებლად. შესაბამისად, გვერდები განსხვავებულად გამოიყურებოდა იმისდა მიხედვით, თუ რომელ ბრაუზერში გახსენით ისინი. შედეგი არის ქაოსი, დაბნეულობა, პრობლემები დეველოპერებისთვის.
1994 წელს ნორვეგიელმა მეცნიერმა ჰააკონ ლიმ შეიმუშავა სტილის ფურცელი, რომელიც შეიძლება გამოყენებულ იქნას HTML დოკუმენტისგან განცალკევებული გვერდის გარეგნობის სტილისთვის. იდეა მოეწონათ W3C კონსორციუმის წარმომადგენლებს, რომლებმაც მაშინვე დაიწყეს მისი დახვეწა. რამდენიმე წლის შემდეგ გამოქვეყნდა CSS სპეციფიკაციის პირველი ვერსია. შემდეგ ის მუდმივად იხვეწებოდა, იხვეწებოდა... მაგრამ კონცეფცია იგივე დარჩა: თითოეულ სტილს ენიჭება გარკვეული თვისებები.
CSS ცხრილების გამოყენება ყოველთვის პრობლემურია. მაგალითად, განლაგების დიზაინერებს ხშირად უჭირდათ თვისებების დახარისხება და დაჯგუფება და მემკვიდრეობა არც ისე მარტივია.
და შემდეგ მოვიდა 2000-იანი წლები. პროფესიონალი ფრონტ-ენდის დეველოპერები სულ უფრო და უფრო იწყებდნენ მარკირებას, ვისთვისაც მნიშვნელოვანი იყო მოქნილი და დინამიური მუშაობა სტილებთან. CSS, რომელიც იმ დროს არსებობდა, მოითხოვდა ბრაუზერის ახალი ფუნქციების პრეფიქსირებისა და თვალთვალის მხარდაჭერას. შემდეგ JavaScript-ისა და Ruby-ის ექსპერტები შეუდგნენ საქმეს, შექმნეს წინასწარი პროცესორები - დანამატები CSS-სთვის, რომლებიც ამატებენ მას ახალ ფუნქციებს.
CSS დამწყებთათვის: Preprocessors-ის მახასიათებლები
ისინი ასრულებენ რამდენიმე ფუნქციას:
- ბრაუზერის პრეფიქსების და ჰაკების გაერთიანება;
- სინტაქსის გამარტივება;
- შესაძლებელს გახდის ჩადგმულ სელექტორებთან მუშაობას შეცდომების გარეშე;
- გააუმჯობესეთ სტილის ლოგიკა.
მოკლედ: წინასწარი პროცესორი ამატებს პროგრამირების ლოგიკას CSS-ის შესაძლებლობებს. ახლა სტილის გაკეთება ხდება არა სტილის ჩვეულებრივი ჩამოთვლებით, არამედ რამდენიმე მარტივი ხრიკისა და მიდგომის დახმარებით: ცვლადები, ფუნქციები, მიქსინები, მარყუჟები, პირობები. გარდა ამისა, იყო მათემატიკის გამოყენების შესაძლებლობა.
დაინახა ასეთი დანამატების პოპულარობა, W3C-მა დაიწყო თანდათანობით დაემატა მათგან ფუნქციები CSS კოდში. მაგალითად, ასე გამოჩნდა calc() ფუნქცია სპეციფიკაციაში, რომელსაც მხარს უჭერს მრავალი ბრაუზერი. მოსალოდნელია, რომ მალე შესაძლებელი იქნება ცვლადების დაყენება და მიქსინების შექმნა. თუმცა, ეს მოხდება შორეულ მომავალში და წინასწარი პროცესორები უკვე აქ არიან და უკვე მშვენივრად მუშაობენ.
პოპულარული CSS წინასწარი პროცესორები. სას
შემუშავებულია 2007 წელს. თავდაპირველად, ეს იყო Haml-ის, HTML შაბლონის ძრავის კომპონენტი. Ruby on Rails-ის დეველოპერებმა მიიღეს ახალი კონტროლი CSS ელემენტებზე და დაიწყეს მისი გავრცელება ყველგან. Sass-ს აქვს ფუნქციების უზარმაზარი რაოდენობა, რომლებიც ახლა შედის ნებისმიერ წინასწარ პროცესორში: ცვლადები, ბუდობრივი სელექტორები, მიქსინები (მაშინ, თუმცა, მათ არგუმენტების დამატება არ შეგეძლოთ).
ცვლადების გამოცხადება Sass-ში
ცვლადები გამოცხადებულია $ ნიშნით. თქვენ შეგიძლიათ შეინახოთ თვისებები და მათი ნაკრები მათში, მაგალითად: „$borderSolid: 1px მყარი წითელი;“. ამ მაგალითში, ჩვენ გამოვაცხადეთ ცვლადი, სახელწოდებით borderSolid და შევინახეთ მასში მნიშვნელობა 1px მყარი წითელი. ახლა, თუ CSS-ში უნდა შევქმნათ 1px ფართო წითელი საზღვარი, უბრალოდ მიუთითეთ ეს ცვლადი თვისების სახელის შემდეგ. გამოცხადების შემდეგ, ცვლადები ვერ შეიცვლება. ხელმისაწვდომია რამდენიმე ჩაშენებული ფუნქცია. მაგალითად, გამოვაცხადოთ $redColor ცვლადი #FF5050 მნიშვნელობით. ახლა CSS კოდში, ზოგიერთი ელემენტის თვისებებში, ჩვენ ვიყენებთ მას შრიფტის ფერის დასაყენებლად: p (ფერი: $redColor; ). გსურთ ექსპერიმენტი გააკეთოთ ფერებზე? გამოიყენეთ ჩაბნელების ან განათების ფუნქციები. ეს კეთდება ასე: p ( ფერი: მუქი ($redColor, 20%); ). ეს წითელ ფერს 20%-ით ნათელს გახდის.
ბუდე
ადრე ბუდეების აღსანიშნავად გრძელი და უხერხული კონსტრუქციების გამოყენება გვიწევდა. წარმოვიდგინოთ, რომ გვაქვს div, რომელიც შეიცავს p და მასში, თავის მხრივ, მდებარეობს span. div-სთვის შრიფტის ფერი წითლად უნდა დავაყენოთ, p-სთვის - ყვითელი, span-ისთვის - ვარდისფერი. ჩვეულებრივ CSS-ში ეს ასე გაკეთდება:
CSS წინასწარი პროცესორის დახმარებით ყველაფერი უფრო მარტივი და კომპაქტური ხდება:
ელემენტები ფაქტიურად ბუდირებულია ერთმანეთის შიგნით.
წინასწარი პროცესორის დირექტივები
შეგიძლიათ ფაილების იმპორტი @import დირექტივის გამოყენებით. მაგალითად, ჩვენ გვაქვს fonts.sass ფაილი, რომელიც აცხადებს შრიფტების სტილებს. ჩვენ მას ჩავრთავთ მთავარ style.sass ფაილში: @import 'fonts'. მზადაა! ერთი დიდი სტილის ფაილის ნაცვლად, ჩვენ გვაქვს რამდენიმე, რომელთა გამოყენება შესაძლებელია საჭირო თვისებებზე სწრაფად და მარტივად წვდომისთვის.
მიქსინები
ერთ-ერთი ყველაზე საინტერესო იდეა. საშუალებას გაძლევთ დააყენოთ თვისებების მთელი ნაკრები ერთ ხაზზე. იმუშავეთ შემდეგნაირად:
@mixinlargeFont(
font-family: 'Times New Roman';
შრიფტის ზომა: 64px;
ხაზის სიმაღლე: 80px;
შრიფტის წონა: თამამი;
გვერდის ელემენტზე mixin-ის გამოსაყენებლად, ჩვენ ვიყენებთ @include დირექტივას. მაგალითად, ჩვენ გვინდა გამოვიყენოთ ის h1 სათაურზე. შედეგი არის შემდეგი კონსტრუქცია: h1 (@include: largeFont;)
მიქსინის ყველა თვისება მიენიჭება h1 ელემენტს.
Preprocessor Less
Sass სინტაქსი პროგრამირებას მოგვაგონებს. თუ თქვენ ეძებთ ვარიანტს, რომელიც უფრო შესაფერისია CSS დამწყები შემსწავლელებისთვის, შეამოწმეთ Less. იგი შეიქმნა 2009 წელს. მთავარი მახასიათებელი არის მშობლიური მხარდაჭერა, ასე რომ, განლაგების დიზაინერებს, რომლებიც არ იცნობენ პროგრამირებას, უფრო ადვილი იქნება მისი დაუფლება.
ცვლადები გამოცხადებულია @ სიმბოლოთი. მაგალითად: @fontSize: 14px;. ბუდე მუშაობს იგივე პრინციპებით, როგორც Sass-ში. მიქსინები გამოცხადებულია ასე: .largeFont() ( font-family: 'Times New Roman'; შრიფტის ზომა: 64px; ხაზის სიმაღლე: 80px; font-weight: bold; ). თქვენ არ გჭირდებათ წინასწარი პროცესორის დირექტივების გამოყენება დასაკავშირებლად - უბრალოდ დაამატეთ ახლად შექმნილი მიქსინი არჩეული ელემენტის თვისებებს. მაგალითად: h1 ( .largeFont; ).
სტილუსი
კიდევ ერთი წინასწარი პროცესორი. შექმნილია 2011 წელს იმავე ავტორის მიერ, რომელმაც მსოფლიოს აჩუქა Jade, Express და სხვა სასარგებლო პროდუქტები.
ცვლადები შეიძლება გამოცხადდეს ორი გზით - აშკარად ან იმპლიციტურად. მაგალითად: font = 'Times New Roman'; არის იმპლიციტური ვარიანტი. მაგრამ $font = 'Times New Roman' აშკარაა. მიქსინები დეკლარირებულია და ჩართულია ირიბად. სინტაქსია: redColor() ფერი წითელი. ახლა შეგვიძლია დავამატოთ ის ელემენტს, მაგალითად: h1 redColor();.
ერთი შეხედვით, Stylus შეიძლება დამაბნეველი ჩანდეს. სად არის "მშობლიური" ფრჩხილები და მძიმით? მაგრამ როგორც კი მასში ჩაყვინთავთ, ყველაფერი გაცილებით ნათელი ხდება. თუმცა, გაითვალისწინეთ, რომ ამ წინასწარი პროცესორის ხანგრძლივმა განვითარებამ შეიძლება „გააცილოთ“ კლასიკური CSS სინტაქსის გამოყენება. ეს ზოგჯერ იწვევს პრობლემებს, როდესაც საჭიროა "სუფთა" სტილებთან მუშაობა.
რომელი წინასწარი პროცესორი აირჩიოს?
ნამდვილად... არ აქვს მნიშვნელობა. ყველა ვარიანტი იძლევა დაახლოებით ერთსა და იმავე შესაძლებლობებს, უბრალოდ სინტაქსი განსხვავებულია თითოეულისთვის. ჩვენ გირჩევთ გააკეთოთ შემდეგი:
- თუ პროგრამისტი ხართ და გსურთ იმუშაოთ სტილებთან, როგორიცაა კოდი, გამოიყენეთ Sass;
- თუ თქვენ ხართ განლაგების დიზაინერი და გსურთ იმუშაოთ სტილებთან, როგორიცაა ჩვეულებრივი განლაგება, ყურადღება მიაქციეთ Less-ს;
- თუ მოგწონთ მინიმალიზმი, გამოიყენეთ Stylus.
ყველა ვარიანტისთვის ხელმისაწვდომია უამრავი საინტერესო ბიბლიოთეკა, რომელსაც შეუძლია კიდევ უფრო გაამარტივოს განვითარება. Sass-ის მომხმარებლებს ურჩევენ გადახედონ Compass-ს, ძლიერ ხელსაწყოს მრავალი ჩაშენებული ფუნქციით. მაგალითად, მისი ინსტალაციის შემდეგ, აღარასოდეს მოგიწევთ ფიქრი გამყიდველის პრეფიქსებზე. უფრო ადვილია ქსელებთან მუშაობა. არის ფერებთან, სპრიტებთან მუშაობის კომუნალური საშუალებები. უკვე გამოცხადებული მიქსინების რაოდენობა ხელმისაწვდომია. მიეცით ამ ხელსაწყოს რამდენიმე დღე - ამით თქვენ დაზოგავთ დიდ დროსა და ძალისხმევას მომავალში.
ავტორისგან: css პრეპროცესორებზე უკვე დიდი ხანია საუბრობენ. ბევრი დეველოპერი უკვე იყენებს მათ თავიანთი პროექტების შემუშავებაში. არიან ისეთებიც, რომლებსაც სმენიათ წინასწარი პროცესორების შესახებ ან წაკითხული აქვთ მათ შესახებ, მაგრამ არ ესმით, რა უპირატესობას ანიჭებენ პრეპროცესორებს css კოდის დაწერისას.
ბევრისთვის წინასწარი პროცესორები არის „საიდუმლო“ ტექნოლოგია, რომლის სარგებელი ძალიან პირობითია და არა აშკარა. ამ სტატიაში მე ვისაუბრებ მარტივი სიტყვებით იმაზე, თუ რა არის წინასწარი პროცესორები, რისთვის არიან ისინი და როგორ შეუძლიათ დაეხმარონ ვებ დეველოპერს.
რა არის CSS წინასწარი პროცესორები?
CSS წინასწარი პროცესორი არის CSS დანამატი, რომელიც აფართოებს სტანდარტული CSS-ის შესაძლებლობებს ახალი სინტაქსური კონსტრუქციებით.
ანუ ეს არ არის „რევოლუციური სუპერტექნოლოგია“. ეს არის ის, რაც აძლიერებს css-ს. ეს არის ის, რასაც შეუძლია ყოველდღიური რუტინული ოპერაციების ავტომატიზაცია და განვითარების დაჩქარება.
პრეპროცესორები გარდაქმნიან წინაპროცესორის ენაზე დაწერილ კოდს სუფთა და მოქმედ CSS კოდად. და გამოსავალზე ვიღებთ სუფთა, მოქმედ, ბრაუზერის კოდს. წინაპროცესორებთან მუშაობის სქემა შეგიძლიათ იხილოთ ქვემოთ.
როგორ ამარტივებს წინასწარი პროცესორები ცხოვრებას?
წინასწარი პროცესორები საშუალებას გაძლევთ დააჩქაროთ css კოდის წერა და გაამარტივოთ მისი მხარდაჭერა მომავალში.
განვიხილოთ მაგალითი. საიტი იყენებს წითელ შრიფტს. სუფთა css-ის გამოყენებით, თქვენ უნდა დააყენოთ ეს ფერი მრავალჯერ თითოეული ელემენტისთვის ინდივიდუალურად. და თუ გადაწყვეტთ შეცვალოთ წითელი ელფერი დროთა განმავლობაში, თქვენ უნდა შეცვალოთ იგი თითოეული ელემენტისთვის. წინასწარი პროცესორების გამოყენებით, ფერი ენიჭება ცვლადს ერთხელ და ეს ცვლადი უკვე მინიჭებულია თითოეულ ელემენტზე. თუ ამჯერად ფერის ჩრდილის შეცვლას გადაწყვეტთ, მისი შეცვლა მხოლოდ ერთ ადგილას დაგჭირდებათ.
ასეთი მაგალითი საკმაოდ ხშირად გვხვდება. და, როგორც დასაწყისში აღვნიშნე, წინაპროცესორების გამოყენებას ამ მაგალითში ბევრი უპირატესობა არ აქვს. კოდის ნებისმიერ რედაქტორში შეგვიძლია დავაჭიროთ კლავიატურის მალსახმობს "ctrl" + "F", ვიპოვოთ ფერის კოდი "#ff0000" და შევცვალოთ "#00ff00". და ფერი შეიცვლება წითელიდან მწვანემდე ყველა ადგილას მაუსის ერთი დაწკაპუნებით.
მაშ, რაში შეიძლება დაგვეხმაროს წინასწარი პროცესორები?
რა პრობლემებს წყვეტენ წინასწარი პროცესორები?
წინასწარი პროცესორები გვიზოგავს დროს და აკეთებენ ბევრ რუტინულ საქმეს ჩვენთვის ისეთი ფუნქციების წყალობით, როგორიცაა: ჩადგმული სელექტორები, მათემატიკური ფუნქციები, მითითებები მშობლის ამომრჩეველზე და კიდევ შეცდომის შეტყობინებები, რომლებიც გვეუბნებიან, სად და რატომ მოხდა შეცდომა კოდში.
ვნახოთ, როგორ დაგვეხმარება ეს ყველაფერი რეალური მაგალითებით:
დიდ ან ძალიან ძველ პროექტებში, რომლებიც მუდმივად ემატება და უმჯობესდება, css სტილები შეიძლება საკმაოდ ხშირად შეიცვალოს. და თუ სტილის ფაილი შეიცავს კოდს ათასობით ხაზს, მაშინ ძალიან მოუხერხებელია css რედაქტირების გაკეთება. ბევრად უფრო მოსახერხებელი იქნებოდა, თუ სტილები დაყოფილი იქნებოდა ლოგიკურ ბლოკებად და სტილის ყოველი ასეთი ბლოკი ცალკე ფაილში იქნებოდა.
წინასწარი პროცესორები წყვეტენ ამ პრობლემას თქვენი მხრიდან ყოველგვარი ძალისხმევის გარეშე. შესაძლოა გქონდეთ თქვენი პროექტიდან რამდენიმე წინასწარპროცესორული ფაილი, რომლებიც კომპილაციის შემდეგ ავტომატურად გაერთიანდება და შედეგად მიიღებთ ერთ „ლამაზ“ css ფაილს.
css-ის კიდევ ერთი პრობლემაა სტილისა და სელექტორების დუბლირება. როგორც პროექტი ვითარდება, ჩნდება რამდენიმე ფრაგმენტი, რომელთა ხელახლა გამოყენებაც შესაძლებელია. ასევე შეიძლება იყოს ბევრი ერთფეროვანი სელექტორი, რომელიც მხოლოდ ოდნავ განსხვავდება. შედეგად, თუ გადავიტანეთ ბლოკი ან დავარქვით რომელიმე ბლოკის კლასს, ბევრი სელექტორის რედაქტირება გვჭირდება.
მიქსინები წყვეტენ ამ პრობლემას წინასწარ პროცესორებში. მიქსინები არის ფუნქციები, პარამეტრიზებული თუ არა, რომლებიც აწარმოებენ რაიმე სახის CSS-ს, რომელიც შეგვიძლია ხელახლა გამოვიყენოთ სადაც საჭიროა.
შემდეგი პრობლემა არის დამოკიდებულების პრობლემა. მაგალითად, თქვენ გაქვთ ბლოკის სიგანე დაყენებული თქვენს სტილებში, მასზეა დამოკიდებული სხვა პარამეტრები, სხვა ბლოკების შეწევა და ა.შ. ერთი პარამეტრის სწორად შესაცვლელად, თქვენ მოგიწევთ შეასწოროთ ყველაფერი, რაც მასზეა დამოკიდებული.
ეს პრობლემა ძალიან მარტივად წყდება წინასწარ პროცესორებში ცვლადებით.
ყოველივე ზემოაღნიშნულის გარდა, წინასწარი პროცესორების გამოყენებისას თქვენ მთლიანად გამორიცხავს css ფაილში შეცდომის მიღების რისკს, იღებთ უფრო სუფთა, უფრო ლოგიკურ და ბრაუზერულ css-ს.
წინასწარი პროცესორების უპირატესობები
განლაგების სირთულეებიდან გამომდინარე, რომლებსაც წინასწარ პროცესორები ეხმარებიან, შეიძლება დასახელდეს წინასწარი პროცესორების შემდეგი უპირატესობები: ცვლადების გამოყენება, ბუდე, მიქსინები (მიქსინები), მემკვიდრეობა და ა.შ. და ასე შემდეგ - ეს ყველაფერი გასაგებია. მაგრამ უპირველეს ყოვლისა, მინდა თქვენი ყურადღება გავამახვილო იმ ფაქტზე, რომ წინასწარი პროცესორების ცოდნა გიხსნის შესაძლებლობას იპოვო კარგად ანაზღაურებადი სამუშაო, აიწიო კარიერის კიბეზე ასვლა და მინიმუმ გააორმაგოს შენი შემოსავალი.
ვნახოთ, რა ხელფასს სთავაზობენ ვებ სტუდიები განლაგების დიზაინერებს საიტზე წინასწარი პროცესორების ცოდნის გარეშე hh.ru:
და აქ არის ხელფასები, რომლებსაც ვებ სტუდიები სთავაზობენ კოდირებს, რომლებსაც აქვთ წინასწარი პროცესორების ცოდნა იმავე საიტზე:
როგორც ხედავთ, მაქსიმალური ხელფასი წინაპროცესორული ცოდნის გარეშე და მინიმალური ხელფასი წინაპროცესორული ცოდნით განსხვავდება 1,5-ჯერ. და თუ გადავხედავთ საშუალო მაჩვენებლებს, მაშინ გადახდა განსხვავდება მინიმუმ 2-3 ჯერ!
უფრო მეტიც, კიდევ რა შეიძლება აღინიშნოს, ამისათვის თქვენ არ გჭირდებათ ყველა წინასწარი პროცესორის ცოდნა. საკმარისია იცოდეთ ორი ყველაზე პოპულარული წინამორბედი - Sass და Less.
დასკვნა
წინასწარი პროცესორები ნამდვილად უადვილებენ დეველოპერებს ცხოვრებას, მათ შეუძლიათ სწრაფად გადაჭრას განლაგების დიზაინერის ყოველდღიური პრობლემები და აიღოს ყოველდღიური რუტინული ოპერაციები.
უმჯობესია ვიცოდეთ წინასწარი პროცესორები და არ გამოიყენოთ ისინი ყოველდღე, ან გამოიყენოთ ისინი საჭიროებისამებრ. ვიდრე არ იცოდეთ წინასწარი პროცესორები და გამოგრჩეთ საინტერესო მაღალანაზღაურებადი პროექტი ან უფრო მაღალანაზღაურებად სამუშაოზე გადასვლის შესაძლებლობა.
P.S.იყენებთ წინასწარ პროცესორებს განვითარებაში? კომენტარებში დაწერეთ რა პრეპროცესორებს იყენებთ? თუ ჯერ არ იყენებთ, რატომაც არა? გეგმავთ წინასწარ პროცესორების გამოყენებას?
კურსის ვიდეო პრეზენტაცია „Sass and Less Preprocessors. Front-end განვითარების ავტომატიზაცია და გამარტივება»
CSS წინასწარი პროცესორი (CSS წინასწარი პროცესორი)არის CSS-ის დამატება, რომელიც უზრუნველყოფს CSS-ს ახალ ფუნქციებსა და ფუნქციონირებას სინტაქსური კონსტრუქციების დამატებით.
პრეპროცესორების დანიშნულება: მოსახერხებელი სინტაქსის უზრუნველყოფა ვებ დეველოპერისთვის, რათა გაამარტივოს და დააჩქაროს პროექტებში სტილის შემუშავება და შენარჩუნება.
CSS წინასწარი პროცესორები აქცევენ კოდს, რომელიც დაწერილია წინაპროცესორის ენის გამოყენებით სუფთა და მართებულად.
წინასწარი პროცესორების დახმარებით თქვენი დაწერილი კოდი ხდება: ადამიანისთვის წასაკითხი, სტრუქტურირებული და ლოგიკური, პროდუქტიული.
ყველაზე პოპულარულ პრეპროცესორებს შორისააLess, Sass (Scss), Stylus. ასევე ნაკლებად შესამჩნევი ინსტრუმენტები ამ სფეროში არის Closure Stylesheets, CSS Crush, ისინი ამჟამად ნაკლებად პოპულარულია, მაგრამ მაინც ზოგიერთი დეველოპერი იყენებს მათ. შევეცადოთ გავიგოთ Less, Sass (Scss), Stylus-ის შესაძლებლობები და მახასიათებლები.
CSS-ის სტანდარტული გამოყენება საკმაოდ რთულია. სინტაქსი ბუდეების გარეშე უშუალოდ რთულია ვიზუალური აღქმისთვის. ნორმალური ცვლადების და ფუნქციების არარსებობა CSS კოდს ვიწრო და ბევრი ზედმეტი და არასაჭირო დეტალებით ხდის.
ხელმისაწვდომი დოკუმენტაცია - ახლა ნებისმიერ მსურველს შეუძლია დაეუფლოს შერჩეულ წინასწარ პროცესორს მოკლე დროში, დამატებითი ხარჯების გარეშე. მეორე უპირატესობა არის წინასწარი პროცესორების გამოყენების სიმარტივე. ამისათვის თქვენ უბრალოდ უნდა დააინსტალიროთ სპეციალური პროგრამა, რომელიც მონიტორინგს გაუწევს წინასწარ პროცესორისთვის განკუთვნილ ფაილებს და როდესაც ისინი შეიცვლება, ამ ფაილების შიგთავსს შეაგროვებს სუფთა CSS კოდში.
უფრო მოწინავე მომხმარებლებისთვის არის სპეციალური პროექტების შემქმნელები.
Ნაკლებიარის ყველაზე პოპულარული და ხშირად გამოყენებული წინასწარი პროცესორი. შემუშავებულია JavaScript-ის საფუძველზე, მოიცავს წინასწარ პროცესორის ძირითად მახასიათებლებს, მაგრამ არ იძლევა პირობით სტრუქტურებსა და მარყუჟებს ჩვენთვის ჩვეულებრივი გაგებით. მისი სიმარტივისა და ლაკონურობის გამო, არსებობს სტანდარტული სინტაქსი CSS-ისთვის და ფუნქციების გაფართოების შესაძლებლობა დანამატების ფუნქციონირებით.
LESS უზრუნველყოფს CSS-ის დინამიურ ფუნქციებს: ცვლადები, მიქსინები, ოპერაციები და ფუნქციები. დოკუმენტაცია ძალიან მოსახერხებელია დეველოპერებისთვის და სინტაქსი ძალიან ჰგავს სუფთა CSS-ს. პოპულარული ჩარჩოები, როგორიცაა Twitter Bootstrap, ფართოდ იყენებს LESS-ის დინამიურ მახასიათებლებს. თუმცა, LESS შესაძლებელს ხდის კლასების ხელახლა გამოყენებას მიქსების სახით სტილის ფურცლის ნებისმიერ ადგილას.
კიდევ ერთი ძლიერი და პოპულარული წინამორბედი არისსას. ამ ხელსაწყოს გარშემო დეველოპერთა უზარმაზარი საზოგადოება ჩამოყალიბდა. იგი დაარსდა 2007 წელს, როგორც HAML მოდული და დაწერილია Ruby-ში (უზრუნველყოფს C++ პორტს). მას აქვს ფუნქციების ფართო სპექტრი Less-თან შედარებით. წინასწარი პროცესორი აფართოებს თავის ფუნქციონირებას Compass ბიბლიოთეკით, რაც საშუალებას გაძლევთ გასცდეთ CSS-ს და იმუშაოთ უფრო ფართო მასშტაბით. გთავაზობთ ორი სახის სინტაქსს: Sass (Syntactically Awesome Style Sheets) არის მარტივი CSS სინტაქსი, რომელიც დაფუძნებულია იდენტობაზე. ის უფრო ძველ ვერსიად ითვლება. Scss (Sassy CSS) ეფუძნება სტანდარტულ CSS სინტაქსს.
- საკმაოდ ახალგაზრდა, მაგრამ უკვე პერსპექტიული CSS წინასწარი პროცესორი. შემუშავებულია ჯერ კიდევ 2010 წელს. ბევრი მიიჩნევს მას მოსახერხებელ და გაფართოებად წინასწარ პროცესორად და უფრო მოქნილად ვიდრე Sass. შემუშავებულია JavaScript-ში. არსებობს მრავალი სინტაქსის ვარიანტის მხარდაჭერა მსგავსი CSS-დან უფრო მარტივ და მსუბუქ ვარიანტებამდე.
დეველოპერის სასარგებლო ინსტრუმენტები:
- კოდეკიტი: ადგენს Sass, LESS და Stylus ფაილებს და შემდეგ ავტომატურად გადატვირთავს თქვენს ბრაუზერს ფაილების განახლების შემდეგ. მათ შორის ოპტიმიზებს პროექტის სურათებს სისტემის მუშაობის გაუმჯობესების მიზნით. ტექნოლოგია ფასიანია, მაგრამ ასევე არის საცდელი ვერსია სამუშაოსთვის.
- LiveReload: ამოწმებს ფაილებში ცვლილებებს, შემდეგ ამუშავებს მათ და ავტომატურად ატვირთავს ვებ ბრაუზერს. ვერსია მუშაობს Mac და Windows-ზე.
- სკაუტი: მუშაობს Sass-ით და Compass-ით Ruby გარემოში. მუშაობს Mac და Windows-ზე.
- მარტივი: მარტივი და მარტივი LESS CSS შემდგენელი Mac და Windows-ისთვის.
იმისათვის, რომ აირჩიოთ სწორი წინასწარი პროცესორი თქვენი სამუშაოსთვის, სცადეთ რამდენიმე. და ტესტის შედეგების მიხედვით, ბევრად გაგიადვილდებათ არჩევანის გაკეთება. ასევე, არ დაგავიწყდეთ, რომ როდესაც თქვენ ეუფლებით წინასწარ პროცესორს, თქვენ არ სწავლობთ ახალ ენას, არამედ მხოლოდ ახალ სინტაქსს და ფუნქციებს სწავლობთ. კომპანია ™
გისურვებთ სასიამოვნო მუშაობას CSS-ის სამყაროში!
2545 ჯერ დღეს ნანახია 1 ჯერ
26.07.2017
2017 წლის 5 საუკეთესო CSS წინასწარი პროცესორი თქვენი სამუშაო პროცესის დასაჩქარებლად.
CSS წინასწარი პროცესორები სპეციალურად შექმნილია იმისათვის, რომ CSS პროგრამისტების სამუშაო უფრო სახალისო გახდეს. ისინი საშუალებას გაძლევთ დაწეროთ ადვილად რედაქტირებადი და საიმედო კოდი ხელახლა გამოყენების შესაძლებლობით.
სხვა სიტყვებით რომ ვთქვათ, CSS წინასწარი პროცესორი არის CSS-ის დამატება ახალი ფუნქციებით: ცვლადები, გაფართოებები, იმპორტი და ა.შ.
ამ სტატიაში მე ვისაუბრებ 2017 წლის საუკეთესო 5 CSS წინასწარ პროცესორზე.
01. სას
SASS არის ყველაზე პოპულარული წინასწარი პროცესორი უზარმაზარი საზოგადოებისა და ძლიერი ფუნქციონირებით. ის მუშაობს მხოლოდ Ruby-თან ერთად და ძალიან ადვილია სწავლა. წინა ბოლოების უმეტესობა, როგორიცაა Bootstrap, Foundation და მატერიალიზება, აგებულია SASS-ის გამოყენებით.
SASS-ს აქვს ორი სინტაქსი:
- .სასი
- .scss
02. სტილუსი
Stylus არის კიდევ ერთი შესანიშნავი წინასწარი პროცესორი CSS დინამიურად გენერირებისთვის. თუ გსურთ გამოტოვოთ ხვეული ბრეკეტები, მძიმეები და მძიმით, მაშინ ეს შეიძლება იყოს თქვენი საუკეთესო ფსონი. Stylus იკვებება Node.js-ით და ძალიან მარტივია ინსტალაცია და გამოყენება. მას აქვს მრავალი მორგებული ფუნქცია, როგორიცაა saturation(). თქვენ ასევე შეგიძლიათ გამოიყენოთ სხვა წამყვანი შემდგენლების მიერ მოწოდებული ყველა ფუნქცია.
03.ნაკლები
Less, ასევე ცნობილი როგორც Less.js ან Less CSS, არის კიდევ ერთი წამყვანი CSS წინასწარი პროცესორი. ეს შესანიშნავი არჩევანია, თუ გჭირდებათ სტანდარტული ფუნქციები, როგორიცაა ცვლადები, ჩადგმული სტილები და ა.შ. ეს Javascript ბიბლიოთეკა თავდაპირველად Ruby-ში იყო დაწერილი.
- ასევე წაიკითხეთ:
04 სტილეკოვი
Stylecow არის Node-ში დაწერილი წინასწარი პროცესორი, რომელიც შეიძლება დაინსტალირდეს npm-ის გამოყენებით. მას აქვს ძლიერი API, რომლითაც შეგიძლიათ მარტივად შექმნათ დანამატები.
05. CSS Crush
PHP-ში ჩაშენებული წინასწარი პროცესორი, რომელიც შესანიშნავი ვარიანტი იქნება PHP პროგრამისტებისთვის, რადგან ის მუშაობს ბევრ პლატფორმაზე. CSS-Crush-ს აქვს ყველა ჩვეულებრივი წინასწარი პროცესორის ფუნქცია (ცვლადები, ჩადგმული სტილები და ა.შ.)
დასკვნა
თუ თქვენ ეძებთ საუკეთესო CSS წინასწარ პროცესორს, მაშინ ინტერნეტში ნახავთ მრავალფეროვან ვარიანტს. ჩემი აზრით, დამწყებთათვის საუკეთესო ვარიანტებია SASS და Stylus.
იმ შემთხვევაში, თუ კლასი ან იდენტიფიკატორი გამოიყენება
, მაშინ %div შეიძლება გამოტოვდეს და კლასის ან id-ის მნიშვნელობა შეიძლება პირდაპირ იყოს ჩართული. ისევ, კლასები უნდა განისაზღვროს წერტილით, ხოლო იდენტიფიკატორები ფუნტის ნიშნით.
გასაოცარია. გასაოცარია.გაკვეთილი #დაწყება.გაკვეთილი
შედგენილი HTML
ლოგიკური ატრიბუტები
ლოგიკური ატრიბუტები განიხილება ისევე, როგორც Ruby-ში ან HTML-ში, გამოყენებული სინტაქსიდან გამომდინარე.
%input(:type => "checkbox", :checked => true)
შედგენილი HTML
ტექსტის გაქცევა
Haml-ის ერთ-ერთი უპირატესობა არის Ruby-ის გამოთვლისა და გაშვების შესაძლებლობა, თუმცა ეს ყოველთვის არ არის სასურველი მოქმედება. ტექსტისა და კოდის სტრიქონების გაქცევა შესაძლებელია უკანა ხაზით (\), რაც საშუალებას აძლევს ტექსტს ცალსახად აჩვენოს შესრულების გარეშე.
ქვემოთ მოყვანილ მაგალითში, პირველი = @author ნიმუში შესრულებულია Ruby-ის მიერ, ავტორის სახელს აპლიკაციიდან იღებს. მეორე ნიმუში იწყება უკანა ხაზით ტექსტიდან გაქცევის მიზნით და იბეჭდება ისე, როგორც არის, შესრულების გარეშე.
ავტორი = @author \= @author
შედგენილი HTML
ტექსტის გაქცევის ალტერნატივები
ზოგჯერ ტექსტის გაქცევა საკმარისი არ არის და Ruby არის საჭირო სასურველი გამოსავლის გენერირებისთვის. ამის ერთ-ერთი პოპულარული მაგალითია წერტილის ჩასმა დაუყოვნებლივ ბმულის შემდეგ, მაგრამ არა როგორც ბმულის ტექსტის ნაწილი. წერტილის განთავსება ახალ ხაზზე მიუღებელია, რადგან ის განიხილება, როგორც ცარიელი კლასის მნიშვნელობა, რაც იწვევს კომპილაციის შეცდომას. უკუღმა ხაზის დამატება წერტილიდან გაურბის სიმბოლოს, მაგრამ აყენებს ინტერვალს ბოლო სიტყვასა და წერტილს შორის. ისევ და ისევ, არ იძლევა სასურველ შედეგს.
ამ შემთხვევებში, რუბის დამხმარე გამოდგება. ქვემოთ მოცემულ მაგალითში დამხმარე გამოიყენება ბოლო სიტყვის შემდეგ წერტილის დასაყენებლად, მაგრამ ბმულის ტექსტის გარეთ.
%p Shay - = წარმატება "." გააკეთე %a(:href => "#") კარგად
შედგენილი HTML
შეი - კარგად გაკეთებული.
კომენტარები
ელემენტებისა და ატრიბუტების მსგავსად, კომენტარები ოდნავ განსხვავებულად არის დამუშავებული Haml-ში. კოდის კომენტირება შეიძლება საკმაოდ მარტივი იყოს ერთი წინ გადაკვეთით (/). ცალკეული ხაზების კომენტირება შესაძლებელია ხაზის დასაწყისში ხაზებით, ხოლო კოდის ბლოკების კომენტირება შესაძლებელია ხაზის ქვეშ მოთავსებით.
%div / კომენტარის ხაზი ფაქტობრივი ხაზი / %div კომენტარების ბლოკი
შედგენილი HTML
მიმდინარე ხაზი
პირობითი კომენტარები
პირობითი კომენტარები ასევე განსხვავებულად არის დამუშავებული ჰამლში. პირობითი კომენტარის შესაქმნელად გამოიყენეთ კვადრატული ფრჩხილები () მდგომარეობის გარშემო. ეს კვადრატული ფრჩხილები უნდა განთავსდეს პირდაპირ დახრილობის შემდეგ.
/ %script(:src => "html5shiv.js")
შედგენილი HTML
მშვიდი კომენტარები
Haml ასევე იძლევა სპეციალური ჩუმი კომენტარების შექმნის შესაძლებლობას. მდუმარე კომენტარები განსხვავდება ძირითადი HTML კომენტარებისგან იმით, რომ შედგენის შემდეგ, ჩუმ კომენტარის ნებისმიერი შინაარსი მთლიანად წაიშლება ამ გვერდიდან და არ ჩანს შედეგებში. ჩუმი კომენტარები იწყება დეფისით, რასაც მოჰყვება ფუნტის ნიშანი (-#). როგორც სხვა კომენტარების შემთხვევაში, ჩუმი კომენტარები შეიძლება გამოყენებულ იქნას ერთი ან მეტი ხაზის ამოსაღებად ბუდეების გამოყენებით.
%div -# წაშლილი ხაზი მიმდინარე ხაზი
შედგენილი HTML
მიმდინარე ხაზი
ფილტრები
Haml გთავაზობთ რამდენიმე ფილტრს, რომელიც საშუალებას მოგცემთ გამოიყენოთ სხვადასხვა ტიპის შეყვანა Haml-ში. ფილტრები იწყება ორწერტილით, რასაც მოჰყვება ფილტრის სახელი, მაგ. :markdown , ნებისმიერი შინაარსით, რომ გაფილტროს დანართი ქვემოთ.
საერთო ფილტრები
ქვემოთ მოცემულია რამდენიმე გავრცელებული ფილტრი, მათ შორის ყველაზე პოპულარული ჯგუფი: css და: javascript.
- :cdata
- : ყავა
- :გაიქცა
- :javascript
- :ნაკლები
- :markdown
- :მარუკუ
- : უბრალო
- : შენახვა
- :რუბი
- :სასი
- :scss
- : ტექსტილი
Javascript ფილტრი
:javascript $("ღილაკი").on("დაწკაპუნება", ფუნქცია(მოვლენა) ($("p"). დამალვა("ნელი"); ));
შედგენილი HTML
CSS ფილტრები და Sass
:css .container ( ზღვარი: 0 ავტომატური; სიგანე: 960 პიქსელი; ) :sass .კონტეინერის ზღვარი: 0 ავტომატური სიგანე: 960 პიქსელი
შედგენილი HTML
რუბის ინტერპოლაცია
როგორც უკვე აღვნიშნეთ, ჰამლს შეუძლია შეაფასოს რუბი და ზოგჯერ შეიძლება იყოს შემთხვევები, როდესაც რუბი უნდა შეფასდეს უბრალო ტექსტში. ამ შემთხვევაში, Ruby უნდა იყოს ინტერპოლირებული საჭირო Ruby კოდის შეფუთვით.
ქვემოთ მოცემულია Ruby-ის მაგალითი, რომელიც ინტერპოლირებულია, როგორც კლასის სახელი.
%div(:class => "student-#(@student.name)")
შედგენილი HTML
SCSS და Sass
SCSS და Sass არის წინასწარი დამუშავების ენები, რომლებიც შედგენილია CSS-ში. ისინი ოდნავ ჰგვანან Haml-ს და აადვილებენ კოდის დაწერას ძალიან მცირე ბერკეტით. ინდივიდუალურად, SCSS და Sass-ს აქვთ იგივე წარმოშობა, მაგრამ ტექნიკურად მათ აქვთ განსხვავებული სინტაქსი.
მოკლედობისთვის, Haml და Sass იყვნენ ერთადერთი წინასწარი პროცესორები, რომლებიც განხილული იყო ამ სახელმძღვანელოში. ისინი ასევე აირჩიეს, რადგან ისინი აგებულია Ruby-ით და ჯდება პირდაპირ Ruby on Rails აპლიკაციებში. მათ ასევე დიდი მხარდაჭერა მიიღეს საზოგადოებისგან.
როდესაც საქმე ეხება წინასწარ პროცესორის არჩევას, მნიშვნელოვანია გავითვალისწინოთ რა არის საუკეთესო თქვენი გუნდისთვის და პროექტისთვის. Node.js-ში აშენებულ პროექტებს ალბათ უფრო მეტი სარგებლობა შეუძლიათ Jade-სა და Stylus-ისგან. თუმცა, ყველაზე მნიშვნელოვანი ასპექტი, რომელიც გასათვალისწინებელია, არის ის, რასაც თქვენი გუნდი იყენებს. ჩაატარეთ კვლევა თითოეული პროექტისთვის და შეარჩიეთ ყველაზე ინფორმირებული გადაწყვეტა.
რესურსები და ბმულები
- Haml - HTML აბსტრაქციის მარკირების ენა
- Sass - სინტაქსურად გასაოცარი სტილის ფურცლები
- Sass Playground SassMeister-ზე
განლაგების აბსოლუტურად ყველა გამოცდილი დიზაინერი იყენებს წინასწარ პროცესორებს. გამონაკლისები არ არის. თუ გსურთ იყოთ წარმატებული ამ საქმიანობაში, არ დაივიწყოთ ეს პროგრამები. ერთი შეხედვით, მათ შეუძლიათ დამწყებთათვის მშვიდი საშინელება გამოიწვიოს - ეს უკვე ძალიან ჰგავს პროგრამირებას! სინამდვილეში, თქვენ შეგიძლიათ გაარკვიოთ CSS წინასწარი პროცესორების ყველა მახასიათებელი დაახლოებით ერთ დღეში და თუ სცადეთ, თუნდაც რამდენიმე საათში. მომავალში ისინი მნიშვნელოვნად გაგიმარტივებენ ცხოვრებას.
როგორ გაჩნდა CSS წინასწარი პროცესორები
ამ ტექნოლოგიის მახასიათებლების უკეთ გასაგებად, მოდით მოკლედ ჩავუღრმავდეთ ვებ გვერდების ვიზუალური წარმოდგენის განვითარების ისტორიას.
როდესაც ინტერნეტის მასობრივი გამოყენება ახლახან დაიწყო, სტილის ფურცლები არ არსებობდა. დოკუმენტაცია დამოკიდებული იყო მხოლოდ ბრაუზერებზე. თითოეულ მათგანს ჰქონდა საკუთარი სტილი, რომელიც გამოიყენებოდა გარკვეული ტეგების დასამუშავებლად. შესაბამისად, გვერდები განსხვავებულად გამოიყურებოდა იმისდა მიხედვით, თუ რომელ ბრაუზერში გახსენით ისინი. შედეგი არის ქაოსი, დაბნეულობა, პრობლემები დეველოპერებისთვის.
1994 წელს ნორვეგიელმა მეცნიერმა ჰააკონ ლიმ შეიმუშავა სტილის ფურცელი, რომელიც შეიძლება გამოყენებულ იქნას HTML დოკუმენტისგან განცალკევებული გვერდის გარეგნობის სტილისთვის. იდეა მოეწონათ W3C კონსორციუმის წარმომადგენლებს, რომლებმაც მაშინვე დაიწყეს მისი დახვეწა. რამდენიმე წლის შემდეგ გამოქვეყნდა CSS სპეციფიკაციის პირველი ვერსია. შემდეგ ის მუდმივად იხვეწებოდა, იხვეწებოდა... მაგრამ კონცეფცია იგივე დარჩა: თითოეულ სტილს ენიჭება გარკვეული თვისებები.
CSS ცხრილების გამოყენება ყოველთვის პრობლემურია. მაგალითად, განლაგების დიზაინერებს ხშირად უჭირდათ თვისებების დახარისხება და დაჯგუფება და მემკვიდრეობა არც ისე მარტივია.
და შემდეგ მოვიდა 2000-იანი წლები. პროფესიონალი ფრონტ-ენდის დეველოპერები სულ უფრო და უფრო იწყებდნენ მარკირებას, ვისთვისაც მნიშვნელოვანი იყო მოქნილი და დინამიური მუშაობა სტილებთან. CSS, რომელიც იმ დროს არსებობდა, მოითხოვდა ბრაუზერის ახალი ფუნქციების პრეფიქსირებისა და თვალთვალის მხარდაჭერას. შემდეგ JavaScript-ისა და Ruby-ის ექსპერტები შეუდგნენ საქმეს, შექმნეს წინასწარი პროცესორები - დანამატები CSS-სთვის, რომლებიც ამატებენ მას ახალ ფუნქციებს.
CSS დამწყებთათვის: Preprocessors-ის მახასიათებლები
ისინი ასრულებენ რამდენიმე ფუნქციას:
- ბრაუზერის პრეფიქსების და ჰაკების გაერთიანება;
- სინტაქსის გამარტივება;
- შესაძლებელს გახდის ჩადგმულ სელექტორებთან მუშაობას შეცდომების გარეშე;
- გააუმჯობესეთ სტილის ლოგიკა.
მოკლედ: წინასწარი პროცესორი ამატებს პროგრამირების ლოგიკას CSS-ის შესაძლებლობებს. ახლა სტილის გაკეთება ხდება არა სტილის ჩვეულებრივი ჩამოთვლებით, არამედ რამდენიმე მარტივი ხრიკისა და მიდგომის დახმარებით: ცვლადები, ფუნქციები, მიქსინები, მარყუჟები, პირობები. გარდა ამისა, იყო მათემატიკის გამოყენების შესაძლებლობა.
დაინახა ასეთი დანამატების პოპულარობა, W3C-მა დაიწყო თანდათანობით დაემატა მათგან ფუნქციები CSS კოდში. მაგალითად, ასე გამოჩნდა calc() ფუნქცია სპეციფიკაციაში, რომელსაც მხარს უჭერს მრავალი ბრაუზერი. მოსალოდნელია, რომ მალე შესაძლებელი იქნება ცვლადების დაყენება და მიქსინების შექმნა. თუმცა, ეს მოხდება შორეულ მომავალში და წინასწარი პროცესორები უკვე აქ არიან და უკვე მშვენივრად მუშაობენ.
პოპულარული CSS წინასწარი პროცესორები. სას
შემუშავებულია 2007 წელს. თავდაპირველად, ეს იყო Haml-ის, HTML შაბლონის ძრავის კომპონენტი. Ruby on Rails-ის დეველოპერებმა მიიღეს ახალი კონტროლი CSS ელემენტებზე და დაიწყეს მისი გავრცელება ყველგან. Sass-ს აქვს ფუნქციების უზარმაზარი რაოდენობა, რომლებიც ახლა შედის ნებისმიერ წინასწარ პროცესორში: ცვლადები, ბუდობრივი სელექტორები, მიქსინები (მაშინ, თუმცა, მათ არგუმენტების დამატება არ შეგეძლოთ).
ცვლადების გამოცხადება Sass-ში
ცვლადები გამოცხადებულია $ ნიშნით. თქვენ შეგიძლიათ შეინახოთ თვისებები და მათი ნაკრები მათში, მაგალითად: „$borderSolid: 1px მყარი წითელი;“. ამ მაგალითში, ჩვენ გამოვაცხადეთ ცვლადი, სახელწოდებით borderSolid და შევინახეთ მასში მნიშვნელობა 1px მყარი წითელი. ახლა, თუ CSS-ში უნდა შევქმნათ 1px ფართო წითელი საზღვარი, უბრალოდ მიუთითეთ ეს ცვლადი თვისების სახელის შემდეგ. გამოცხადების შემდეგ, ცვლადები ვერ შეიცვლება. ხელმისაწვდომია რამდენიმე ჩაშენებული ფუნქცია. მაგალითად, გამოვაცხადოთ $redColor ცვლადი #FF5050 მნიშვნელობით. ახლა CSS კოდში, ზოგიერთი ელემენტის თვისებებში, ჩვენ ვიყენებთ მას შრიფტის ფერის დასაყენებლად: p (ფერი: $redColor; ). გსურთ ექსპერიმენტი გააკეთოთ ფერებზე? გამოიყენეთ ჩაბნელების ან განათების ფუნქციები. ეს კეთდება ასე: p ( ფერი: მუქი ($redColor, 20%); ). ეს წითელ ფერს 20%-ით ნათელს გახდის.
ბუდე
ადრე ბუდეების აღსანიშნავად გრძელი და უხერხული კონსტრუქციების გამოყენება გვიწევდა. წარმოვიდგინოთ, რომ გვაქვს div, რომელიც შეიცავს p და მასში, თავის მხრივ, მდებარეობს span. div-სთვის შრიფტის ფერი წითლად უნდა დავაყენოთ, p-სთვის - ყვითელი, span-ისთვის - ვარდისფერი. ჩვეულებრივ CSS-ში ეს ასე გაკეთდება:
CSS წინასწარი პროცესორის დახმარებით ყველაფერი უფრო მარტივი და კომპაქტური ხდება:
ელემენტები ფაქტიურად ბუდირებულია ერთმანეთის შიგნით.
წინასწარი პროცესორის დირექტივები
შეგიძლიათ ფაილების იმპორტი @import დირექტივის გამოყენებით. მაგალითად, ჩვენ გვაქვს fonts.sass ფაილი, რომელიც აცხადებს შრიფტების სტილებს. ჩვენ მას ჩავრთავთ მთავარ style.sass ფაილში: @import 'fonts'. მზადაა! ერთი დიდი სტილის ფაილის ნაცვლად, ჩვენ გვაქვს რამდენიმე, რომელთა გამოყენება შესაძლებელია საჭირო თვისებებზე სწრაფად და მარტივად წვდომისთვის.
მიქსინები
ერთ-ერთი ყველაზე საინტერესო იდეა. საშუალებას გაძლევთ დააყენოთ თვისებების მთელი ნაკრები ერთ ხაზზე. იმუშავეთ შემდეგნაირად:
@mixinlargeFont(
font-family: 'Times New Roman';
შრიფტის ზომა: 64px;
ხაზის სიმაღლე: 80px;
შრიფტის წონა: თამამი;
გვერდის ელემენტზე mixin-ის გამოსაყენებლად, ჩვენ ვიყენებთ @include დირექტივას. მაგალითად, ჩვენ გვინდა გამოვიყენოთ ის h1 სათაურზე. შედეგი არის შემდეგი კონსტრუქცია: h1 (@include: largeFont;)
მიქსინის ყველა თვისება მიენიჭება h1 ელემენტს.
Preprocessor Less
Sass სინტაქსი პროგრამირებას მოგვაგონებს. თუ თქვენ ეძებთ ვარიანტს, რომელიც უფრო შესაფერისია CSS დამწყები შემსწავლელებისთვის, შეამოწმეთ Less. იგი შეიქმნა 2009 წელს. მთავარი მახასიათებელი არის მშობლიური მხარდაჭერა, ასე რომ, განლაგების დიზაინერებს, რომლებიც არ იცნობენ პროგრამირებას, უფრო ადვილი იქნება მისი დაუფლება.
ცვლადები გამოცხადებულია @ სიმბოლოთი. მაგალითად: @fontSize: 14px;. ბუდე მუშაობს იგივე პრინციპებით, როგორც Sass-ში. მიქსინები გამოცხადებულია ასე: .largeFont() ( font-family: 'Times New Roman'; შრიფტის ზომა: 64px; ხაზის სიმაღლე: 80px; font-weight: bold; ). თქვენ არ გჭირდებათ წინასწარი პროცესორის დირექტივების გამოყენება დასაკავშირებლად - უბრალოდ დაამატეთ ახლად შექმნილი მიქსინი არჩეული ელემენტის თვისებებს. მაგალითად: h1 ( .largeFont; ).
სტილუსი
კიდევ ერთი წინასწარი პროცესორი. შექმნილია 2011 წელს იმავე ავტორის მიერ, რომელმაც მსოფლიოს აჩუქა Jade, Express და სხვა სასარგებლო პროდუქტები.
ცვლადები შეიძლება გამოცხადდეს ორი გზით - აშკარად ან იმპლიციტურად. მაგალითად: font = 'Times New Roman'; არის იმპლიციტური ვარიანტი. მაგრამ $font = 'Times New Roman' აშკარაა. მიქსინები დეკლარირებულია და ჩართულია ირიბად. სინტაქსია: redColor() ფერი წითელი. ახლა შეგვიძლია დავამატოთ ის ელემენტს, მაგალითად: h1 redColor();.
ერთი შეხედვით, Stylus შეიძლება დამაბნეველი ჩანდეს. სად არის "მშობლიური" ფრჩხილები და მძიმით? მაგრამ როგორც კი მასში ჩაყვინთავთ, ყველაფერი გაცილებით ნათელი ხდება. თუმცა, გაითვალისწინეთ, რომ ამ წინასწარი პროცესორის ხანგრძლივმა განვითარებამ შეიძლება „გააცილოთ“ კლასიკური CSS სინტაქსის გამოყენება. ეს ზოგჯერ იწვევს პრობლემებს, როდესაც საჭიროა "სუფთა" სტილებთან მუშაობა.
რომელი წინასწარი პროცესორი აირჩიოს?
ნამდვილად... არ აქვს მნიშვნელობა. ყველა ვარიანტი იძლევა დაახლოებით ერთსა და იმავე შესაძლებლობებს, უბრალოდ სინტაქსი განსხვავებულია თითოეულისთვის. ჩვენ გირჩევთ გააკეთოთ შემდეგი:
- თუ პროგრამისტი ხართ და გსურთ იმუშაოთ სტილებთან, როგორიცაა კოდი, გამოიყენეთ Sass;
- თუ თქვენ ხართ განლაგების დიზაინერი და გსურთ იმუშაოთ სტილებთან, როგორიცაა ჩვეულებრივი განლაგება, ყურადღება მიაქციეთ Less-ს;
- თუ მოგწონთ მინიმალიზმი, გამოიყენეთ Stylus.
ყველა ვარიანტისთვის ხელმისაწვდომია უამრავი საინტერესო ბიბლიოთეკა, რომელსაც შეუძლია კიდევ უფრო გაამარტივოს განვითარება. Sass-ის მომხმარებლებს ურჩევენ გადახედონ Compass-ს, ძლიერ ხელსაწყოს მრავალი ჩაშენებული ფუნქციით. მაგალითად, მისი ინსტალაციის შემდეგ, აღარასოდეს მოგიწევთ ფიქრი გამყიდველის პრეფიქსებზე. უფრო ადვილია ქსელებთან მუშაობა. არის ფერებთან, სპრიტებთან მუშაობის კომუნალური საშუალებები. უკვე გამოცხადებული მიქსინების რაოდენობა ხელმისაწვდომია. მიეცით ამ ხელსაწყოს რამდენიმე დღე - ამით თქვენ დაზოგავთ დიდ დროსა და ძალისხმევას მომავალში.
ავტორისგან: css პრეპროცესორებზე უკვე დიდი ხანია საუბრობენ. ბევრი დეველოპერი უკვე იყენებს მათ თავიანთი პროექტების შემუშავებაში. არიან ისეთებიც, რომლებსაც სმენიათ წინასწარი პროცესორების შესახებ ან წაკითხული აქვთ მათ შესახებ, მაგრამ არ ესმით, რა უპირატესობას ანიჭებენ პრეპროცესორებს css კოდის დაწერისას.
ბევრისთვის წინასწარი პროცესორები არის „საიდუმლო“ ტექნოლოგია, რომლის სარგებელი ძალიან პირობითია და არა აშკარა. ამ სტატიაში მე ვისაუბრებ მარტივი სიტყვებით იმაზე, თუ რა არის წინასწარი პროცესორები, რისთვის არიან ისინი და როგორ შეუძლიათ დაეხმარონ ვებ დეველოპერს.
რა არის CSS წინასწარი პროცესორები?
CSS წინასწარი პროცესორი არის CSS დანამატი, რომელიც აფართოებს სტანდარტული CSS-ის შესაძლებლობებს ახალი სინტაქსური კონსტრუქციებით.
ანუ ეს არ არის „რევოლუციური სუპერტექნოლოგია“. ეს არის ის, რაც აძლიერებს css-ს. ეს არის ის, რასაც შეუძლია ყოველდღიური რუტინული ოპერაციების ავტომატიზაცია და განვითარების დაჩქარება.
პრეპროცესორები გარდაქმნიან წინაპროცესორის ენაზე დაწერილ კოდს სუფთა და მოქმედ CSS კოდად. და გამოსავალზე ვიღებთ სუფთა, მოქმედ, ბრაუზერის კოდს. წინაპროცესორებთან მუშაობის სქემა შეგიძლიათ იხილოთ ქვემოთ.
როგორ ამარტივებს წინასწარი პროცესორები ცხოვრებას?
წინასწარი პროცესორები საშუალებას გაძლევთ დააჩქაროთ css კოდის წერა და გაამარტივოთ მისი მხარდაჭერა მომავალში.
განვიხილოთ მაგალითი. საიტი იყენებს წითელ შრიფტს. სუფთა css-ის გამოყენებით, თქვენ უნდა დააყენოთ ეს ფერი მრავალჯერ თითოეული ელემენტისთვის ინდივიდუალურად. და თუ გადაწყვეტთ შეცვალოთ წითელი ელფერი დროთა განმავლობაში, თქვენ უნდა შეცვალოთ იგი თითოეული ელემენტისთვის. წინასწარი პროცესორების გამოყენებით, ფერი ენიჭება ცვლადს ერთხელ და ეს ცვლადი უკვე მინიჭებულია თითოეულ ელემენტზე. თუ ამჯერად ფერის ჩრდილის შეცვლას გადაწყვეტთ, მისი შეცვლა მხოლოდ ერთ ადგილას დაგჭირდებათ.
ასეთი მაგალითი საკმაოდ ხშირად გვხვდება. და, როგორც დასაწყისში აღვნიშნე, წინაპროცესორების გამოყენებას ამ მაგალითში ბევრი უპირატესობა არ აქვს. კოდის ნებისმიერ რედაქტორში შეგვიძლია დავაჭიროთ კლავიატურის მალსახმობს "ctrl" + "F", ვიპოვოთ ფერის კოდი "#ff0000" და შევცვალოთ "#00ff00". და ფერი შეიცვლება წითელიდან მწვანემდე ყველა ადგილას მაუსის ერთი დაწკაპუნებით.
მაშ, რაში შეიძლება დაგვეხმაროს წინასწარი პროცესორები?
რა პრობლემებს წყვეტენ წინასწარი პროცესორები?
წინასწარი პროცესორები გვიზოგავს დროს და აკეთებენ ბევრ რუტინულ საქმეს ჩვენთვის ისეთი ფუნქციების წყალობით, როგორიცაა: ჩადგმული სელექტორები, მათემატიკური ფუნქციები, მითითებები მშობლის ამომრჩეველზე და კიდევ შეცდომის შეტყობინებები, რომლებიც გვეუბნებიან, სად და რატომ მოხდა შეცდომა კოდში.
ვნახოთ, როგორ დაგვეხმარება ეს ყველაფერი რეალური მაგალითებით:
დიდ ან ძალიან ძველ პროექტებში, რომლებიც მუდმივად ემატება და უმჯობესდება, css სტილები შეიძლება საკმაოდ ხშირად შეიცვალოს. და თუ სტილის ფაილი შეიცავს კოდს ათასობით ხაზს, მაშინ ძალიან მოუხერხებელია css რედაქტირების გაკეთება. ბევრად უფრო მოსახერხებელი იქნებოდა, თუ სტილები დაყოფილი იქნებოდა ლოგიკურ ბლოკებად და სტილის ყოველი ასეთი ბლოკი ცალკე ფაილში იქნებოდა.
წინასწარი პროცესორები წყვეტენ ამ პრობლემას თქვენი მხრიდან ყოველგვარი ძალისხმევის გარეშე. შესაძლოა გქონდეთ თქვენი პროექტიდან რამდენიმე წინასწარპროცესორული ფაილი, რომლებიც კომპილაციის შემდეგ ავტომატურად გაერთიანდება და შედეგად მიიღებთ ერთ „ლამაზ“ css ფაილს.
css-ის კიდევ ერთი პრობლემაა სტილისა და სელექტორების დუბლირება. როგორც პროექტი ვითარდება, ჩნდება რამდენიმე ფრაგმენტი, რომელთა ხელახლა გამოყენებაც შესაძლებელია. ასევე შეიძლება იყოს ბევრი ერთფეროვანი სელექტორი, რომელიც მხოლოდ ოდნავ განსხვავდება. შედეგად, თუ გადავიტანეთ ბლოკი ან დავარქვით რომელიმე ბლოკის კლასს, ბევრი სელექტორის რედაქტირება გვჭირდება.
მიქსინები წყვეტენ ამ პრობლემას წინასწარ პროცესორებში. მიქსინები არის ფუნქციები, პარამეტრიზებული თუ არა, რომლებიც აწარმოებენ რაიმე სახის CSS-ს, რომელიც შეგვიძლია ხელახლა გამოვიყენოთ სადაც საჭიროა.
შემდეგი პრობლემა არის დამოკიდებულების პრობლემა. მაგალითად, თქვენ გაქვთ ბლოკის სიგანე დაყენებული თქვენს სტილებში, მასზეა დამოკიდებული სხვა პარამეტრები, სხვა ბლოკების შეწევა და ა.შ. ერთი პარამეტრის სწორად შესაცვლელად, თქვენ მოგიწევთ შეასწოროთ ყველაფერი, რაც მასზეა დამოკიდებული.
ეს პრობლემა ძალიან მარტივად წყდება წინასწარ პროცესორებში ცვლადებით.
ყოველივე ზემოაღნიშნულის გარდა, წინასწარი პროცესორების გამოყენებისას თქვენ მთლიანად გამორიცხავს css ფაილში შეცდომის მიღების რისკს, იღებთ უფრო სუფთა, უფრო ლოგიკურ და ბრაუზერულ css-ს.
წინასწარი პროცესორების უპირატესობები
განლაგების სირთულეებიდან გამომდინარე, რომლებსაც წინასწარ პროცესორები ეხმარებიან, შეიძლება დასახელდეს წინასწარი პროცესორების შემდეგი უპირატესობები: ცვლადების გამოყენება, ბუდე, მიქსინები (მიქსინები), მემკვიდრეობა და ა.შ. და ასე შემდეგ - ეს ყველაფერი გასაგებია. მაგრამ უპირველეს ყოვლისა, მინდა თქვენი ყურადღება გავამახვილო იმ ფაქტზე, რომ წინასწარი პროცესორების ცოდნა გიხსნის შესაძლებლობას იპოვო კარგად ანაზღაურებადი სამუშაო, აიწიო კარიერის კიბეზე ასვლა და მინიმუმ გააორმაგოს შენი შემოსავალი.
ვნახოთ, რა ხელფასს სთავაზობენ ვებ სტუდიები განლაგების დიზაინერებს საიტზე წინასწარი პროცესორების ცოდნის გარეშე hh.ru:
და აქ არის ხელფასები, რომლებსაც ვებ სტუდიები სთავაზობენ კოდირებს, რომლებსაც აქვთ წინასწარი პროცესორების ცოდნა იმავე საიტზე:
როგორც ხედავთ, მაქსიმალური ხელფასი წინაპროცესორული ცოდნის გარეშე და მინიმალური ხელფასი წინაპროცესორული ცოდნით განსხვავდება 1,5-ჯერ. და თუ გადავხედავთ საშუალო მაჩვენებლებს, მაშინ გადახდა განსხვავდება მინიმუმ 2-3 ჯერ!
უფრო მეტიც, კიდევ რა შეიძლება აღინიშნოს, ამისათვის თქვენ არ გჭირდებათ ყველა წინასწარი პროცესორის ცოდნა. საკმარისია იცოდეთ ორი ყველაზე პოპულარული წინამორბედი - Sass და Less.
დასკვნა
წინასწარი პროცესორები ნამდვილად უადვილებენ დეველოპერებს ცხოვრებას, მათ შეუძლიათ სწრაფად გადაჭრას განლაგების დიზაინერის ყოველდღიური პრობლემები და აიღოს ყოველდღიური რუტინული ოპერაციები.
უმჯობესია ვიცოდეთ წინასწარი პროცესორები და არ გამოიყენოთ ისინი ყოველდღე, ან გამოიყენოთ ისინი საჭიროებისამებრ. ვიდრე არ იცოდეთ წინასწარი პროცესორები და გამოგრჩეთ საინტერესო მაღალანაზღაურებადი პროექტი ან უფრო მაღალანაზღაურებად სამუშაოზე გადასვლის შესაძლებლობა.
P.S.იყენებთ წინასწარ პროცესორებს განვითარებაში? კომენტარებში დაწერეთ რა პრეპროცესორებს იყენებთ? თუ ჯერ არ იყენებთ, რატომაც არა? გეგმავთ წინასწარ პროცესორების გამოყენებას?
კურსის ვიდეო პრეზენტაცია „Sass and Less Preprocessors. Front-end განვითარების ავტომატიზაცია და გამარტივება»
CSS წინასწარი პროცესორი (CSS წინასწარი პროცესორი)არის CSS-ის დამატება, რომელიც უზრუნველყოფს CSS-ს ახალ ფუნქციებსა და ფუნქციონირებას სინტაქსური კონსტრუქციების დამატებით.
პრეპროცესორების დანიშნულება: მოსახერხებელი სინტაქსის უზრუნველყოფა ვებ დეველოპერისთვის, რათა გაამარტივოს და დააჩქაროს პროექტებში სტილის შემუშავება და შენარჩუნება.
CSS წინასწარი პროცესორები აქცევენ კოდს, რომელიც დაწერილია წინაპროცესორის ენის გამოყენებით სუფთა და მართებულად.
წინასწარი პროცესორების დახმარებით თქვენი დაწერილი კოდი ხდება: ადამიანისთვის წასაკითხი, სტრუქტურირებული და ლოგიკური, პროდუქტიული.
ყველაზე პოპულარულ პრეპროცესორებს შორისააLess, Sass (Scss), Stylus. ასევე ნაკლებად შესამჩნევი ინსტრუმენტები ამ სფეროში არის Closure Stylesheets, CSS Crush, ისინი ამჟამად ნაკლებად პოპულარულია, მაგრამ მაინც ზოგიერთი დეველოპერი იყენებს მათ. შევეცადოთ გავიგოთ Less, Sass (Scss), Stylus-ის შესაძლებლობები და მახასიათებლები.
CSS-ის სტანდარტული გამოყენება საკმაოდ რთულია. სინტაქსი ბუდეების გარეშე უშუალოდ რთულია ვიზუალური აღქმისთვის. ნორმალური ცვლადების და ფუნქციების არარსებობა CSS კოდს ვიწრო და ბევრი ზედმეტი და არასაჭირო დეტალებით ხდის.
ხელმისაწვდომი დოკუმენტაცია - ახლა ნებისმიერ მსურველს შეუძლია დაეუფლოს შერჩეულ წინასწარ პროცესორს მოკლე დროში, დამატებითი ხარჯების გარეშე. მეორე უპირატესობა არის წინასწარი პროცესორების გამოყენების სიმარტივე. ამისათვის თქვენ უბრალოდ უნდა დააინსტალიროთ სპეციალური პროგრამა, რომელიც მონიტორინგს გაუწევს წინასწარ პროცესორისთვის განკუთვნილ ფაილებს და როდესაც ისინი შეიცვლება, ამ ფაილების შიგთავსს შეაგროვებს სუფთა CSS კოდში.
უფრო მოწინავე მომხმარებლებისთვის არის სპეციალური პროექტების შემქმნელები.
Ნაკლებიარის ყველაზე პოპულარული და ხშირად გამოყენებული წინასწარი პროცესორი. შემუშავებულია JavaScript-ის საფუძველზე, მოიცავს წინასწარ პროცესორის ძირითად მახასიათებლებს, მაგრამ არ იძლევა პირობით სტრუქტურებსა და მარყუჟებს ჩვენთვის ჩვეულებრივი გაგებით. მისი სიმარტივისა და ლაკონურობის გამო, არსებობს სტანდარტული სინტაქსი CSS-ისთვის და ფუნქციების გაფართოების შესაძლებლობა დანამატების ფუნქციონირებით.
LESS უზრუნველყოფს CSS-ის დინამიურ ფუნქციებს: ცვლადები, მიქსინები, ოპერაციები და ფუნქციები. დოკუმენტაცია ძალიან მოსახერხებელია დეველოპერებისთვის და სინტაქსი ძალიან ჰგავს სუფთა CSS-ს. პოპულარული ჩარჩოები, როგორიცაა Twitter Bootstrap, ფართოდ იყენებს LESS-ის დინამიურ მახასიათებლებს. თუმცა, LESS შესაძლებელს ხდის კლასების ხელახლა გამოყენებას მიქსების სახით სტილის ფურცლის ნებისმიერ ადგილას.
კიდევ ერთი ძლიერი და პოპულარული წინამორბედი არისსას. ამ ხელსაწყოს გარშემო დეველოპერთა უზარმაზარი საზოგადოება ჩამოყალიბდა. იგი დაარსდა 2007 წელს, როგორც HAML მოდული და დაწერილია Ruby-ში (უზრუნველყოფს C++ პორტს). მას აქვს ფუნქციების ფართო სპექტრი Less-თან შედარებით. წინასწარი პროცესორი აფართოებს თავის ფუნქციონირებას Compass ბიბლიოთეკით, რაც საშუალებას გაძლევთ გასცდეთ CSS-ს და იმუშაოთ უფრო ფართო მასშტაბით. გთავაზობთ ორი სახის სინტაქსს: Sass (Syntactically Awesome Style Sheets) არის მარტივი CSS სინტაქსი, რომელიც დაფუძნებულია იდენტობაზე. ის უფრო ძველ ვერსიად ითვლება. Scss (Sassy CSS) ეფუძნება სტანდარტულ CSS სინტაქსს.
- საკმაოდ ახალგაზრდა, მაგრამ უკვე პერსპექტიული CSS წინასწარი პროცესორი. შემუშავებულია ჯერ კიდევ 2010 წელს. ბევრი მიიჩნევს მას მოსახერხებელ და გაფართოებად წინასწარ პროცესორად და უფრო მოქნილად ვიდრე Sass. შემუშავებულია JavaScript-ში. არსებობს მრავალი სინტაქსის ვარიანტის მხარდაჭერა მსგავსი CSS-დან უფრო მარტივ და მსუბუქ ვარიანტებამდე.
დეველოპერის სასარგებლო ინსტრუმენტები:
- კოდეკიტი: ადგენს Sass, LESS და Stylus ფაილებს და შემდეგ ავტომატურად გადატვირთავს თქვენს ბრაუზერს ფაილების განახლების შემდეგ. მათ შორის ოპტიმიზებს პროექტის სურათებს სისტემის მუშაობის გაუმჯობესების მიზნით. ტექნოლოგია ფასიანია, მაგრამ ასევე არის საცდელი ვერსია სამუშაოსთვის.
- LiveReload: ამოწმებს ფაილებში ცვლილებებს, შემდეგ ამუშავებს მათ და ავტომატურად ატვირთავს ვებ ბრაუზერს. ვერსია მუშაობს Mac და Windows-ზე.
- სკაუტი: მუშაობს Sass-ით და Compass-ით Ruby გარემოში. მუშაობს Mac და Windows-ზე.
- მარტივი: მარტივი და მარტივი LESS CSS შემდგენელი Mac და Windows-ისთვის.
იმისათვის, რომ აირჩიოთ სწორი წინასწარი პროცესორი თქვენი სამუშაოსთვის, სცადეთ რამდენიმე. და ტესტის შედეგების მიხედვით, ბევრად გაგიადვილდებათ არჩევანის გაკეთება. ასევე, არ დაგავიწყდეთ, რომ როდესაც თქვენ ეუფლებით წინასწარ პროცესორს, თქვენ არ სწავლობთ ახალ ენას, არამედ მხოლოდ ახალ სინტაქსს და ფუნქციებს სწავლობთ. კომპანია ™ გისურვებთ სასიამოვნო მუშაობას CSS-ის სამყაროში!
2545 ჯერ დღეს ნანახია 1 ჯერ
26.07.2017
2017 წლის 5 საუკეთესო CSS წინასწარი პროცესორი თქვენი სამუშაო პროცესის დასაჩქარებლად.
CSS წინასწარი პროცესორები სპეციალურად შექმნილია იმისათვის, რომ CSS პროგრამისტების სამუშაო უფრო სახალისო გახდეს. ისინი საშუალებას გაძლევთ დაწეროთ ადვილად რედაქტირებადი და საიმედო კოდი ხელახლა გამოყენების შესაძლებლობით.
სხვა სიტყვებით რომ ვთქვათ, CSS წინასწარი პროცესორი არის CSS-ის დამატება ახალი ფუნქციებით: ცვლადები, გაფართოებები, იმპორტი და ა.შ.
ამ სტატიაში მე ვისაუბრებ 2017 წლის საუკეთესო 5 CSS წინასწარ პროცესორზე.
01. სას
SASS არის ყველაზე პოპულარული წინასწარი პროცესორი უზარმაზარი საზოგადოებისა და ძლიერი ფუნქციონირებით. ის მუშაობს მხოლოდ Ruby-თან ერთად და ძალიან ადვილია სწავლა. წინა ბოლოების უმეტესობა, როგორიცაა Bootstrap, Foundation და მატერიალიზება, აგებულია SASS-ის გამოყენებით.
SASS-ს აქვს ორი სინტაქსი:
- .სასი
- .scss
02. სტილუსი
Stylus არის კიდევ ერთი შესანიშნავი წინასწარი პროცესორი CSS დინამიურად გენერირებისთვის. თუ გსურთ გამოტოვოთ ხვეული ბრეკეტები, მძიმეები და მძიმით, მაშინ ეს შეიძლება იყოს თქვენი საუკეთესო ფსონი. Stylus იკვებება Node.js-ით და ძალიან მარტივია ინსტალაცია და გამოყენება. მას აქვს მრავალი მორგებული ფუნქცია, როგორიცაა saturation(). თქვენ ასევე შეგიძლიათ გამოიყენოთ სხვა წამყვანი შემდგენლების მიერ მოწოდებული ყველა ფუნქცია.
03.ნაკლები
Less, ასევე ცნობილი როგორც Less.js ან Less CSS, არის კიდევ ერთი წამყვანი CSS წინასწარი პროცესორი. ეს შესანიშნავი არჩევანია, თუ გჭირდებათ სტანდარტული ფუნქციები, როგორიცაა ცვლადები, ჩადგმული სტილები და ა.შ. ეს Javascript ბიბლიოთეკა თავდაპირველად Ruby-ში იყო დაწერილი.
- ასევე წაიკითხეთ:
04 სტილეკოვი
Stylecow არის Node-ში დაწერილი წინასწარი პროცესორი, რომელიც შეიძლება დაინსტალირდეს npm-ის გამოყენებით. მას აქვს ძლიერი API, რომლითაც შეგიძლიათ მარტივად შექმნათ დანამატები.
05. CSS Crush
PHP-ში ჩაშენებული წინასწარი პროცესორი, რომელიც შესანიშნავი ვარიანტი იქნება PHP პროგრამისტებისთვის, რადგან ის მუშაობს ბევრ პლატფორმაზე. CSS-Crush-ს აქვს ყველა ჩვეულებრივი წინასწარი პროცესორის ფუნქცია (ცვლადები, ჩადგმული სტილები და ა.შ.)
დასკვნა
თუ თქვენ ეძებთ საუკეთესო CSS წინასწარ პროცესორს, მაშინ ინტერნეტში ნახავთ მრავალფეროვან ვარიანტს. ჩემი აზრით, დამწყებთათვის საუკეთესო ვარიანტებია SASS და Stylus.
ჩვენ გირჩევთ წაიკითხოთ
საუკეთესო პროგრამები მონაცემთა აღდგენისთვის ნებისმიერი მედიიდან....
გამარჯობა, შენელების ერთ-ერთი ყველაზე გავრცელებული მიზეზი ...
