Php html შეკუმშვა. როგორ მუშაობს GZIP შეკუმშვა. გამომავალი შეკუმშვა

23.02.2019

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

ამიტომ, მინდა მოკლედ წარმოგიდგინოთ, ასე ვთქვათ, როგორ ვიმუშაოთ LESS css პრეპროცესორთან. რატომ ავირჩიე ის დასაწყისისთვის? რადგან მისი სინტაქსი იგივეა, რაც ჩვეულებრივი css. LESS არის css-ის დანამატი და თუ თქვენ უბრალოდ ჩასვით რეგულარულ კოდს css ფაილიდან, ის წარმატებით დაკომპლექტდება, ხოლო ნაკლებში შეგიძლიათ გამოიყენოთ ცვლადები და მიქსინები (ფუნქციები, რომლებიც მნიშვნელოვნად აჩქარებს ჩაწერას, მაგალითად, გრადიენტები ან თვისებები, რომლებიც მოითხოვს ბევრ გამეორებას სხვადასხვა პრეფიქსებით).

ასე რომ, დავიწყოთ. უპირველეს ყოვლისა, უნდა გვესმოდეს, რომ ნაკლებად არის ფაილი, რომელიც შედგენისას მოგვცემს მზა ფაილი css. მისი შედგენის რამდენიმე გზა არსებობს. თქვენ შეგიძლიათ შექმნათ LESS ფაილიდა გადაიყვანეთ იგი Javascript დახმარება on the fly, როდესაც გვერდი იტვირთება ან წინასწარ შეადგინეთ იგი და გამოიყენეთ მიღებული CSS ფაილი.

ჩვენ ვიყენებთ LESS-ს და Javascript ფაილი

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

<სკრიპტი src="less.js" type="text/javascript" >სკრიპტი >

შემდეგ ჩვენ შევქმნით ფაილს .less გაფართოებით და დავაკავშირებთ მას შემდეგი კოდის გამოყენებით:

<ბმული rel ="stylesheet/less" ტიპის ="text/css" href="style.less" >

ამ შემთხვევაში, LESS ფაილი უნდა განთავსდეს JS ფაილამდე. ახლა LESS ფაილი იმუშავებს ისევე, როგორც ჩვეულებრივი CSS.

LESS ფაილის შედგენა

ეს გზა მიზიდავს მეტი თემარომ თქვენ არ გჭირდებათ LESS ფაილების ჩატვირთვა მრავალჯერადი კავშირით, მაგრამ შეგიძლიათ დაუყოვნებლივ ჩატვირთოთ წინასწარ შემცირებული ერთეული კლიენტზე css ფაილი.
უპირველეს ყოვლისა, ჩვენ უნდა დავაყენოთ NodeJs. ამისათვის გადავდივართ ოფიციალურ ვებსაიტზე http://nodejs.org/ და ინსტალაციის ღილაკზე დაჭერით დაიწყება ჩამოტვირთვა საინსტალაციო ფაილიშენთვის ოპერაციული სისტემა. მისი ინსტალაციის შემდეგ, ახლა ჩვენ უნდა დავაყენოთ ნაკლები შემდგენელი, ამისათვის ჩვენ გავხსნით კონსოლს და შევიყვანთ:

Npm ინსტალაცია -g ნაკლები

ახლა მისი შედგენა შესაძლებელია ხელით კონსოლის საშუალებით. დეტალური ინსტრუქციებიშეგიძლიათ წაიკითხოთ LESS-ის ოფიციალურ ვებსაიტზე. ან გამოიყენეთ taskers (მათზე მოგვიანებით ვისაუბრებთ), ან გამოიყენეთ თქვენი IDE. მე ვიყენებ PhpStorm-ს File Watchers მოდულით. ახლა, მასში ჩვენი პროექტის გახსნის შემდეგ, ჩვენ ვქმნით მასში საქაღალდეს, მაგალითად, "წყარო" ან "ნაკლები", სადაც მოგვიანებით შევინახავთ ჩვენს წყაროს ფაილებს.

გახსენით Preferences -> File Watchers -> დააწკაპუნეთ "+" ფანჯრის ბოლოში და აირჩიეთ ფაილის ტიპი ნაკლები თვალის დევნებისთვის. ჩართულია მომენტში, თუ ყველაფერი გაკეთდა სწორად, მაშინ ნაგულისხმევი პარამეტრებითაც კი ჩვენი IDE მონიტორინგს გაუწევს პროექტში ნაკლებ ფაილს და აწყობს მათ რეალურ დროში, როდესაც ისინი შეიცვლიან და განათავსებს მათ საქაღალდეში, რომელიც კომპილირებულია. წყარო ფაილი. მთავარია დავრწმუნდეთ, რომ პროგრამის ველში მითითებულია გზა ნაკლები შემდგენლისკენ (რომელიც ჩვენ დავაყენეთ კონსოლში).

