1. .newsider {
  2.   &:global(.ant-menu) {
  3.     padding-top: 0;
  4.   }
  5. }

this way, the generated class name in your html element will be something like this(one way to improve your css specificity):

  1. .src-widget-side-nav-s-module__newsider--mTBFz.ant-menu {
  2.     padding-top: 0;
  3. }

In other cases, the target may be a descendant css class, you can adjust like this:

  1. .newSider {
  2.   :global(.ant-menu-submenu-vertical) {
  3.     :global(i.ant-menu-submenu-arrow::before) {
  4.       transform: rotate(-45deg) translateX(-4px) !important;
  5.     }
  6.   }
  7. }

Selectors in the :global() is just normal selectors you would use, can be a combined selector too:

  1. &:global(.ant-menu-item-selected a) {
  2.   font-weight: bold;
  3.   color: rgba(0, 0, 0, 0.87);
  4. }

More about symbols in Less

In the above first example, & here represents a parent selector of this nested format, namely .newsider selector. learn parent selector

~ is another symbol in less for escaping

  1.   &-extra {
  2.     margin: @result-extra-margin;
  3.     text-align: center;
  4.     > * {
  5.       margin-right: 8px;
  7.       &:last-child {
  8.         margin-right: 0;
  9.       }
  10.     }
  11.   }

In this snippet, what is does is to set .parentSelector-extra element’s style, > * means selector of all children element of .parentSelector-extra, and inside this the &:last-child means the last children of .parentSelector-extra.