40 najpopularniejszych pytań i odpowiedzi podczas rozmów kwalifikacyjnych SASS (2024)

Oto pytania i odpowiedzi dotyczące rozmów kwalifikacyjnych SASS i SCSS zarówno dla nowicjuszy, jak i doświadczonych kandydatów, którzy chcą zdobyć wymarzoną pracę.


1) Wyjaśnij, czym jest Sass? Jak można go wykorzystać?

Sass oznacza Syntactically Awesome Stylesheets i został stworzony przez Hamptona Catlina. Jest to rozszerzenie CSS3, dodające zagnieżdżone reguły, miksy, zmienne, dziedziczenie selektorów itp.

Sass można używać na trzy sposoby

  • Jako narzędzie wiersza poleceń
  • Jako samodzielny moduł Ruby
  • Jako wtyczka do dowolnego frameworka obsługującego stojak

Bezpłatne pobieranie w formacie PDF: Pytania i odpowiedzi dotyczące wywiadu SASS


2) Wymień kluczowe funkcje Sassa?

Kluczowe funkcje Sass obejmują

  • Pełna kompatybilność z CSS3
  • Rozszerzenia językowe, takie jak zagnieżdżanie, zmienne i miksy
  • Wiele przydatnych funkcji do manipulowania kolorami i innymi wartościami
  • Zaawansowane funkcje, takie jak dyrektywy sterujące dla bibliotek
  • Dobrze sformatowane, konfigurowalne dane wyjściowe

3) Wymień typy danych obsługiwane przez SassScript?

SassScript obsługuje siedem głównych typów danych

  1. Liczby (np. 1,5px)
  2. Ciągi tekstów (np. „foo”, „bar” itp.)
  3. Kolory (niebieski, #04a3f9)
  4. Wartości logiczne (prawda lub fałsz)
  5. Wartości null (np. null)
  6. Lista wartości oddzielonych spacją lub przecinkami (np. 1.5em, Arial, Helvetica itp.)
  7. Mapuje jedną wartość na drugą (np. (klucz 1: wartość 1, klucz 2: wartość 2))

4) Wyjaśnij, jak zdefiniować zmienną w Sassie?

Zmienne w Sassie zaczynają się od znaku ($), a przypisanie zmiennych odbywa się za pomocą dwukropka (:).


5) Wyjaśnij, jaka jest różnica między Sass i SCSS?

Różnica między Sass i SCSS polega na tym, że:

  • Sass jest CSS preprocesor z udoskonaloną składnią i rozszerzeniem CSS3
  • Sass ma dwie składnie
  • Pierwsza składnia to „SCSS” i wykorzystuje rozszerzenie .scss
  • Inną składnią jest składnia z wcięciami lub po prostu „Sass” i wykorzystuje ona rozszerzenie .sass
  • Podczas gdy Sass ma luźną składnię z białymi znakami i bez średników, SCSS bardziej przypomina CSS

Każdy ważny dokument CSS można przekonwertować na Sass, po prostu zmieniając rozszerzenie z.CSS na.SCSS.

Pytania do rozmowy kwalifikacyjnej SASS
Pytania do rozmowy kwalifikacyjnej SASS

6) Do czego służy zagnieżdżanie selektorów w Sassie?

W Sassie zagnieżdżanie selektorów umożliwia autorom arkuszy stylów obliczanie długich selektorów poprzez zagnieżdżanie krótszych selektorów w sobie.


7) Wyjaśnij do czego służy funkcja @extend w Sassie?

W Sassie dyrektywa @EXTEND zapewnia prosty sposób umożliwienia selektorowi dziedziczenia stylów innego. Ma na celu umożliwienie selektorowi A rozszerzenia stylów z selektora B. Robiąc to, selektor A zostanie dodany do selektora B, tak aby oba miały te same deklaracje. @EXTEND zapobiega rozdęciu kodu, grupując selektory o tym samym stylu w jedną regułę.


8) Wyjaśnij jakie jest zastosowanie funkcji @IMPORT w Sassie?

Funkcja @IMPORT w Sassie

  • Rozszerza regułę importu CSS, umożliwiając import plików SCSS i Sass
  • Wszystkie zaimportowane pliki są łączone w jeden wyjściowy plik CSS
  • Można wirtualnie mieszać i dopasowywać dowolne pliki i mieć pewność, że wszystkie Twoje style zostaną zachowane
  • @IMPORT pobiera nazwę pliku do importu