მუშაობა LESS-თან

და ბოლოს, მოდით გავერთოთ და დავიწყოთ LESS კოდის წერა. როგორც ხედავთ, კოდი ადვილად წასაკითხი და გასაგებია, რადგან სინტაქსი ძალიან ჰგავს ჩვეულებრივ css-ს, რაც ამცირებს დეველოპერისთვის მის გამოყენებაში შესვლის ბარიერს.

LESS-ში ცვლადები მუშაობს ისევე, როგორც PHP, JS და სხვა პროგრამირების ენების უმეტესობაში. თქვენ შეგიძლიათ გამოიყენოთ ისინი მნიშვნელობის შესანახად და შემდეგ გამოიყენოთ ცვლადები თავად მნიშვნელობის ნაცვლად, როცა დაგჭირდებათ.

@header-font: Georgia ; h1, h2, h3, h4 ( font-family : @header-font; } .დიდი( font-family :@header-font; }

ზემოთ მოყვანილ მაგალითში ვაცხადებთ ცვლადს @header-font და ვწერთ მნიშვნელობას “Georgia”. ახლა ჩვენ შეგვიძლია გამოვიყენოთ ეს ცვლადი, როცა გვინდა საქართველოს შრიფტის დაყენება. თუ გადავწყვეტთ, რომ Trebuchet MS უფრო მეტად შეეფერება ჩვენს სათაურებს, მაშინ არ დაგვჭირდება მთელი ფაილის გადახედვა, უბრალოდ შევცვლით ცვლადის მნიშვნელობას.
მე ვიპოვე ცვლადების დიდი გამოყენება საიტის ფერების განსაზღვრაში. ძველ კარგ დღეებში (რომლებიც არც თუ ისე დიდი ხნის წინ იყო) მე ვიყენებდი ასეთ რამეს:

/* ფერები ჩემი ვებსაიტისთვის #ff9900 - ნარინჯისფერი - გამოიყენება ბმულებისთვის და მონიშნული ერთეულებისთვის #cccccc - ღია ნაცრისფერი - გამოიყენება საზღვრებისთვის #333333 - მუქი შავი - გამოიყენება მუქი ფონისთვის და სათაურის ტექსტის ფერი #454545 - შუა შავი - გამოიყენება ზოგადი ტექსტისთვის ფერი */სხეული ( ფონი: #333333 ; ფერი: #454545 ; } ა ( ფერი: #ff9900 ; } ფერი: #333333 ; }

არაფერია ცუდი თქვენი ფერების ასე დოკუმენტირებაში, ეს ასეა კარგი პრაქტიკა, პრობლემა ის არის, რომ დოკუმენტაციას არაფერი აქვს საერთო თქვენი სტილის ფუნქციონალებთან. თუ გადაწყვეტთ ფერების შეცვლას კოდის 2000-ე სტრიქონის შემდეგ და შემდეგ გადაწყვეტთ 3567 ხაზს, ძალიან რთული იქნება ყველა ფერისა და დოკუმენტაციის გამოსწორება.
LESS-ით ჩვენ შეგვიძლია შევცვალოთ და დავაკონკრეტოთ ჩვენი სამუშაო პროცესი ერთდროულად.

/* ფერები ჩემი ვებსაიტისთვის */ @color-orange: #ff9900 ; @color-grey_light: #cccccc ; @color-black_dark: #333333; @color-black_medium: #454545; სხეული ( ფონი: @color-black_dark; ფერი: @color-black_medium; } ა ( ფერი :@ფერი-ნარინჯისფერი; } h1 , h2 , h3 , h4 , h5 , h6 ( ფერი: @color-black_dark; }

ცვლადი ფარგლები

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

ა ( @ფერი: #ff9900 ; ფერი :@color; } ღილაკი ( ფონი: @color; }

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

@color: # 222222 ; ა ( @ფერი: #ფფფფფ ; ფერი :@color; } ღილაკი ( ფონი: @color; }

ცვლადები ცვლადების შიგნით

თუ თქვენ გაქვთ კოდირებული PHP-ში, მაშინ თქვენ იცით, რომ შეგიძლიათ გამოაცხადოთ ცვლადის სახელი სხვა ცვლადში.

@color-chirstmas_red: #941 f1f; @name-of-color: "color-chirstmas_red"; ფერი: @@ფერის სახელი;

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

მუდმივები და ცვლადები

მნიშვნელოვანია აღინიშნოს, რომ იმის საპირისპიროდ, რაც ახლა წაიკითხეთ, LESS-ში ცვლადები უფრო მუდმივებს ჰგავს. ეს ნიშნავს, რომ ისინი, ცვლადებისგან განსხვავებით, შეიძლება განისაზღვროს მხოლოდ ერთხელ.

ოპერაციები

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

.ღილაკი( @ერთეული: 3 px; საზღვარი:@unit მყარი #დდდ ; padding: @unit * 3 ; ზღვარი: @unit * 2 ; }

ზემოთ მოცემული კოდი ადგენს @unit ცვლადს 3 პიქსელზე. შემდეგ ჩვენ ვაყენებთ ამ მნიშვნელობას საზღვრის სიგანეზე, ბალიშს სამჯერ ამ სიგანეზე, ხოლო ზღვარი ორჯერ ამ სიგანეზე.
შეგიძლიათ გამოიყენოთ გამრავლება, გაყოფა, შეკრება და გამოკლება. ჩარჩოს მქონე ბლოკის შესაქმნელად, რომელიც ზრდის გვერდების სიგანეს საათის ისრის მიმართულებით, შეგიძლიათ გამოიყენოთ შემდეგი კოდი:

. ყუთი ( @საბაზისო_ერთეული: 1px; საზღვარი: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 )

ფერის მართვა

LESS-ის ჩემი საყვარელი ფუნქციაა ფერების მართვა. თქვენ შეგიძლიათ გამოიყენოთ ოპერაციები ფერების და მრავალჯერადი შერევისთვის სპეციალური ფუნქციებიფერთან მუშაობისთვის.

ფერის ოპერაციები

თუ გსურთ შეცვალოთ ფერის მნიშვნელობა, ამის გაკეთება შეგიძლიათ სხვა ფერის გამოკლებით ან დამატებით.

@color: # 941 f1f; ღილაკი ( ფონი: #941f1f + #222222 ; საზღვარი: #941f1f - #111111 ; }

ზემოხსენებული ფონის ოპერაცია გაზრდის თითოეულ HEX მნიშვნელობას 2-ით. შედეგი იქნება “B64141″ - მსუბუქი ვერსია ორიგინალური ფერი. ჩარჩო ოპერაცია შეამცირებს თითოეულ HEX მნიშვნელობას 1-ით და გამოიმუშავებს მეტს მუქი ფერის: “830E0E”.
პრაქტიკაში ხშირია შემთხვევები, როცა ვიწყებთ ბაზის ფერიდა ჩვენ გვჭირდება მისი ოდნავ ჩაბნელებული ან განათებული ვერსია.

@color-button: #d24444 ; შეყვანა .გაგზავნა ( ფერი: #fff ; ფონი :@color-button; საზღვარი: 1 px მყარი @color-button - #222 ; padding: 5 px 12 px; }

ფერის ფუნქციები

ფერთან მუშაობის კიდევ ბევრი შესაძლებლობაა; LESS გაძლევთ მათზე მანიპულირების საშუალებას ბმულის დონე. შეგიძლიათ ფერების გაღიავება, გამუქება, გაჯერება, გაჯერება და როტაცია. გადახედეთ შემდეგ მაგალითებს სურათებით, რათა გაიგოთ, რას აკეთებს თითოეული მათგანი.

@color: # 3 d82d1; .left_box( ფონი: განათება (@ ფერი, 20 %) ; } .right_box( ფონი: ჩაბნელება (@ფერი, 20 %) ; }

ბუდე

CSS წერისას ვიყენებთ კასკადურ სტილებს. აბზაცის მინდვრების შესაცვლელად მხოლოდ სტატიის შიგნით, შეგიძლიათ გამოიყენოთ შემდეგი კოდი:

სტატია .პოსტი p ( ზღვარი: 0 0 12 px 0; }

ამ მიდგომაში ცუდი არაფერია, მაგრამ თუ ჩვენ ასევე გვჭირდება ბმულების, ციტატების, სათაურების სტილის შეცვლა და ა.შ. მხოლოდ სტატიის ფარგლებში, თქვენ უნდა გამოიყენოთ პრეფიქსი „article.post“ თითოეული ელემენტისთვის. ეს ხდის კოდის წერას უფრო მოსაწყენს და ართულებს წაკითხვას.
LESS-ში ჩვენ შეგვიძლია ჩავსვათ ეს წესები, რაც გვაძლევს ჩვენი სტილის უფრო მოკლე, უფრო ლოგიკურ ვერსიას. მაგალითად:

Article.post ( p( ზღვარი: 0 0 12px 0; ) a (ფერი: წითელი; ) a:hover (ფერი: ლურჯი; ) img ( float: მარცხნივ; ) )

შეწევა არ არის საჭირო, მაგრამ ეს კოდს უფრო წაკითხვას ხდის. ბუდეების დონეები შეზღუდული არ არის.

A ( ფერი: წითელი; ) p ( ზღვარი: 0 პიქსელი; ) სტატია ( a ( ფერი: მწვანე; ) p ( ფერი: #555; a ( ფერი: ლურჯი; ) ) )

მიქსინები

მიქსინები LESS-ში გიხსნით არასაჭირო კოდის აკრეფისგან. ოდესმე შეგიქმნიათ მომრგვალებული ჩარჩო, სადაც მხოლოდ ზედა კუთხეებია მომრგვალებული?

.ჩანართი { -webkit-border-ზედა-მარცხნივ-რადიუსი: 6 px; -webkit-border-ზედა-მარჯვნივ-რადიუსი: 6 px; -moz-border-radius-topleft: 6 px; -moz-border-radius-topright: 6 px; საზღვარი-ზემო-მარცხნივ-რადიუსი: 6 px; საზღვარი-ზემო-მარჯვნივ-რადიუსი: 6 px; }

და ასე ყოველ ჯერზე... LESS-ით, ეს ყველაფერი შეიძლება შეიცვალოს მიქსინის შექმნით. მინარევები არის მრავალჯერადი გამოყენებადი ელემენტები, რომლებიც შეიძლება დაემატოს ნებისმიერ ელემენტს, როგორც წესი. და თქვენ არც კი გჭირდებათ ახალი სინტაქსის სწავლა.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px) .tab (ფონი:#fff;

ზემოთ მოცემულ კოდში ჩვენ განვსაზღვრეთ .rounded_top ელემენტი ზედა კუთხეების დასამრგვალებლად. როდესაც მას ვამატებთ ნებისმიერ სხვა ელემენტს მიქსინის სახით (იხ. tab) ჩვენ არსებითად ვამპორტირებთ ამისთვის ჩვენ მიერ შექმნილ წესებს. ამ სინტაქსის წყალობით, ჩვენ შეგვიძლია გამოვიყენოთ ნებისმიერი ელემენტი, როგორც mixin.

.submit ელემენტის სტილები არის მომრგვალებული კუთხეები ზედა, თეთრიდა წითელი ფონი (მნიშვნელობა #333 გადაფარულია).

პარამეტრებთან შერევა

პარამეტრებთან შერევა რთულად ჟღერს, ისინი ძალიან წყვეტენ პრობლემას მარტივი გზით. ზემოთ მოყვანილ მაგალითებში თქვენ იხილეთ, თუ როგორ შეგვიძლია განვსაზღვროთ ელემენტი 6px რადიუსით ზედა კუთხეები. რა მოხდება, თუ გვინდა შევქმნათ ელემენტი 3px რადიუსით? უნდა გამოვაცხადოთ თუ არა სხვადასხვა მიქსები პიქსელის ყველა მნიშვნელობისთვის? რა თქმა უნდა, პასუხი არის არა, ჩვენ უნდა გამოვიყენოთ მიქსები პარამეტრებით!
ისინი ფუნქციების მსგავსია, რადგან მათ შეუძლიათ შეცვალონ მნიშვნელობები მათი გამოძახებისას. მოდით გადავწეროთ მაგალითი საზღვრის რადიუსით, რათა ვნახოთ როგორ მუშაობს.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -Radius-topright: @radius; border-top-left-radius: @radius.tab. .submit ( .rounded_top (3px); )

ზემოთ მოცემულ კოდში .tab ელემენტის რადიუსი არის 6px, ხოლო .submit ელემენტს ექნება მნიშვნელობა 3px.

სტანდარტული მნიშვნელობები

თუ თქვენ ჩვეულებრივ იყენებთ ერთსა და იმავე საზღვრის რადიუსს, მაგრამ ზოგჯერ გჭირდებათ განსხვავებული, თქვენ უნდა დააყენოთ mixin სტანდარტულ მნიშვნელობაზე.

Rounded_top(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius; გაგზავნა ( .rounded_top (3px); )

ამ მაგალითში .tab მიიღებს ნაგულისხმევ მნიშვნელობას 6px და .submit მიიღებს ნაგულისხმევ მნიშვნელობას 3px.

მრავალი ვარიანტი

თქვენ ასევე შეგიძლიათ გამოიყენოთ მრავალი პარამეტრიუფრო რთული მინარევების იდენტიფიცირება.

რადიუსი(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @background: #e7ba64, @padding: 4px) ( .radius(@radius); ფონი:@background; კონტური: 1px მყარი @background - #222; padding: @padding; ) .read_more ( .button(0px); )

ამ მაგალითში class.read_more ფორმატირებულია 4px ბალიშით, ფონის ფერი#e7ba64 და საზღვრის რადიუსით 0px.

ყველა არგუმენტის ერთდროულად გამოყენება

არგუმენტების გამოყენებისას კიდევ ერთი ვარიანტია მათი გაერთიანება. სტენოგრამის თვისებები CSS-ში აქვს მრავალჯერადი მნიშვნელობა, ჩაწერილია ერთმანეთის მიყოლებით.

div( საზღვარი: 1 px მყარი #bbb ; }

ყველას რომ ვკითხო საჭირო ელემენტებინაცრისფერი საზღვარი, შეგიძლიათ გამოიყენოთ ასეთი ფუნქცია:

Gray_border(@width: 1px, @type: solid, @color: #bbb)( border:@arguments; ) div (.gray_border(2px, წყვეტილი); )

@arguments ეს განსაკუთრებულია საკვანძო სიტყვა, რომელიც აჩვენებს ყველა პარამეტრს სათითაოდ მოცემული თანმიმდევრობით. ზემოთ მოყვანილი LESS კოდის შედეგი იქნება:

div( საზღვარი: 2 px წყვეტილი #bbb ; }

პარამეტრული მიქსები პარამეტრების გარეშე

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

გაფრთხილება (ფონი: წითელი; ფერი: თეთრი; შიგთავსი: 5px 12px; ) .error_message ( .alert; ზღვარი: 0 0 12px 0; )

ზემოთ მოყვანილი კოდის CSS ასეთი იქნება:

.გაფრთხილება ( ფონი: წითელი; ფერი: თეთრი; padding: 5 px 12 px; } .error_message( ფონი: წითელი; ფერი: თეთრი; padding: 5 px 12 px; ზღვარი: 0 0 12 px 0; }

.alert კლასის დასამალად თქვენ უნდა დააყენოთ პარამეტრი ცარიელი.

Alert() (ფონი: წითელი; ფერი: თეთრი; padding: 5px 12px; ) .error_message ( .alert; ზღვარი: 0 0 12px 0; )

დასრულებული CSS ასე გამოიყურება:

.error_message( ფონი: წითელი; ფერი: თეთრი; padding: 5 px 12 px; ზღვარი: 0 0 12 px 0; }

ეს ძირითადად გამოიყენება შესამცირებლად CSS ზომაფაილი.

სახელთა სივრცე

სახელთა სივრცეები პროგრამირების ენებში ჩვეულებრივ გამოიყენება მსგავსი ფუნქციონირების ელემენტების დასაჯგუფებლად. ჩვენ შეგვიძლია მივაღწიოთ რაღაც მსგავსს LESS-ში ჩვენი კოდის მიქსინების კომბინაციით.

#ჩემი_ჩარჩო ( p ( ზღვარი: 12px 0; ) a (ფერი:ლურჯი; ტექსტის დეკორაცია: არცერთი; ) .გაგზავნა (ფონი: წითელი; ფერი: თეთრი; ბალიშები: 5px 12px; ) )

როდესაც დაიწყებთ მუშაობას ახალ საიტზე თქვენს ჩარჩოზე დაყრდნობით, შეგიძლიათ დაამატოთ #my_framework ბმული და გამოიყენოთ იგი სახელების სივრცის გადაკეტვის გარეშე.

გაგზავნის_ღილაკი (#my_framework > .submit; )

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

#fw_1 ( p ( ზღვარი: 12px 0; ) a (ფერი:ლურჯი; ტექსტის დეკორაცია: არცერთი;) .გაგზავნა (ფონი: წითელი; ფერი: თეთრი; padding:5px 12px; ) ) #fw_2 ( p ( ზღვარი: 8px 0; ) a ( ფერი:წითელი; ტექსტის დეკორაცია: ხაზგასმული; ) .გაგზავნა (ფონი: ლურჯი; ფერი: თეთრი; ბალიშები: 8px 20px;) .submit_button (#fw_2 > .submit; )

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