Что в SCSS означает символ %?

Что означает % в scss?

Использование % в контексте: (источник: https://codepen.io/FWeinb/pen/GrpqB?editors=1100)

@import "compass/css3";

.box{
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  line-height: 10em;
  overflow: hidden;
}

%box__dir{
  position: absolute;
  width: inherit;
  height: inherit;          
  text-align: center;
  line-height: inherit;
  transition:transform .4s ease;
}

Что означает знак процента перед «box_dir»?

Ну, SCSS и SASS явно разные. Человек, не знакомый с SASS, будет искать вопрос о SCSS, а не о SASS. Что еще сказать; это не дубликат.

— 16.03.2019 11:56

stackoverflow.com/questions/5654447/…

— 16.03.2019 12:16

@TemaniAfif Для человека, который не разбирается в SASS, этот вопрос очень поможет ему. Он может увидеть вопрос, который вы пометили как дубликат, и подумать, что это ему не поможет, потому что речь идет о SASS — помните, он не знает, что SASS и SCSS во многом одно и то же. (Не так давно я был в такой ситуации)

— 16.03.2019 12:23

Я все еще не вижу проблемы пометки как дубликата. Закрытие вопроса не означает его удаление. Человек все равно может найти ваш вопрос и приведенный ниже ответ, и он тоже поймет, что SASS — это то же самое, что и SCSS. Комментарии, которые мы также пишем сейчас, заставят любого, кто найдет этот вопрос, лучше понять, что оба они одинаковы.

— 16.03.2019 12:25

css sass

16.03.2019 11:18

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 466

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В SCSS% указывает на селектор заполнителя.

[Placeholders] are very similar to class selectors, but instead of using a period (.) at the start, the percent character (%) is used. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.

Поэтому, если вы где-то включили это в свой SCSS, но никогда не использовали (расширяли), оно не появится в сгенерированном CSS.

%box__dir {
 position:absolute;
 width:inherit;
 height:inherit;
 text-align:center;
 line-height:inherit;
 transition:transform .4s ease;
}

Как только вы используете placeholder, он появится в сгенерированном CSS, как и ожидалось.

.something {
  color: red;
  @extend %box__dir;
}

Сгенерировано CSS:

.something {
  color: red;
  position:absolute;
  width:inherit;
  height:inherit;
  text-align:center;
  line-height:inherit;
  transition:transform .4s ease;
}

«@extend $box__dir» — символ доллара указывает на то, что это переменная, верно?

— 16.03.2019 11:43

@sebastiannielsen Это была опечатка. Фиксированный. Ссылка, которую я включил в свой ответ, содержит несколько реальных примеров, которые должны помочь вам за рамками ответа.

— 16.03.2019 11:46

В чем разница между миксинами и % ? Если миксин не используется ни в одном классе, он также не генерируется, верно?

— 11.06.2021 14:50

@AleksGrunwald Хорошее объяснение здесь с практическими примерами ближе к концу статьи.

— 11.06.2021 18:43

16.03.2019 11:29