Preprocessor CSS: მიმოხილვა, შერჩევის, პროგრამა

აბსოლუტურად ყველა გამოცდილი ვებ დიზაინერებს გამოყენება preprocessor. არ არსებობს გამონაკლისი. თუ გსურთ წარმატების ამ საქმიანობაში, არ უნდა დაგვავიწყდეს, ამ პროგრამების შესახებ. ერთი შეხედვით, ისინი შეიძლება გამოიწვიოს ახალბედა მშვიდი საშინელებათა - ეს არის ძალიან მსგავსი პროგრამირების! ფაქტობრივად, შეგიძლიათ გაუმკლავდეთ ყველა თვისებები CSS preprocessor დაახლოებით დღეში, და თუ ცდილობენ, შემდეგ რამდენიმე საათის განმავლობაში. მომავალში, ისინი მნიშვნელოვნად გაამარტივებს თქვენს ცხოვრებაში.

როგორ გააკეთეს CSS preprocessor

უკეთ მახასიათებლები ამ ტექნოლოგიის, მოკლედ ჩავუღრმავდებით ისტორიის ვიზუალური პრეზენტაცია ვებ გვერდებზე.

როდესაც მხოლოდ დაიწყო მასიური გამოყენება ინტერნეტში, არ სტილების არ არსებობს. აღსრულების დოკუმენტების დამოკიდებული მთლიანად ბრაუზერში. თითოეულ მათგანს საკუთარი სტილის, რომელიც გამოყენებულ იქნა მკურნალობის გარკვეული tags. შესაბამისად, გვერდები გამოიყურება სხვადასხვა დამოკიდებულია წესრიგზე, რომლის ბრაუზერის გახსნა მათ. შედეგი - ქაოსი, გაუგებრობა, პრობლემები პროგრამისტებს.

1994 წელს ნორვეგიის მეცნიერი Håkon Lie შეიმუშავა სტილი ფურცელი, რომელიც შეიძლება იქნას გამოყენებული გამოჩენა გვერდებზე ცალკე HTML დოკუმენტი. იდეა priglanulas წევრები W3C, რომელმაც მაშინვე შეიქმნა იმისათვის, რომ დასრულების შემდეგ. რამდენიმე წლის შემდეგ მან გამოაქვეყნა პირველი ვერსია CSS დაზუსტება. შემდეგ იგი მუდმივად გაუმჯობესდა, დასრულების ... მაგრამ კონცეფცია დარჩა ყველა იგივე: თითოეული სტილი მითითებული გარკვეული თვისებები.

გამოყენება CSS მაგიდები ყოველთვის პრობლემატურია. მაგალითად, ვებ დიზაინერებს ხშირად ჰქონია პრობლემები დახარისხება და დაჯგუფება თვისებები და მემკვიდრეობის ასე არ არის მარტივი.

და მაშინ მოვიდა ორი thousandth. ნიშნები უფრო დაიწყო ჩაერთოს პროფესიული წინა ბოლომდე დეველოპერები, რომელიც მნიშვნელოვანია, რომ იყოს მოქნილი და დინამიური მუშაობის სტილის. არსებობდა იმ დროს მოითხოვა CSS ინდექსები განთავსებისა და თვალთვალის მხარდაჭერა ახალი შესაძლებლობები ბრაუზერში. მაშინ, JavaScript და Ruby ექსპერტები მიიღო ქვემოთ ბიზნესს, შექმნა preprocessor - დაშენების CSS, ახალი ფუნქციები ემატება მას.

CSS დამწყებთათვის: preprocessor თვისებები

მათ აქვთ რამდენიმე ფუნქციები:

• გავაერთიანოთ ბრაუზერის ინდექსები და khaki;

• გაამარტივებს სინტაქსი;

• მისცეს შესაძლებლობა იმუშაოს წყობილი სელექციონერები შეცდომების გარეშე;

• გააუმჯობესოს ლოგიკა სტილის.

მოკლედ რომ preprocessor დასძენს CSS პროგრამირების ლოგიკა შესაძლებლობები. ახლა, სტილის არ არის შესრულებული ჩვეულებრივი ჩამონათვალი სტილის და რამდენიმე მარტივი და მიდგომებს: ცვლადები, ფუნქციები, hagfish, ციკლის პირობებში. გარდა ამისა, გამოყენების უნარი მათემატიკა.