9) Dlaczego Sass jest uważany za lepszy niż LESS?

  • Saas umożliwia pisanie metod wielokrotnego użytku i używanie instrukcji logicznych, np. pętli i warunków
  • Użytkownik Saas może uzyskać dostęp do biblioteki Compass i korzystać z niesamowitych funkcji, takich jak dynamiczne generowanie map sprite, hacki do starszych przeglądarek i obsługa funkcji CSS3 w różnych przeglądarkach
  • Compass umożliwia także dodanie zewnętrznych ram, takich jak Blueprint, Foundation lub Bootstrap na szczycie
  • W LESS możesz napisać podstawową instrukcję logiczną, używając „strzeżonego miksowania”, co jest odpowiednikiem instrukcji Sassa if
  • W LESS możesz przeglądać wartości liczbowe za pomocą funkcji rekurencyjnych, podczas gdy Sass pozwala na iterację dowolnego rodzaju danych
  • W Sassie możesz pisać własne przydatne funkcje

10) Wyjaśnij do czego służy funkcja Mixin w Sassie? Jakie jest znaczenie WYSUSZANIA mieszanki?

Mixin umożliwia definiowanie stylów, które można ponownie wykorzystać w całym arkuszu stylów, bez konieczności uciekania się do klas niesemantycznych, takich jak .float-left.

SUSZENIE mieszanki oznacza podzielenie jej na część dynamiczną i statyczną. Miksowanie dynamiczne to to, które użytkownik faktycznie wywoła, a miksowanie statyczne to fragmenty informacji, które w przeciwnym razie zostałyby zduplikowane.


11) Wyjaśnij, czym są Sass Maps i jakie jest zastosowanie Sass Maps?

Mapa Sassa to uporządkowane dane w sposób hierarchiczny, a nie tylko zbiór zmiennych. Może pomóc w uporządkowaniu kodu. Niektóre świetne zastosowania Sass to

  • Jest to bardzo przydatne, gdy mamy do czynienia z warstwami elementów w projekcie
  • Może to być pomocne w zarządzaniu kolorami, gdy istnieje długa lista różnych kolorów i odcieni
  • Użyj mapy ikon dla różnych ikon mediów społecznościowych, na przykład: facebook: '\e607' lub twitter: '\e602'
  • W przeciwieństwie do innych bibliotek programistycznych, mapa Sassa będzie składać się wyłącznie z kodu, który będzie używany

12) Wyjaśnij, czym komentarze Sass różnią się od zwykłych CSS?

Składnia komentarzy w zwykłym CSS zaczyna się od /* komentarze…*/, podczas gdy w SASS istnieją dwa typy komentarzy: jednoliniowe komentarze // i wielowierszowe komentarze CSS z /* */.

Pytania do rozmowy kwalifikacyjnej SASS / SCSS
Pytania do rozmowy kwalifikacyjnej SASS / SCSS

13) Czy Sass obsługuje komentarze wbudowane?

Komentarze jednoliniowe // zostaną usunięte przez preprocesor .scss i nie pojawią się w pliku .css

Chociaż komentarze */ są poprawnymi CSS i zostaną zachowane pomiędzy tłumaczeniem z .scss na plik .css


14) Jak używana jest interpolacja w Sassie?

W Sass możesz zdefiniować element w zmiennej i interpolować go w kodzie Sass. Jest to przydatne, gdy przechowujesz moduły w oddzielnych plikach.


15) Wyjaśnij, kiedy możesz używać symboli zastępczych % w Sassie?

%placeholders w Sassie jest przydatne, gdy chcesz napisać style, które miały zostać rozszerzone, ale nie chcesz, aby style podstawowe były widoczne w wyjściowych stylach CSS


16) Czy w Sassie można zagnieżdżać zmienne w zmiennych?

Interpolacja nazw zmiennych nie jest obecnie możliwa w Sassie. Można jednak zastosować interpolację symboli zastępczych.


17) Jakie są wady i zalety Sass?

ZALETY:

  • Sass jest łatwy do nauczenia, szczególnie dla tych, którzy mają doświadczenie w Pythonie, Ruby lub Coffescript i umieją używać funkcji, pisać miksy
  • CSS można łatwo przekonwertować na Sass
  • W całym projekcie nie musisz powtarzać podobnych instrukcji CSS, używając atrybutu @extend
  • Pozwala zdefiniować zmienne, które można wykorzystać w całym projekcie
  • Dzięki temu Twój responsywny projekt będzie lepiej zorganizowany

Wady:

  • Wymaga czasu na poznanie nowych funkcji preprocesora przed użyciem
  • Korzystanie z wbudowanej w przeglądarkę funkcji inspektora elementów może nie być możliwe
  • Rozwiązywanie problemów może być trudne

18) Wyjaśnij, co to jest MNIEJ?

LESS to dynamiczny język tworzący arkusze stylów. LESS to preprocesor CSS, który rozszerza CSS o dynamiczne zachowanie. Pozwala na zmienne, miksy, operacje i funkcje. LESS działa zarówno po stronie serwera, jak i po stronie klienta.


19) Wyjaśnij, jak utworzyć plik LESS oraz gdzie go przechowywać i kompilować?

Tworzenie lub przechowywanie pliku LESS jest podobne do tworzenia/przechowywania pliku CSS. Można utworzyć nowy plik LESS z rozszerzeniem .less lub zmienić nazwę istniejącego pliku .css na plik .less. Możesz napisać kod LESS przy użyciu istniejącego kodu CSS.

Najlepszym sposobem na utworzenie go w folderze ~/content/ lub ~/Styles/


20) W jaki sposób można wykorzystać LESS?

  • Przez npm LESS można używać w wierszu poleceń
  • Pobierz jako plik skryptu dla przeglądarki
  • W przypadku narzędzi stron trzecich jest on używany

21) Jak zmienna jest reprezentowana w MNIEJ?

mniej pytań do wywiadu

LESS umożliwia definiowanie zmiennych. W LESS zmienna jest reprezentowana jako @sing. Natomiast przypisanie zmiennych odbywa się za pomocą znaku: (dwukropek). Wartości zmiennych wstawiane są do pliku wyjściowego CSS oraz pliku zminimalizowanego.

 


22) Wyjaśnij, w jaki sposób Mixins jest przydatny?

Mieszanki umożliwiają osadzenie wszystkich właściwości klasy w innej klasie poprzez dołączenie nazwy klasy jako jednej z jej właściwości. To tak jak ze zmiennymi, ale dla całych klas.


23) Wyjaśnij, jak ustawić kod w trybie zegarka, gdy uruchamiasz LESS.js w pliku HTML5 przeglądarka?

Jeśli uruchomisz LESS.js w przeglądarce HTML5, użyje on pamięci lokalnej do buforowania wygenerowanego CSS. Jednak z punktu widzenia programisty nie mogą natychmiast zobaczyć wprowadzonych zmian. Aby natychmiast zobaczyć zmiany, możesz załadować program w trybie programowania i oglądania, postępując zgodnie z JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Wyjaśnij, jakie jest znaczenie zagnieżdżania w programowaniu LESS?

Zagnieżdżanie w LESS polega na grupowaniu instrukcji wewnątrz innych instrukcji, tworząc w ten sposób grupę powiązanego kodu. Innymi słowy, gdy dodamy fragment kodu i dodamy do niego kolejny kod, wówczas ten fragment kodu nazywa się zagnieżdżaniem.


25) Wspomnij, jakie funkcje kanałów kolorów są używane w LESS?

  • odcień
  • nasycenie
  • hsvhue
  • nasycenie
  • hswalue
  • czerwony
  • Zielony
  • niebieski
  • alfa
  • Luma
  • luminancji

26) Wyjaśnij, czym jest data-uri w LESS?

W CSS, Data URI jest jedną z najlepszych technik, pozwala programistom uniknąć odwoływania się do zewnętrznych obrazów i zamiast tego osadzać je bezpośrednio w arkuszu stylów. Identyfikatory URI danych to doskonały sposób na ograniczenie żądań HTTP


27) Wyjaśnij, co to jest „mapa źródłowa mniej wbudowana”?

Opcja „Mapa źródłowa mniej inline” wskazuje, że powinniśmy uwzględnić wszystkie pliki CSS w mapie źródłowej. Oznacza to, że do uzyskania dostępu do oryginalnego źródła potrzebny jest jedynie plik mapy.


28) Wyjaśnij, jakie jest zastosowanie rozszerzenia „all” w LESS?

Kiedy w argumencie rozszerzającym podasz słowo kluczowe all last, polecenie LESS ma dopasować ten selektor jako część innego selektora.


29) Wyjaśnij, co to jest „StrictImports” w LESS?

Funkcja strictImports kontroluje, czy kompilator zezwoli na @import wewnątrz bloków @media lub innych bloków selektorów


30) Wymień różnice pomiędzy LESS i Sass?

Każdy język arkuszy stylów jest dobry pod względem perspektywy i zastosowania; jednakże istnieje kilka różnic w ich użyciu.

MNIEJ sass
– LESS wykorzystuje JavaScript i jest przetwarzany po stronie klienta – Sass jest kodowany w Ruby i w ten sposób przetwarzany po stronie serwera
– Nazwy zmiennych są poprzedzone symbolem @ – Nazwy zmiennych są poprzedzone symbolem $
– LESS nie dziedziczy wielu selektorów z jednym zestawem właściwości – Sass dziedziczy wiele selektorów z jednym zestawem właściwości
– LESS nie działa z „nieznanymi” jednostkami, ani nie zwraca powiadomienia o błędach składniowych w przypadku niekompatybilnych jednostek lub o błędach składniowych związanych z matematyką – Sass umożliwia pracę z „nieznanymi” jednostkami, zwraca także powiadomienie o błędzie składni w przypadku niekompatybilnych jednostek

