Изучение SCSS из старого кода CSS - как переписать это? - PullRequest
Новая
       27

Изучение SCSS из старого кода CSS - как переписать это?

0 голосов
/ 21 марта 2019

Я новичок в использовании SCSS, и я не уверен, как переписать мой старый CSS во что-то новое, используя SCSS для проекта TypeScript, сейчас я выбрал несколько примеров ниже, чтобы задать этот вопрос, если кто-то может показать правильно, я думаю, что смогу понять остальную часть кода, который мне нужно переписать.

Примеры ниже суммируют все, что мне нужно выучить: 

.sb-slider li > a {
    outline: none;
}

.sb-slider li > a img {
    border: none;
}

.sb-perspective > div {
    position: absolute;
}

.sb-slider li.sb-current .sb-description {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: 1;
}

Ответы [ 3 ]

1 голос
/ 21 марта 2019

Существуют эффективные инструменты онлайн-конвертации, но чтобы изучить их вручную, нужно помнить одно простое правило - каждый раз, когда вы видите повторение, вы знаете, что вы можете создать из него вложенный блок.В противном случае вы должны просто написать обычный CSS.

Например, у вас есть 3 объявления, которые начинаются с .sb-slider, так что они могут стать блоком.Оттуда вы нацеливаетесь на li > a под .sb-slider дважды, а также на что-то под этим.Это обеспечивает естественную структуру вложенности SCSS, которая работает именно так, как вы думаете.

Для объявления .sb-perspective > div вы используете его только один раз и не повторяете его, поэтому нет причин создавать блокиз этого.Собрав все это вместе, вы получите: 

.sb-slider {
     li > a {
          outline: none;

          img {
                border: none;
          }
     }

     li.sb-current .sb-description {
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
          opacity: 1;
     }
}

.sb-perspective > div {
     position: absolute;
}
0 голосов
/ 21 марта 2019

Я преобразовал код CSS, который вы упомянули, в код SCSS, чтобы лучше понять, как легко вы можете преобразовать свой код: 

.sb-slider {
li {
    & > a {
        outline: none;
        img {
            border: none;
        }
    }
    &.sb-current {
        .sb-description {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            opacity: 1;
        }
    }
}
}
.sb-perspective {
    & > div {
        position: absolute;
    }
}

Если вы заметили, это следует шаблону, который вы должны создать родительский дочерний элементотношения в тегах или классах, которые вы используете.Ключевое слово "&" означает, что вы используете родительское наименование.

0 голосов
/ 21 марта 2019

Изучение SCSS из старого кода CSS - как переписать это?

SCSS - это расширенный набор CSS. Так что вы можете просто скопировать вставить это в файл SCSS, и он будет просто работать ?

...