9 Mixin bibliotēkas Sass Designers vajadzētu saņemt
Ja jūs izmantojat Sass savā attīstības darbplūsmā, jūs zināt, cik svarīgi ir maisījumi. Kad redzat dažas lietas, kas ir rakstītas atkārtoti un nogurdinoši CSS, tur mixins var palīdzēt novērst atkārtotu darbu. Maisījums satur CSS deklarācijas, kuras varat atkārtoti izmantot visā vietnē.
Izstrādātājiem ir daudz mixins, lai palīdzētu jums strādāt ar Sass jūsu attīstībā. Lielākā daļa aptver lietas, kas bieži atkārtojas CSS. No pielāgoties vairākās pārlūkprogrammās uz pogas, animācijas un pārejas efektu radīšana, atrast šo un vairāk šādās 11 mixin bibliotēkās, kas jums jāsaņem jūsu Sass attīstībai.
1. Bourbon
Bourbon ir Sass bibliotēka, kurā ir mixin, funkcijas un addons, kas ļauj vienkāršot stilu veidošanu pārrobežu pārlūku lietošanai. Man tas ir vissvarīgākais Sass mixin. Tajā ir gandrīz viss, kas jums nepieciešams, lai veidotu savu tīmekļa vietni, saglabājot savu stilu.
Pārbaudiet visu dokumentāciju, lai izmantotu katru pieejamo maisījumu un funkciju.
2. Sass CSS3 Mixins
Sass CSS3 Mixins nodrošina maisījumus, kas darbojas dažādās pārlūkprogrammās. Šeit atradīsiet virkni labākās prakses kombināciju, piemēram, fonu, robežu, kasti, kolonnu, fontu seju, transformāciju, pāreju un animāciju. Tas ir pietiekami jūsu stila vajadzībām. Lai lietotu, importējiet css3-mixins.scss un izsauciet maisījumu savā CSS klasē.
Lejupielādējiet šo kombināciju šeit.
3. CssOwl
CssOwl nodrošina noderīgus maisījumus, lai iestatītu elementa (relatīvā vai absolūtā) pozīciju un pievienotu saturu ar pseido selektoru ( : pēc un : pirms). Tas arī palīdz, ja vēlaties izveidot sprite elementus: mixin nodrošina elastību, lai iestatītu attēla pozīciju jūsu sprite. Papildus Sass, CssOwl mixin bibliotēka ir pieejama arī LESS un Stylus.
4. Sass pārtraukums
Breakpoint palīdz jums veikt mediju vaicājumus ar Sass vienkāršu veidu. Ar pārtraukuma punktu varat izveidot mainīgos lielumus un dot tai vērtību, kas nosaka min-platums vai maksimālais platums mediju vaicājumu. Tā kā jūsu radītajam mainīgajam ir nozīmīgs nosaukums, varat to viegli izsaukt lietošanai Sass.
5. Scut
Scut satur virkni atkārtoti izmantojamu Sass mixins, vietnieku, funkciju un mainīgo, kas palīdz jums viegli īstenot kopīgus stila koda modeļus. Tas nodrošina labākās prakses kodu, lai izveidotu tīmekļa sīkumus, piemēram, lapu izkārtojumus un veidošanas tipogrāfiju. Jūs varat samazināt atkārtojumu, rakstot kodu, atkārtoti izmantojot kodu biežāk. Tādējādi, palīdzot jums vairāk organizēt procesu.
6. Safrāns
Ar Saffron jūs varat viegli pievienot CSS3 animācijas un pārejas. Ir pieejamas duci animācijas un pārejas, ieskaitot izbalēšanu / izbeigšanu, slaidu ieeju / izeju, pieaugumu / iziešanu, kā arī dažādas sekas, piemēram, krata, teeter, lielība un citi. Lai izmantotu Safrānu, vienkārši iekļaujiet maisījumu Sass deklarācijā un izsauciet efekta nosaukumu savā CSS klasē. Jūs varat saņemt safrānu, instalējot to, izmantojot Bower vai Gem, vai vienkārši lejupielādējiet to manuāli no Github.
7. Ierakstiet iestatījumus
TypeSettings ir Sass rīku komplekts. Tas noteiks fontu lielumu modulārajā mērogā, izmantojot em (nevis rems vai pikseļus), vertikālo ritmu un atsaucīgo rādītāju virsrakstus. To var instalēt arī ar Bower, lejupielādēt izlaišanu vai repo. Plašāku informāciju skatiet tās lapā.
8. Sass Line
Sass Line ir Sass mixin, kas palīdz jums veikt labāku tipogrāfiju. Tajā tiek izmantota jūsu fontā esošā rems vienība, lai jūs varētu strādāt proporcionāli no bāzes līnijas. Sass Line izmanto precīzu vertikālo ritmu, kas balstīts uz bāzes līniju, un ļauj iestatīt moduļu skalu katram jūsu pārtraukuma punktam, lai iegūtu labas proporcijas visos jūsu vietnes aspektos.
Iet šeit, lai iegūtu sīkāku informāciju par to, kā to izmantot.
9. Andy.scss
Andy.scss ir noderīgu Sass mixins kolekcija, kas ir veidota, lai palīdzētu jums izveidot tīmekļa vietnes izskatu, vienlaikus saglabājot to vieglumu. Ir pieejami vairāki desmiti Sass mixins, sākot no fona līdz animācijai. Šeit ir iekļauti gandrīz visi biežāk izmantotie CSS rekvizīti. Iegūstiet to Githubā.
Vairāk ziņu par Sass:
- Darba sākšana ar Sass
- Rakšana Sassā
- Kā kompilēt Sass ar Sublime Text
- Bootstrap 3 izmantošana ar Sass
- Kā izveidot tiešsaistes VCard ar Sass & Compass
- CSS priekšprocesori salīdzinājumā ar Sass Vs. LESS
- Syntactically Awesome Stylesheets: izmantojot kompasu Sass
- Kā konvertēt CSS uz Sass un SCSS
