Блог

Главная - Вопросы по программированию - В моем существующем проекте я видел фрагмент кода, который находится в файле SASS. но я не понял, почему они используют эти префиксы, такие как

В моем существующем проекте я видел фрагмент кода, который находится в файле SASS. но я не понял, почему они используют эти префиксы, такие как

#css #sass

#css #sass

Вопрос:

введите описание изображения здесь

в приведенной выше строке кода № 34 и 44 они использовали amp;. знаки перед именем класса, могу ли я узнать их назначение.

Комментарии:

1. В моем коде SASS несколько классов объявлены как amp;. sign. amp;.resize { .grid { section { .content { непрозрачность: 0; } } } }

2. sass-lang.com/documentation/file.SASS_REFERENCE.html

Ответ №1:

Когда процессор Sass преобразует это в CSS, амперсанд (amp;) будет заменен селекторами, в которые он вложен. Это сокращение для записи «повторите вышеупомянутые селекторы здесь». Так что это быстрый способ создания длинных специфических вложенных селекторов CSS.

Комментарии:

1. В нескольких других случаях у нас есть .. вместо amp;. та же цель и здесь ..?

2. например, @import ‘../components/palettes/palettes-colors’;

3. Две точки означают «перейти в одну папку». Это часть пути к частичному фрагменту кода Sass, который импортируется.

4. @each $animal, $color, $cursor in (puma, черный, по умолчанию), (морской слизняк, синий, указатель), (белая цапля, перемещение) { . #{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); border: 2px solid $color; cursor: $cursor; } } в приведенном выше коде у нас есть URL-адрес изображения, в котором мы используем # в качестве префикса к переменной, какова цель # sign там

5. Это интерполяция. Sass вставит значение переменной туда в виде строки. Вот документы: sass-lang.com/documentation/interpolation