Препроцессор CSS, вы все еще только вкладываете?

внешний интерфейс CSS
Препроцессор CSS, вы все еще только вкладываете?

предисловие

Большой парень: Вы когда-нибудь использовали препроцессоры CSS?
Я: Хм, я использовал вложение SASS.
佬: ничего?
Я: ... (смущенно)

Я не знаю, у всех ли ситуация такая же, как у меня, урок из прошлого,CSSСоответствующие знания по-прежнему очень важны.
В этой статье вы узнаете, как систематизировать знания о препроцессоре CSS.Существующие популярные библиотеки включаютSass(Scss),Less,StylusПодождите, я в основном использую его в своем проектеSass, поэтому примеры в этой статье основаны наSass(Scss)в качестве основы.

Основы Sass

Расширение синтаксиса CSS (каскадные таблицы стилей), появившееся в 2007 году, является самым ранним и наиболее зрелым языком препроцессора CSS.Он может использовать переменные, константы, вложенность, миксины, функции и другие функции, которые могут быть более эффективными.Гибкость для написания CSS. .

Переменная

Предоставление переменных не позволяет дизайнерам часто изменять определенный глобальный атрибут (например, общий стиль цвета), что приводит к пассивному увеличению рабочей нагрузки.
Используйте переменные для$начни, есть全局变量а также局部变量.

$color: #8a8787; // 全局变量
div { 
  $width: 100px; // 局部变量
  width: $width;
  background: $color;
}

Если переменная используется в свойстве, ее необходимо записать в#{ }середина

$side: left;
div { 
  border-#{$side}: 1px solid $color;
}

вложенный

Это должно быть самым знакомым. 😘 кроме选择器может быть вложенным,属性а также伪类Также может быть вложенным.

<div class="parent-container">
   <div class="parent-container-header"></div>
</div>

.parent-container {
   &-header {  // 选择器嵌套
     background {
       color: red;   //属性嵌套
     }
     &:hover {  // 伪类嵌套
       color: green;
     }
   }
}

наследовать

Позволяет селектору наследовать все свойства другого селектора. использовать@extendНаследовать существующий блок стилей.

.class1 {
  border: 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size: 12px;
}

смешивание

аналогичныйVueМикширование — это код стиля, который можно использовать повторно, и в котором можно указать параметры и значения по умолчанию.@mixinИспользуйте следующим образом.

@mixin left($value: 10px) {
  float: left;
  margin-left: $value;
}
div {
  @include left(4px);
}

@import

Используется для импорта внешних файлов стилей

@import "文件相对路径"

Примечание: не рекомендуетсяimport, поскольку импортированный файл CSS будет загружен и проанализирован только после того, как текущий файл CSS будет загружен и проанализирован, браузер начнет загрузку импортированного файла CSS, что уничтожит параллельную загрузку файлов стилей.

Примечания

Есть два способа/*注释*/а также//注释

функция цвета

Встроенные цветовые функции для простого создания серий цветов.

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

Sass операции

сложение, вычитание, умножение и деление

SassМогут быть выполнены различные математические расчеты (переменные и свойства).Обратите внимание, что сложение и вычитание должны быть одними и теми же единицами измерения.,Раздел требует круглых скобок

$height: 10px;
div {
  width: 10px + 10px;
  height: $height + 10px;
  margin-top: 20px -10px;
  margin-left: 10px * 2;
  margin-right: (10px / 2);
}

операции с персонажами

использовать+Объединить строки

div:before {
 content: "hello" + "world";
}

Sass-команды

@if

а такжеJSАналогично, можно использовать для миксиновmixin, согласно оценке параметра.

@mixin isHidden($bool: true) {
  @if $bool {
    display: block;
  }
  @else {
    display: none;
  }
}

цикл

Может помочь создать похожие селекторы, например, определить некоторые похожие поля.margin. имеют@for,@while,@each

@for $i from 1 to 10 {
  .margin-#{$i} {
    left: #{$i}px;
  }
}

$i: 6;
while $i > 0 {
  .margin-#{$i} {
    left: #{$i}px;
  }
  $i: $i - 1;
}

@each $item in a, b, c, d {
  .#{${member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

Sass-функция

Пользовательская функция

@function double($d) {
  @return $d * 2
}
div {
  width: double(2px);
}

Собственная функция

Sass предоставляет аналогичные функции, такие как строки, числа, списки, карты и т. д.
Строковые функции имеютunquoteчтобы удалить кавычки из строк,quoteИспользуется для добавления кавычек.
Числовые функции, такие какMathпредоставить какround,ceil,floor,absЖдать.
Функция списка имеетlength($list)Длина списка возврата и т. д.
Я не буду перечислять их здесь по одному, но чтобы узнать, что предоставить, вы можете перейти к последующим действиям.Официальный сайтНаходить.

image.png

Суммировать

Если вы хотите лучше использовать препроцессор CSS, сначала поговорите с дизайнером, он может сыграть большую роль 😉.

Ссылаться на

Sass-Study Notes [Basic]
Руководство по использованию Sass
Знание команд и функций Sass

Категории