გაცილება პოპულარობა ეს add-ებზე, W3C დაიწყო თანდათან შესაძლებლობა მათ CSS კოდი. მაგალითად, დაზუსტება ასე არ calc () ფუნქცია, რომელიც მხარს უჭერს ბევრი ბრაუზერები. მოსალოდნელია, რომ მალე ეს იქნება შესაძლებელია მითითებული ცვლადები და შექმნას hagfish. თუმცა, ეს მოხდება შორეულ მომავალში, და preprocessors უკვე აქ და უკვე კარგად მუშაობს.

პოპულარული preprocessors CSS. Sass

დიზაინი 2007 წელს. თავდაპირველად კომპონენტი Haml - შაბლონი HTML. ახალი ფუნქციებით CSS ელემენტების კონტროლი relished დეველოპერები Ruby on Rails, რომელიც გავრცელდა ყველგან. Sass დიდი რაოდენობით ფუნქციები, რომლებიც ახლა შედის ნებისმიერი preprocessor: ცვლადები, embedding სელექციონერები hagfish (მაშინ, თუმცა, ეს არგუმენტები არ შეიძლება დაემატოს).

გამოცხადების ცვლადები Sass

ცვლადების განაცხადა $ ნიშანი. მათ შეუძლიათ შენარჩუნება მათი თვისებები და კომპლექტი, მაგალითად: "$ borderSolid: 1px მყარი წითელი;". ამ მაგალითად, განაცხადა ცვლადში borderSolid და გადაარჩინა იგი ვაფასებთ 1px მყარი წითელი. ახლა, თუ CSS ჩვენ უნდა შევქმნათ წითელი საზღვრის სიგანე 1px, უბრალოდ მიუთითებს იმაზე, რომ ცვლადი შემდეგ ქონება სახელი. გამოცხადების შემდეგ ცვლადები არ შეიძლება შეიცვალოს. არსებობს რამდენიმე ჩაშენებული ფუნქციები. მაგალითად, განაცხადოს ცვლადი ღირებულება $ redColor # FF5050. ახლა კი, CSS კოდი თვისებები ნებისმიერ ელემენტს, გამოიყენოთ იგი მითითებული შრიფტის ფერი: p {ფერი: $ redColor; }. გსურთ ექსპერიმენტი ფერი? გამოიყენეთ ფუნქცია Darken ან lighten. ეს კეთდება იმისათვის,: p {ფერი: მუქდება ($ redColor, 20%); }. შედეგად, ფერი redColor 20% იქნება მსუბუქია.

Sass ბევრი ჩაშენებული ფუნქციები. ღირს მინიმუმ წაიკითხოთ, მაგრამ უკეთესი - უნდა ვისწავლოთ.

მობუდარი

მანამდე, მიუთითებს იმაზე, მობუდარი უნდა გამოიყენოს ხანგრძლივი და არასასიამოვნო დიზაინი. წარმოიდგინეთ, რომ ჩვენ გვაქვს div, რომელიც p, და ეს, თავის მხრივ, მითითებული span. იყიდება div, ჩვენ უნდა მითითებული შრიფტის ფერი წითელი, p - ყვითელი, მალები - ვარდისფერი. In ტიპიური CSS ეს უნდა გაკეთდეს შემდეგნაირად:

div {

ფერი: წითელი;

}

div p {

ფერი: ყვითელი;

}

div p span {

ფერი: ვარდისფერი;

}

ცენტრთან preprocessor ყველა ხდება უფრო ადვილია და უფრო კომპაქტური:

div {

ფერი: წითელი;

P {

ფერი: ყვითელი;

.span {

ფერი: ვარდისფერი;

}

}

}

ელემენტები სიტყვასიტყვით "ინვესტიცია" ერთმანეთს.

წინასწარ პროცესორი დავალებები

გამოყენება @import დავალებები შეიძლება ფაილების იმპორტი. მაგალითად, ჩვენ გვაქვს fonts.sass ფაილი, რომელიც აცხადებს სტილის შრიფტები. შეაერთეთ ის მთავარი ფაილი style.sass: @import "შრიფტები. შესრულებულია! იმის ნაცვლად, რომ ერთ დიდი ფაილი სტილის ჩვენ გვაქვს რამდენიმე, რომ შეიძლება გამოყენებულ იქნას სწრაფი და ადვილი ხელმისაწვდომობა საჭირო თვისებები.

hagfish

ერთ-ერთი ყველაზე საინტერესო იდეები. იგი საშუალებას იძლევა ერთ ხაზი ვთხოვო კომპლექტი თვისებები. მოქმედებს შემდეგნაირად:

@mixin largeFont {

font-family: "Times New Roman ';

font-size: 64px;

ხაზის სიმაღლე: 80px;

font-weight: bold;

}

Hagfish ვრცელდება იმ ელემენტს გვერდზე, გამოიყენოთ დირექტივა @include. მაგალითად, ჩვენ გვინდა, რომ გამოიყენოს იგი h1 header. ჩვენ გვაქვს შემდეგი სტრუქტურა: H1 {@include: largeFont; }

ყველა თვისებები hagfish გვაკისრია h1 ელემენტს.

preprocessor Less

სინტაქსი Sass იხსენებს პროგრამირების. თუ თქვენ ეძებს ვარიანტი, რომელიც უფრო შესაფერისი დამწყებთათვის სწავლობს CSS, ვეძებოთ Less. იგი შეიქმნა 2009 წელს. მთავარი ფუნქცია - მხარდაჭერა CSS შექმნილი სინტაქსი, ამიტომ იციან პროგრამირების დამკაბადონებელი ეს იქნება უფრო ადვილი უნდა ვისწავლოთ.

ცვლადები განაცხადა გამოყენებით @ სიმბოლო. მაგალითად: @fontSize: 14px;. მობუდარი სამუშაოები იმავე პრინციპებს, როგორც Sass. Hagfish არიან შემდეგნაირად გადანაწილდა: .largeFont () {font-family: "Times New Roman '; font-size: 64px; ხაზის სიმაღლე: 80px; font-weight: bold; }. დაკავშირება არ არის საჭირო, გამოიყენოთ წინასწარ პროცესორი დავალებები - უბრალოდ დაამატოთ ახლადშექმნილი hagfish თვისებები შერჩეული ელემენტს. მაგალითად: h1 {.largeFont; }.

Stylus

სხვა preprocessor. შეიქმნა 2011 წელს და იმავე ავტორის, რომ მისცა მსოფლიოს Jade, Express და სხვა სასარგებლო პროდუქტები.

ცვლადები შეიძლება ითქვას, ორი გზა - ან ღიად ან ირიბად. მაგალითად: font = "Times New Roman '; - ფარული ვარიანტი. მაგრამ $ font = "Times New Roman" - ნათელი. Hagfish დეკლარირებულია და ირიბად უკავშირდება. სინტაქსი ასეთია: redColor () ფერი წითელი. ახლა ჩვენ შეგვიძლია დაამატოთ ნივთი, მაგალითად: h1 redColor ();.

Stylus on შეხედვით ეს შეიძლება, როგორც ჩანს, გაუგებარია. სად არის "მშობლიური" ფრჩხილებში და semicolons? მაგრამ აუცილებელია, რომ plunge შევიდა, ყველაფერი ხდება უფრო ნათელი. გახსოვდეთ, რომ გრძელვადიანი განვითარების ამ preprocessor შეიძლება "მაგვარი" თქვენ გამოიყენოს კლასიკური CSS სინტაქსი. ეს ზოგჯერ იწვევს პრობლემებს, როდესაც მქონე მუშაობა "სუფთა" სტილი.

რა preprocessor აირჩიოს?

ფაქტობრივად, ეს არის ... ეს არ აქვს. All versions გთავაზობთ დაახლოებით იგივე თვისებები მხოლოდ სინტაქსი თითოეული არის განსხვავებული. ჩვენ გირჩევთ გააგრძელოთ შემდეგი რედაქციით:

• თუ თქვენ - პროგრამისტი და გსურთ მუშაობა სტილის როგორც კოდი, გამოიყენოთ Sass;
• თუ თქვენ - coder და გსურთ მუშაობა სტილის როგორც ჩვეულებრივი განლაგება, ყურადღება მიაქციონ Less;
• თუ გნებავთ მინიმალიზმი, გამოიყენოთ Stylus.

ყველა ვარიანტი გაუთავებელი რიგი საინტერესო ბიბლიოთეკების, რომელიც შეიძლება კიდევ უფრო გაამარტივებს განვითარებას. მომხმარებელი Sass რეკომენდირებულია ყურადღება მიაქციონ Compass - ძლიერი ინსტრუმენტი ბევრი ჩაშენებული ფუნქციები. მაგალითად, მას შემდეგ, რაც თქვენ დააინსტალირეთ თქვენ არასოდეს არ უნდა ფიქრი, რომ გამყიდველი მობილური პრეფიქსი. ამარტივებს მუშაობა ბადეები. არსებობს ინსტრუმენტები მუშაობის ყვავილები, sprites. სპექტრი უკვე გამოაცხადა hagfish. მიეცით ამ ინსტრუმენტი რამდენიმე დღის - ამით თქვენ გადარჩენა ბევრი დრო და ძალისხმევა მომავალში.