Что это за символы # и $ в правилах CSS?

Question

У меня есть куча CSS-кода, но в именах правил есть # и $, для чего нужны эти символы?

.popup-inner-video {
    #max-width:700px;
    width:70%;
    height: 70% !important;
    padding:40px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#fff;
    position: relative;
    $padding-bottom: 56.25%;
    #padding-top: 35px;
    height: 0;
    overflow: hidden;
}

Как видите,

#max-width:700px;
$padding-bottom: 56.25%;
#padding-top: 35px;

Чтоэти символы # и $ для?

Answer 1

Вы можете проверить ниже 2 ссылки.

https://www.w3schools.com/cssref/sel_attr_end.asp

https://www.w3schools.com/cssref/sel_id.asp

Answer 2

# is for the referring id and $ is for the sass model CSS and it is used when we reuse the code.

for example :

# >
<div id="idrefer"> Hello</div>
#idrefer{
// do your style
}

$ >
<div id="idrefer"> Hello</div>
sass
//globle declaration
$color:yellow;

#idrefer{
color:$color
}