30 Ocak 2015, Cuma

#6 Kullanarak Yerleşik İşlevler - Stylus Tutorials

O bu Scott öğreticiler yukarı seviyeye ve gerçekten bahsetmedim olduğu idi inşa ettiğini kullanarak Kalemle içinde fonksiyonları artık ne işlevleri öğrenebilir ve onlar neden konum Orada onlar sizin için tamamen yararlı olabilir nasıl bu yüzden hemen arama o oluyor geçelim bu yüzden bir kez daha yapacağız çoğu zaman geçireceğiz biz geri kalanı için var gibi gördüğünüz gibi stil sayfasındaki videolar Burada sağ ve benim kalemi benim CSS sahip Burada geçen hafta ve üzeri bakın tam olarak ne zaman bu ne oluyor derler bazı şeyler ithal önce bu yüzden mantıklı kullanarak oldum biz denilen ş

ey haline göndererek değil değişkenleri kullanarak oldum fonksiyonlar artık çok benzer ne kadar fonksiyonu fonksiyonları JavaScript gibi fonksiyonları ve işler Eğer bazı argümanlar iletebilirsiniz ve işlevi beri geri ne

reye kazanılmış değer ve ne merak ediyor olabilirsiniz CSS önişlemci kullanmak zorunda değer işlevlere sahip olmaktır sess dünyada sadece sen değişiklik yapamazsınız hayal değerler yüzden bir değişken var di

“Yerleşik Stylus işlevlerinin nasıl kullanılacağını öğrenin. http://learnboost.github.io/stylus/ Ekstra özellikler için Pro Up Düzeyine abone olun! http://levelu...”
LevelUpTuts

yelim ve her zamanda birkaç diğer değişkenleri evlat edinmek isteyen sonra renk ve çeşitli tonları da olacak Bu saatten sonra ama belki belki yüzde on daha hafif Bunu zaman yüzde 20 daha hafif yüzde 30 daha hafif Sadece sürekli değişken kullanarak ve daha sonra bu kullanarak Dahili rengini aydınlatmak için fonksiyonlar değişken United değişim I değiştirirseniz bu şekilde Tüm bu avcılık gitmek istiyorum senin için CSS başka bir şey değerler Ağır değişi

#6 Kullanarak Yerleşik İşlevler - Stylus Tutorials Resim 1 #6 Kullanarak Yerleşik İşlevler - Stylus Tutorials Resim 2 #6 Kullanarak Yerleşik İşlevler - Stylus Tutorials Resim 3 #6 Kullanarak Yerleşik İşlevler - Stylus Tutorials Resim 4

klik bu hesaplamalar hala senin değişkenin değeri olmayacağım tamamlandı bu değer kendisi kadar bu ancak gerçekten basit bir örnek Eğer fonksiyonları ile başa çıkabilirim farklı ilginç şeyler bir sürü vardır ve birçok fonksiyonu Sağ kalemi için inşa edilebilir ve 10 şansını ya yazabilirsiniz değil dek olan bir şey varsa Kendinizi bir şey sizin için parçalıyor olan var birçok çevrimiçi bir arkadaş france bir kullanımda bir fonksiyon her zaman olduğu RGB Aynı işlevi bir işlevi var ve sass benim en Kullanım biridir bar bulun

maktadır işlevleri ya değişkenleri ile çalışıyoruz katılacak veya onaltılık renk ve bunları yapmak istiyorum istediğin olan donukluk var onları görüyorum yapmak ve gerçekten tek yol önce Kaset RGBA olurdu yapmak fransa biz olacak burada bizim sayfanın bu ana bir bölüm vermek istiyorum da ve Bu bir arka plan rengi vermek ve bir arka plan rengi aşık iniş beyaz yüzden tekrar FFF diyebilirsiniz kuyu biz aslında bu mutlu yapmak istedim diyelim Ben opak on dokuz yüzde yani yüzde 10 şeffaflık bunu yapabiliriz yolu vardır aslında sadece bir RGBA fonksiyonu RGB işlevini kullanarak bir böylece yerine bu olduğunu hiçbir zorunda Ben değer RGBA olduğum 255 255 255 gelenler puanınızı 9 biz bunu istediği gibi biz aslında geçebilir ve onaltılık değeri kendisi ve diyebiliriz Şimdi bu güç ve FF Geçerli çalışma CSS olacak değil ama bir fonksiyonu olarak kullanılan Bu aslında bu hat duruşmayı tekrarlamak dönüştürmek için gidiyor hattına daha önce kelimeleri seksen 5255 RGB vardı 255 0.9 bu deli gitti ve biz burada ve daha sonra bu derleme ray bakın ben olmuştur dediğim gibi dizilmiş olabilir gerçek kullanılabilir dönüştürüldü RGBA değeri biz kullanmak istiyorsanız süper kullanışlı olabilir gibi biz sadece basitçe söyleyebiliriz gibi bizim değişkenlerin herhangi birşey evet bu şimdi bu mavi renk Bu bir RGB değeri olmayabilir Aslında ben hatırlamak için süper kolay o olacağını ise doğrulamak için 2-için-5 4000, biz bu var Bu farklı sayılara da asla var vahşi bir RGB değeri Böyle bir şey ezberlemek ama biz tanımlanan olduğunuz değişken mavi biliyorum evers dosya ve sonra biz o için RGBA değeri elde edebilirsiniz Burada bu yüzden benim en sevdiğim hi özledim tasarrufu biridir fonksiyonlar şimdi biraz sizi yapabilirsiniz şeyler ne olduğunu görmek için iyi bir örnek de Genel yönlü fonksiyonlar sizin işlev adı var olan Hangi RGBA ve daha sonra bazı argümanları kabul böylece bu durumda, onaltılık bir değer olarak bir renk kabul ve aa Mahala şeffaflık kabul Şimdi o geçti dönmek için gidiyor Üç değerler ve bu bir değer ve bir sonraki sayıda oranı o yapabilirsiniz aslında kendi yapmak fonksiyonları ve bu nedenle bu şeyler hakkında biraz daha iyi bir fikir alabilirsiniz içten çalışıyor Şimdi ben kalemle üzerine yerleşik işlevleri sayfaya bakmak değer katacak belgeler daha sonra bağlantı videonun açıklaması Şimdi bu yerleşik işlevleri ve oyunun bir çok şey var % uh her yerde böyle çok yararlı küçük kısayolları TBA biri çok açık olmayabilir ve aslında bazı resimler olmayabilir iki şey görünüşteki yararlı tüm belki kadar düşün stilistler ve şeyler için inşa edilir ve nasıl kullanılır oldum bir kütüphaneler Örneğin tipografik gelip stilist için gerçekten büyük bir kütüphane var ve temelde o farklı oranlarda kabul ediyor Bu aralıklarda ve oranlarda farklı roller tamamen tanımlanmış olacak Her dosya boyutu: Sayfanızda yüzden sana bir değer atlayarak o dayanır tamamen senin eğlenceli boyutunu seviyorum hesaplamak mümkün olacak aralıklarla farklı yüzdeleri böylece renge sahip ve onlara biz değiştirmek için güçlü olmak bir RGBA aynı ven gibi şeyler yapabilirsiniz d seti fiyatına biz gibi bir şey kullanarak oranına inebilir Bu fonksiyon, böylece gri tonlama sadece gri ölçek ve sonra yapmamız gereken tek şey bunu bir renk pass Bu kaydederek o uh az kızgın ölçekli sürüm% olacak Bu mavi renk ve bu sonucudur gördüğünüz gibi bu gri biz sonra Ayrıca çadır renkleri ve sizin bizim gibi alınmıştır sanat dersleri titty temelde beyaz rengini karıştırma bu yüzden diyebiliriz 10:00 ve biz çadır mavi istiyorum demek Bir çadır bu mavi yüzde seksen biz neredeyse bir geniş Burada açık mavi elde edilmelidir her 10 o yüzde elli biraz daha az o tanınabilir mavi hakkında biraz daha olacak ve sadece çadır gibi biz de gölge şeyler başlığı olacak hangi Siyah yüzden biz var burada yüzde 50 oranında bir şey değiştirebilir Daha önce ne vardı daha mavi çok ağır karanlık hatta ters gibi şeyler yapabilirsiniz ve kas saklayınız bu yüzde elli olduğunu ve biz bu sarı ters renk almak için gidiyoruz ya da aynı o buralarda bir iltifat yapabiliriz diyor sana verecek tamamlayıcı renk, biz bu demek yani eğer Şimdi tam olan bir başka Sarıyı var orada çalışıyorlardı mavi büyük bir shellow başka bu rengin iltifat tür yol Hatta belirli bir miktar D yüzyılda tercih böylece yerine söyleyerek yapabilirsiniz bize bir renk tamamen Oranı ayarlanabilir gri skala sürümünü vermek demek D yüzyıl I ile ve Terry Lee ancak belirli bir miktar dilme hattı ile yüzde elli rağmen yüzyıl bize yüzde 50 gri olan bir versiyonunu vermek için gidiyor Bu durumda bu grimsi mavi gri burada biz bile size yardımcı çeşit yaşıyorsanız işlevleri vardır yapabilirsiniz sayılar diyelim biz mutlak değeri veya bir şey istedim bu yüzden tamamen bu arka plan kurtulmak sağlar ve Sadece margin-top diyelim: ve en kullanmasına izin ABS ABS fonksiyonu geçen olacak ve bir değer ve akılda tutmak aslında bu konuda bir birim olabilir ve bu kadar bu yüzden biz aslında düşünmek zorunda değilsiniz bakım gitmiyor bir birim ve onu olduğu gibi boyutları ve sayıları ne olursa olsun hafta sonları gündüz margin-top, böylece: memleketi 10 piksel ve biz kurtarmak bu margin-top: Onlar almak için gittiğini, aslında 10 piksel biz de bir tavan gibi şeyler yapabilirsiniz Fonksiyon hafta bir CL ve var en biz bu değer aşkı vermek diyelim ve diyelim ki 4.3 Hava 4.6 Üzgünüm ve ben i biliyorum Yukarıdaki tavana üç eseri gönderdi Biz piksel kurtulmak eğer piksel o ne bize bile gibi bize beş verecek dört noktayı verecek Eğer margin-top biliyoruz: 5 gerçekten geçerli bir CSS değil bir böylece I'ma bunu fark edeceksiniz bazı sırp birimi olması güzel Biz yüzde olsaydı burada dan yüzde burada da ve sadece tavan gibi biz tam tersini yapacağız zemin işlevi var adı geçen ve etrafında en yakın hane tüm yuvarlak biz de bir olabilir kabul işlev Bir yıl değeri ve size vermek için gidiyor Birim kendisi biz birimi demek çıkıyor bu d ünitesi türdür kaydetmek Kontrol etmek gerekirse bu süper kullanışlı olmayabilir ve şimdi yüzde koşullu ifadelerin ve şeyleri içine herhangi bir noktasında bir şey olsun bir kez bunun gibi i alıyorum tür hangi değerin söylemek tamamen yararlı olabilir Düştüm Benim alıcı bir piksel değeri alma Bir yıl% uh böyle bir yüzde işareti ya da bir şey ama aynı zamanda kullanıcıların değişkenleri atamak yapabilirsiniz Örneğin çok farklı ben üniteleri Biz istedik, bu yüzde 4,6, aslında 4.6 piksel olmak Yapmamız gereken tüm gelmek olduğunu. Daha sonra bir dize olarak tip piksel ve doğanın bu fonksiyon tamamen olayı değiştirir Bizi vererek aslında bize olan veriyor bir birim Yeni ünite ile r-değeri Şimdi bu kuşatmalar olacak bazı jack hizmet için alıyorum n olabilir merak Ben benim olacak zaman Hiç olmasını tartma bir yüzdesi olarak bir değer geçirmeden olacak Gerçekten de gelebilir piksel bu eylemleri bunlar örneğin bunun için ilginç kere söylemek istedim vücut üzerinde: margin-sola olduğunu en istediğimiz diyelim şimdi -10 taksolun olmak için var olacak Yazar sol kenar boşluğu Bunun tersi olması demek Biz marjı sol diyebiliriz ve o zaman sadece bir değişken için renk itibariyle eskisi gibi Biz margin-solda kullanabilirsiniz: Böyle ve o vücut şimdi görürsünüz kullanıcıların derler sağlar Ana sol marj var ve vücudun bir marj var olduğunu -10 piksel hem ne bu das dedi ve her zaman onları% ah dedi olmak istiyorum istiyorum ki Kişinin olacak -10 olacak ve diğerleri, aslında bazı 10 pozitif olabilir onlar olumsuz bir marj var burada ızgara çerçeveleri bu gibi çalışır Pozitif marj Onları biz mutlak değer fonksiyonunu kullanabilirsiniz yapmak ve biz sadece söyleyebiliriz Böyle ATS fonksiyonu yani şimdi o margin-sol fark edeceksiniz: 10 piksel parmaklıklı vücut marjı yerli 10 Onlar mahsup edilecek gidiyoruz ve bir itme olacak 12'den sonra beni sola olumsuz iterek kadar mutlak değer daha sonra var yani pozitif bir değer dönen negatif bir değer bekliyor Şimdi yine bu yüzden o sırada sadece çok özel bir örneği ise Ben bu işlevleri seviyorum ile etrafında oynamaya onu gerçekten ilginç olduğunu stilist içinde var dediğim gibi ben istiyorum Seni dokümanlar biraz zaman geçirdim istiyorum ve sadece var ne olduğunu görmek vardı sizin CSS çalışırken o kadar mümkün olduğunu biliyorum ve stylus kodu muhtemelen düşünebildiğim Tüm bu iki değer de 11 diğer değişiklikleri ile ilgili konum ekli olanlar gerçek olacak Bir değişim ve mutlaka aynı değeri değilseniz nasıl biz değil bu yüzden muhtemelen onları bağlı tutan bir şekilde tanımlayabiliriz Her iki değerleri değiştirmek için gitmek zorunda şey değişirse Biz birilerinin içine bir kez ve o gerçekten sadece ölü değil benzeri bir çerçeve ve kalem uzantıları stilistler Ben tipografik gerçekten gidiyor çok vidalı çerçeveler vardır söz Heyecan verici Eğer boyunca onu koymak mümkün olabilmesi için Onlar bu inşa ve sadece onlar tam olarak ne yaptığını görmek için kullanın kalem kodu var çünkü yararlı bir çok şey sadece bu kullanarak bunu öğrenmek için fonksiyonları ve diğer insanların bunları kullanarak nasıl görmeye böylece bir sonraki şey, size kendi fonksiyonları olacak gösterisi oluşturabilirsiniz konum nasıl Her zaman olduğu gibi, bir kalemi kullanarak bir ölçeklenebilir ve öğreticiler herhangi bir sorunuz varsa ya da Yorumlar Facebook ya da Twitter ve seviye yukarı organizma haline geliyor Öğreticiler Sizden izlemek için teşekkür duymak seviyorum ve biz bir sonraki görürsünüz tarafından.

Açıklama

Yerleşik Stylus işlevlerinin nasıl kullanılacağını öğrenin. http://learnboost.github.io/stylus/ Ekstra özellikler için Pro Up Düzeyine abone olun! http://leveluptuts.com/level-up-pro Level Up Haber Bülteni Abone http://eepurl.com/AWjGz Sorularınız için yorumlar veya ziyaret sonrası: http://leveluptuts.com/forum Level Up Tuts Destek: http://leveluptuts.com/donations Geliştiriciler için inşa basit bulut barındırma, .: https://www.digitalocean.com/?refcode=67357174b09e

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

LevelUpTuts

LevelUpTuts

Ön uç web geliştiricileri için Öğreticiler. Level Up Tuts web geliştirme ve diğer medya uygulamaları ücretsiz öğreticiler sağlamanın bir yolu olarak Scott Tolinski ve Ben Schaaf tarafından başlatıldı. Biz bir medya yaratıcısı olarak büyüme bizim bilgi yararlı bulacağını umuyorum. Biz tam zamanlı (ve freelance) geliştiriciler Çünkü, Level Up Tuts sana getirmek için biz çalışıyoruz, bir yandan projesidir. Eğer öğrendiklerini hoşlanıyorsanız bu yüzden yeni dersler yapmaya devam edebilirsiniz bağış yapmak için çekinmeyin. Level Up Tuts bu hızlı anketi doldurarak geliştirmemize yardımcı olun https://docs.google.com/forms/d/1x7MTNp_umnvdkwJ5dfOVnnJtndkYdU7EDoCE9r8bYBk/viewform

YORUMLAR



10/10

  • 34
    Olumlu
  • 0
    Olumsuz
  • 7
    Yorum
  • 1853
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Blunty

    Blunty

    13 Mart 2006
  • Karan Thakur

    Karan Thakur

    23 HAZİRAN 2010
  • PaulGBelliveau

    PaulGBellive

    5 Mart 2009

ANKET



Bu sayfa işinize yaradı mı?