31) Jakie są podobieństwa między LESS i Sass?

Pomiędzy LESS i Sass istnieją podobieństwa

  • Przestrzenie nazw
  • Funkcje koloru
  • Mieszanki i mikstury parametryczne
  • Możliwości zagnieżdżania
  • Oceny JavaScriptu

32) Wyjaśnij do czego służy &combinator?

&combinator łączy zagnieżdżony selektor z selektorem nadrzędnym. Jest to przydatne w przypadku pseudoklas, takich jak :hover i :focus


33) Wyjaśnij, jakie jest zastosowanie operacji w LESS?

Operacji można używać do wykonywania funkcji takich jak

  • Proste operatory matematyczne: +, – , *, /
  • Funkcje koloru
  • Funkcje matematyczne
  • Można operować na dowolnym rozmiarze i kolorze

34) Wyjaśnij, jaki jest pożytek z ucieczki?

Użycie ucieczki w LESS

  • Kiedy chcesz wyprowadzić CSS, który nie jest prawidłową składnią CSS
  • Zastrzeżona składnia nierozpoznawana przez LESS
  • Kompilator LESS zgłosi błąd, jeśli nie zostanie użyty
  • Prosty przedrostek z symbolem ~ i umieszczony w cudzysłowie

35) Co zawierają elementy LESS?

Mniej elementów zawiera powszechnie używane miksy, takie jak

  • .gradient
  • .bułczasty
  • .nieprzezroczystość
  • .box-cień
  • .Wewnętrzny cień

36) Wymień alternatywy dla LESS?

  • SASS: Syntaktycznie niesamowite arkusze stylów
  • SCSS: Wersja 2 SASS
  • Rysik

37) Wyjaśnij, jak wywołać kompilator z wiersza poleceń?

Możesz wywołać kompilator z wiersza poleceń w LESS as

$ lessc style.less

Spowoduje to wyświetlenie skompilowanego CSS standardowe wyjście; możesz następnie przekierować go do wybranego pliku

$ lessc style.less > style.css


38) Jakie jest zastosowanie funkcji e ()?

Za pomocą funkcji e() możesz uciec od wartości, tak aby przeszła ona bezpośrednio do skompilowanego CSS, niezauważona przez kompilator LESS.


39) Wyjaśnij, jak możesz wstępnie skompilować LESS do CSS?

Aby wstępnie skompilować LESS do CSS, możesz użyć

  • Uruchom less.js przy użyciu Node.js : Korzystając ze środowiska JavaScript Node.js, możesz uruchomić skrypt less.js poza przeglądarką
  • Użyj lessphp: Do implementacji kompilatora LESS napisanego w PHP używany jest lessphp
  • Użyj kompilatora online: Użyj kompilatora online do szybkiej kompilacji kodu LESS bez instalowania kompilatora
  • Mniej. app (dla użytkowników komputerów Mac): Less.app to darmowe narzędzie dla użytkowników komputerów Mac, które automatycznie kompiluje je do plików CSS

40) Wyjaśnij, w jaki sposób funkcja scalania jest używana w LESS?

Do agregowania wartości z wielu właściwości w formie listy oddzielonej spacjami lub przecinkami w ramach jednej właściwości używany jest MNIEJ. Jest to przydatne w przypadku właściwości takich jak transformacja i tło


41) Jak można tworzyć struktury pętlowe w LESS?

Mieszanka może nazywać się LESS. Takie rekurencyjne miksy, w połączeniu z dopasowywaniem wzorców i wyrażeniami ochronnymi, można wykorzystać do tworzenia różnych struktur iteracyjnych/pętlowych.


42) Dlaczego potrzebujemy parametrycznych miksów w LESS?

Mieszanki parametryczne są takie same jak standardowe miksy. Jedyna różnica polega na tym, że miksy parametryczne przyjmują parametry takie jak funkcje w JavaScript. Po określeniu parametrów miksów zyskujesz większą kontrolę nad miksinami.

Wady:

  • Wrażliwość na białe znaki
  • Brak wbudowanych reguł
Share

Komentarze 3

  1. Pytanie 17 pyta o zalety i wady SASS, ale odpowiedź zawiera tylko zalety i brak wad.

    1. Alexa Silvermana Alexa Silvermana mówi:

      Dziękuję za zwrócenie uwagi, zostało zaktualizowane.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *