Beginning css preprocessors



Download 2,42 Mb.
Pdf ko'rish
bet33/59
Sana01.01.2022
Hajmi2,42 Mb.
#285229
1   ...   29   30   31   32   33   34   35   36   ...   59
Bog'liq
Beginning CSS Preprocessors

Listing 3-3.  Example of @import for Importing Style: Content of _parent.scss 

.parent{

        Background-color:#CCC;

}

Listing 3-4.  Example of @import for Importing Style: Content of file2.scss 

.child{


        @import "parent";

}

When the code shown in Listing 



3-4

 is executed, you get the output shown in Listing 

3-5

.

Figure 3-1.  Visual representation of how @import works in Sass




Chapter 3 

 advanCed SaSS



37

Listing 3-5.  Output of Listing 

3-4


 

.child .parent{

        Background-color:#CCC;

}

Thus when you apply import within a style rule, all the imported rules will be nested inside that specific 



rule. The result of this will be same as if the styles were nested inside that specific selector.

Plain CSS Imports

In addition to its own style of import, Sass also supports the CSS style @import. There are two factors that 

cause such a behavior to be triggered. These are as follows:

•  URL/path of the file to be imported ends with a .css extension

•  URL/path of the file to be imported begins with http(s)://

Thus, you cannot import plain CSS directly in Sass. However, there is a workaround for this. Since Sass 

is compatible with CSS, you can simply change the extension of the file from .css to .scss and import it.

@media

Media queries are the most essential part of today’s web design process. With media queries, you can 



customize your web app based on things like viewport width, viewport height, device width, device height, 

and orientation.

Normally, a developer building a web page would first write "normal" styles and then write media 

queries at the end. This would work fine for stylesheets with few lines of code; however, it will be nightmare 

to manage when the code increases to thousands of lines.

Sass provides something much easier. @media is used to write media queries similar to CSS. However, it 

has an added feature that it can be nested within a style rule. Sass will automatically build a media queries 

declaration and put respective styles inside it, as shown in Listing 

3-6

.


Download 2,42 Mb.

Do'stlaringiz bilan baham:
1   ...   29   30   31   32   33   34   35   36   ...   59




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish