Nangungunang 40 Mga Tanong at Sagot sa Panayam sa SASS (2024)

Narito ang mga tanong at sagot sa panayam ng SASS at SCSS para sa mga fresher pati na rin sa mga may karanasang kandidato upang makuha ang kanilang pinapangarap na trabaho.

1) Ipaliwanag kung ano ang Sass? Paano ito magagamit?

Ang Sass ay nangangahulugang Syntactically Awesome Stylesheets at nilikha ni Hampton Catlin. Ito ay isang extension ng CSS3, pagdaragdag ng mga nested na panuntunan, mixin, variable, selector inheritance, atbp.

Maaaring gamitin ang Sass sa tatlong paraan

Bilang isang command line tool
Bilang isang standalone na Ruby module
Bilang isang plugin para sa anumang framework na pinagana ng Rack

Libreng PDF Download: Mga Tanong at Sagot sa Panayam ng SASS

2) Ilista ang mga pangunahing tampok para sa Sass?

Kabilang sa mga pangunahing tampok para sa Sass

Buong CSS3-compatible
Mga extension ng wika gaya ng nesting, variable, at mixin
Maraming mga kapaki-pakinabang na function para sa pagmamanipula ng mga kulay at iba pang mga halaga
Mga advanced na feature tulad ng mga control directive para sa mga library
Well-formatted, nako-customize na output

3) Ilista ang Mga Uri ng Data na sinusuportahan ng SassScript?

Sinusuportahan ng SassScript ang pitong pangunahing uri ng data

Mga Numero ( hal; 1,5 ,10px)
Mga string ng mga text ( g., “foo”, 'bar', atbp.)
Mga Kulay (asul, #04a3f9)
Mga Boolean (true o false)
Nulls (hal; null)
Listahan ng mga value, na pinaghihiwalay ng space o mga kuwit (g., 1.5em, Arial, Helvetica atbp.)
Mga mapa mula sa isang value patungo sa isa pa (g., ( key 1: value1, key 2: Value 2))

4) Ipaliwanag kung paano tukuyin ang isang variable sa Sass?

Ang mga variable sa Sass ay nagsisimula sa isang ($) sign at ang variable na pagtatalaga ay ginagawa gamit ang isang colon(:).

5) Ipaliwanag kung ano ang pagkakaiba ng Sass at SCSS?

Ang pagkakaiba sa pagitan ng Sass at SCSS ay iyon,

Si Sass ay isang CSS pre-processor na may mga pagsulong sa syntax at extension ng CSS3
May dalawang syntax si Sass
Ang unang syntax ay "SCSS" at ginagamit nito ang .scss extension
Ang iba pang syntax ay naka-indent na syntax o "Sass" lang at ginagamit nito ang .sass na extension
Habang ang Sass ay may maluwag na syntax na may puting espasyo at walang semicolon, ang SCSS ay higit na kahawig ng CSS

Ang anumang wastong dokumento ng CSS ay maaaring ma-convert sa Sass sa pamamagitan lamang ng pagpapalit ng extension mula sa.CSS patungong.SCSS.

6) Para saan ginagamit ang Selector Nesting sa Sass?

Sa Sass, nag-aalok ang selector nesting ng paraan para sa mga may-akda ng stylesheet na makalkula ang mga mahahabang tagapili sa pamamagitan ng paglalagay ng mas maiikling mga selector sa bawat isa.

7) Ipaliwanag kung para saan ang @extend function na ginagamit sa Sass?

Sa Sass, ang @EXTEND na direktiba ay nagbibigay ng isang simpleng paraan upang payagan ang isang tagapili na magmana ng mga istilo ng isa pa. Nilalayon nitong magbigay ng paraan para mapalawig ng isang selector A ang mga istilo mula sa isang selector B. Kapag ginawa ito, idaragdag ang selector A sa selector B upang pareho silang magkapareho ng mga deklarasyon. Pinipigilan ng @EXTEND ang code bloat sa pamamagitan ng pagpapangkat ng mga tagapili na may parehong istilo sa isang panuntunan.

8) Ipaliwanag kung ano ang gamit ng @IMPORT function sa Sass?

Ang @IMPORT function sa Sass

Pinapalawak ang panuntunan sa pag-import ng CSS sa pamamagitan ng pagpapagana ng pag-import ng mga SCSS at Sass file
Ang lahat ng na-import na file ay pinagsama sa isang nai-output na CSS file
Maaaring halos maghalo at tumugma sa anumang file at maging tiyak sa lahat ng iyong mga estilo
Ang @IMPORT ay kumukuha ng filename upang i-import

9) Bakit itinuturing na mas mahusay si Sass kaysa MABAIT?

Binibigyang-daan ka ng Saas na magsulat ng mga reusable na pamamaraan at gumamit ng mga logic statement, e., mga loop, at mga kondisyon
Maaaring ma-access ng user ng Saas ang Compass library at gumamit ng ilang kahanga-hangang feature tulad ng dynamic sprite map generation, legacy browser hacks at cross-browser support para sa mga feature ng CSS3
Binibigyang-daan ka rin ng Compass na magdagdag ng panlabas na balangkas tulad ng Blueprint, Foundation o Bootstrap sa taas
Sa LESS, maaari kang magsulat ng pangunahing logic na pahayag gamit ang isang 'guarded mixin', na katumbas ng Sass if na mga pahayag
Sa LESS, maaari kang mag-loop sa mga numeric na halaga gamit ang mga recursive function habang pinapayagan ka ng Sass na umulit ng anumang uri ng data
Sa Sass, maaari kang sumulat ng iyong sariling mga madaling gamiting function

10) Ipaliwanag kung ano ang gamit ng Mixin function sa Sass? Ano ang kahulugan ng DRY-ing out ng mixin?

Binibigyang-daan ka ng Mixin na tukuyin ang mga istilo na maaaring magamit muli sa buong stylesheet nang hindi kinakailangang gumamit ng mga hindi semantiko na klase tulad ng .float-left.

Ang pagpapatuyo sa isang paghahalo ay nangangahulugan ng paghahati nito sa mga dynamic at static na bahagi. Ang dynamic na mixin ay ang isa na talagang tatawagan ng user, at ang static na mixin ay ang mga piraso ng impormasyon na kung hindi man ay mado-duplicate.

11) Ipaliwanag kung ano ang Sass Maps at ano ang gamit ng Sass Maps?

Ang Sass map ay isang structured na data sa isang hierarchical na paraan at hindi lang isang grupo ng mga variable. Makakatulong ito sa pag-aayos ng code. Ang ilang mahusay na paggamit ng Sass ay

Ito ay lubhang kapaki-pakinabang kapag nakikitungo sa mga layer ng mga elemento sa iyong proyekto
Makakatulong ito sa pamamahala ng kulay kapag may mahabang listahan ng iba't ibang kulay at lilim
Gamitin ang icon na mapa para sa iba't ibang mga icon ng social media halimbawa: facebook: '\e607' o twitter: '\e602'
Hindi tulad ng ibang programming library, ang Sass map ay bubuo lamang ng code na gagamitin

12) Ipaliwanag kung paano naiiba ang mga komento ni Sass sa regular na CSS?

Ang syntax para sa mga komento sa regular na CSS ay nagsisimula sa /* komento...*/, habang sa SASS mayroong dalawang uri ng komento, ang iisang linyang komento // at ang multiline na CSS na komento na may /* */.

13) Sinusuportahan ba ni Sass ang mga inline na komento?

Iisang linyang komento // ay aalisin ng .scss pre-processor at hindi lalabas sa iyong .css file

Habang ang komento */ ay wastong CSS, at pananatilihin sa pagitan ng pagsasalin mula sa .scss patungo sa iyong .css file

14) Paano ginagamit ang interpolation sa Sass?

Sa Sass, maaari mong tukuyin ang isang elemento sa isang variable at i-interpolate ito sa loob ng Sass code. Ito ay kapaki-pakinabang kapag itinatago mo ang iyong mga module sa magkahiwalay na mga file.

15) Ipaliwanag kung kailan mo magagamit ang %placeholder sa Sass?

Kapaki-pakinabang ang %placeholder sa Sass kapag gusto mong magsulat ng mga istilo na dapat palawigin, ngunit hindi mo gustong makita ang mga base na istilo sa mga istilo ng output ng CSS

16) Posible bang mag-nest ng mga variable sa loob ng mga variable sa Sass?

Ang interpolation ng mga pangalan ng variable ay hindi posible sa kasalukuyan sa Sass. Gayunpaman, maaari kang gumamit ng interpolation ng mga placeholder.

17) Ano ang Sass cons and pros?

Mga kalamangan:

Madaling matutunan ang Sass lalo na para sa kanila na may background ng Python, Ruby o Coffescript at lugar gamit ang mga function, writing mixins
Ang CSS ay madaling ma-convert sa Sass
Sa buong proyekto, hindi mo kailangang ulitin ang mga katulad na pahayag ng CSS gamit ang @extend attribute
Pinapayagan nitong tukuyin ang mga variable na magagamit sa buong proyekto
Pinapanatili nitong mas organisado ang iyong tumutugon na proyekto

Kahinaan:

Nangangailangan ng oras upang matuto ng mga bagong feature ng preprocessor bago gamitin
Maaaring hindi mo magamit ang built-in na feature na inspektor ng elemento ng browser
Maaaring maging mahirap ang pag-troubleshoot

18) Ipaliwanag kung ano ang MABAIT?

Ang LESS ay dynamic na style sheet na gumagawa ng wika. Ang LESS ay isang CSS pre-processors at nagpapalawak ng CSS na may dynamic na pag-uugali. Nagbibigay-daan ito para sa mga variable, mixins, operations at functions. LESS tumatakbo sa server side at client side pareho.

19) Ipaliwanag kung paano gumawa ng LESS file at kung saan ito iimbak at i-compile?

Ang paggawa o pag-iimbak ng LESS file ay katulad ng paggawa/pag-imbak ng CSS file. Maaaring gumawa ng bagong LESS file gamit ang .less extension, o maaari mong palitan ang pangalan ng kasalukuyang .css file sa .less file. Maaari kang magsulat ng mas kaunting code gamit ang kasalukuyang CSS code.

Ang pinakamahusay na paraan ng paglikha nito sa loob ng ~/content/ o ~/Styles/ folder

20) Sa anong mga paraan magagamit ang KULANG?

Sa pamamagitan ng npm LESS ay maaaring gamitin sa command line
I-download bilang isang script file para sa browser
Para sa mga tool ng third party, ginagamit ito

21) Paano kinakatawan ang variable sa LESS?

Ang LESS ay nagpapahintulot sa mga variable na tukuyin. Sa LESS, ang variable ay kinakatawan bilang @sing. Habang, ang variable na pagtatalaga ay ginagawa gamit ang isang: (colon) sing. Ang mga halaga ng mga variable ay ipinasok sa CSS output file pati na rin ang minified file.

22) Ipaliwanag kung paano kapaki-pakinabang ang Mixins?

Pinagana ng mga mixin ang pag-embed ng lahat ng mga katangian ng isang klase sa isa pang klase sa pamamagitan ng pagsasama ng pangalan ng klase bilang isa sa mga katangian nito. Ito ay tulad ng mga variable ngunit para sa buong klase.

23) Ipaliwanag kung paano magtakda ng code sa mode ng relo kapag nagpapatakbo ka ng LESS.js sa isang HTML5 browser?

Kung magpapatakbo ka ng LESS.js sa isang HTML5 browser, gagamit ito ng lokal na storage para i-cache ang nabuong CSS. Gayunpaman, mula sa pananaw ng developer, hindi nila agad makikita ang mga pagbabagong ginawa nila. Upang makita agad ang iyong mga pagbabago, maaari mong i-load ang program sa development at watch mode sa pamamagitan ng pagsunod sa JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Ipaliwanag kung ano ang kahulugan ng nesting sa LESS programming?

Ang nesting sa LESS ay ang clustering ng mga statement sa loob ng iba pang statement, kaya bumubuo ito ng grupo ng mga nauugnay na code. Sa madaling salita kapag nagdagdag kami ng snippet ng code at nagdagdag kami ng isa pang code sa loob nito, ang code snippet na iyon ay tinatawag na nesting.

25) Banggitin kung ano ang mga function ng color channel na ginagamit sa LESS?

kulay
lunod
hsvhue
lunod
hswalue
pula
berde
asul
alpha
luma
ningning

26) Ipaliwanag kung ano ang data-uri sa LESS?

Sa CSS, ang Data URI ay isa sa pinakamahusay na diskarte, pinapayagan nito ang mga developer na maiwasan ang panlabas na pagre-refer ng larawan at sa halip ay direktang i-embed ang mga ito sa isang stylesheet. Ang mga URI ng data ay ang mahusay na paraan upang bawasan ang mga kahilingan sa HTTP

27) Ipaliwanag kung ano ang "Source Map Less Inline"?

Isinasaad ng opsyong “ Source Map Less Inline” na dapat naming isama ang lahat ng CSS file sa sourcemap. Nangangahulugan ito na kailangan mo lamang ang iyong file ng mapa upang makarating sa iyong orihinal na pinagmulan.

28) Ipaliwanag kung ano ang gamit ng Extend “all” sa MABA?

Kapag tinukoy mo ang lahat ng keyword na huling sa isang extend na argumento, sasabihin nito sa LESS na itugma ang selector na iyon bilang bahagi ng isa pang selector.

29) Ipaliwanag kung ano ang "StrictImports" sa MABA?

Kinokontrol ng strictImports kung papayagan ng compiler ang isang @import sa loob ng alinman sa @media block o iba pang selector block

30) Ilista ang mga pagkakaiba sa pagitan ng LESS at Sass?

Ang bawat style-sheet na wika ay mahusay sa kanilang pananaw at paggamit; gayunpaman mayroong ilang mga pagkakaiba sa kanilang paggamit.

LESS	Sass
– Gumagamit ang LESS ng JavaScript at pinoproseso sa panig ng kliyente	– Ang Sass ay naka-code sa Ruby at sa gayon ay naproseso sa server-side
– Ang mga pangalan ng variable ay pinangungunahan ng @simbolo	– Ang pangalan ng variable ay may paunang simbolo ng $
– Ang LESS ay hindi nagmamana ng maraming tagapili na may isang hanay ng mga katangian	– Nagmana si Sass ng maraming tagapili na may isang hanay ng mga katangian
– Hindi gumagana ang LESS sa mga unit na "hindi kilalang" at hindi rin ito nagbabalik ng notification ng error sa syntax para sa mga hindi tugmang unit o error sa syntax na nauugnay sa matematika	– Binibigyang-daan ka ng Sass na magtrabaho kasama ang mga "hindi kilalang" na mga unit ay nagbabalik din ng isang abiso ng error sa syntax para sa mga hindi tugmang unit

31) Ano ang pagkakatulad ng LESS at Sass?

Sa pagitan ng LESS at Sass ang pagkakatulad ay

Mga namespace
Mga function ng kulay
Mixin at parametric mixin
Mga kakayahan sa pugad
Mga pagsusuri sa JavaScript

32) Ipaliwanag kung ano ang gamit ng &combinator ?

Pinagsasama ng &combinator ang nested selector sa parent selector. Ito ay kapaki-pakinabang para sa mga Pseudo na klase tulad ng :hover at :focus

33) Ipaliwanag kung ano ang gamit ng mga operasyon sa LESS?

Maaaring gamitin ang mga operasyon para sa pagsasagawa ng mga function tulad ng

Mga simpleng operator ng Matematika: +, – , *, /
Mga function ng kulay
Mga pagpapaandar sa matematika
Anumang laki o kulay na variable ay maaaring patakbuhin

34) Ipaliwanag kung ano ang gamit ng Escaping?

Ang paggamit ng pagtakas sa LESS

Kapag kailangan mong mag-output ng CSS na hindi wastong CSS syntax
Hindi kinikilala ng LESS ang proprietary syntax
LESS compiler ay magtapon ng isang error kung hindi ginamit
Simpleng prefix na may simbolo na ~ at ilagay sa mga quote

35) Ano ang nilalaman ng mas kaunting elemento?

Mas kaunting mga elemento ang naglalaman ng mga karaniwang ginagamit na mixin tulad ng

.gradient
.bilog
.opacity
.kahon-anino
.panloob-anino

36) Maglista ng mga alternatibo laban sa LESS?

SASS: Syntactically Awesome Stylesheet
SCSS: Bersyon.2 ng SASS
Pluma

37) Ipaliwanag kung paano mo mai-invoke ang compiler mula sa command line?

Maaari mong i-invoke ang compiler mula sa command line sa LESS bilang

$ lessc styles.less

Ilalabas nito ang pinagsama-samang CSS sa stdout; maaari mo itong i-redirect sa isang file na iyong pinili

$ lessc styles.less > styles.css

38) Ano ang gamit ng e () function?

Sa tulong ng function na e() maaari kang makatakas sa isang halaga upang dumiretso ito sa pinagsama-samang CSS, nang hindi napapansin ng LESS compiler.

39) Ipaliwanag kung paano mo maaaring i-pre-compile ang LESS sa CSS?

Upang i-pre-compile ang LESS sa CSS maaari mong gamitin

Patakbuhin ang less.js gamit ang Node.js : Sa pamamagitan ng paggamit ng Node.js JavaScript framework maaari mong patakbuhin ang less.js script sa labas ng browser
Gumamit ng lessphp: Para sa pagpapatupad ng LESS compiler na nakasulat sa PHP, lessphp ang ginagamit
Gumamit ng online na Compiler: Gumamit ng online na compiler para sa mabilis na pagsasama-sama ng LESS code nang hindi nag-i-install ng compiler
Mas kaunti. app (para sa mga user ng Mac): Less.app ay isang libreng tool para sa mga user ng Mac, ang tool na ito ay awtomatikong kino-compile ang mga ito sa mga CSS file

40) Ipaliwanag kung paano ginagamit ang merge function sa LESS?

Para sa pagsasama-sama ng mga value mula sa maraming property papunta sa isang space o comma separated list sa ilalim ng isang property LESS ay ginagamit. Ito ay kapaki-pakinabang para sa mga katangian tulad ng pagbabago at background

41) Paano ka makakalikha ng mga istruktura ng loop sa LESS?

Maaaring tawagin ng mixin ang sarili nito sa MABA. Ang ganitong mga recursive mix, kapag pinagsama sa Pattern matching at Guard Expressions, ay maaaring gamitin upang lumikha ng iba't ibang istruktura ng umuulit/loop.

42) Bakit kailangan natin ng mga parametric mixin sa LESS?

Ang mga parametric mixin ay kapareho ng mga karaniwang mixin. Ang pagkakaiba lang ay ang mga parametric mix ay kumukuha ng mga parameter tulad ng mga function sa JavaScript. Pagkatapos matukoy ang mga parameter sa mga mixin, makakakuha ka ng higit na kontrol sa mga mixin.