концепции scss и использование

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

Вот некоторые преимущества SCSS:

Переменные: SCSS позволяет использовать переменные для хранения таких значений, как цвета, размеры шрифтов и т. д., что делает более удобной и поддерживаемой единую настройку этих значений по всей таблице стилей.
Вложенные правила. Вложенные правила можно использовать в SCSS для организации стилей и повышения четкости структуры кода. Например, вы можете записать стиль псевдокласса элемента в блоке стилей его родительского элемента вместо того, чтобы писать его в нескольких местах.
Миксины. Миксины — это способ объединения набора свойств стиля в блок многократного использования. Это позволяет избежать повторного написания кода одного и того же стиля и улучшает возможность повторного использования и читабельность кода.
Импорт (встроенный импорт): несколько файлов SCSS можно объединить в один файл с помощью правила @import. Такой подход помогает разделить таблицу стилей на логические единицы, и ее можно гибко организовывать и управлять ею по мере необходимости.
Наследование (расширение): SCSS поддерживает наследование стилей с помощью ключевого слова @extend, которое может сделать таблицу стилей более модульной и удобной в обслуживании.
Операции: SCSS допускает математические операции в таблицах стилей, такие как сложение, вычитание, умножение и деление, что полезно для обработки некоторых динамических вычислений стилей.
Модульность. Характеристики SCSS делают таблицы стилей более модульными и структурированными, что позволяет лучше управлять стилями и поддерживать их, особенно в крупных проектах.

Таким образом, SCSS не только сохраняет все функции CSS, но также предоставляет расширенные функции, такие как переменные, вложение, смешивание, импорт и т. д. Эти функции позволяют разработчикам более эффективно писать таблицы стилей и управлять ими и обычно используются в современных интерфейсах. конец развития.

Сравнение scss и css

грамматика:

CSS: базовый синтаксис таблицы каскадных стилей, правила определяются посредством селекторов, атрибутов и значений.
SCSS: SCSS — это язык препроцессора для CSS. Он предоставляет больше функций и синтаксиса, таких как переменные, вложенные правила, примеси, импорт и т. д., что делает написание таблиц стилей более гибким и эффективным.

Читабельность и ремонтопригодность:

CSS. В крупных проектах файлы CSS могут стать очень многословными и сложными в обслуживании, поскольку им не хватает структурированных и модульных функций.
SCSS: SCSS поддерживает переменные и вложенные правила. Эти функции делают код более читабельным и удобным в обслуживании. Используя переменные и примеси, можно сократить повторяющееся написание кода, а вложенные правила могут более четко выразить иерархические отношения структуры HTML.

Расширение функции:

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

совместимость:

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

кривая обучения:

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

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

Использование scs

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

Найдите sass в магазине плагинов, загрузите следующие два плагина и перезапустите vscode!

объявлять переменные

Объявлять переменные в SCSS очень просто: для определения переменных можно использовать символ $.

Вот простой пример, демонстрирующий, как объявлять и использовать переменные в SCSS:


// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

В приведенном выше примере мы определили две переменные $primary-color и $вторичный-цвет для хранения основного и вторичного цвета соответственно. Затем мы можем использовать эти переменные в правилах стиля, чтобы цвета были единообразными и их можно было легко изменить во всей таблице стилей.

Когда файл SCSS компилируется в обычный файл CSS, все переменные будут заменены соответствующими значениями, поэтому окончательный сгенерированный файл CSS не будет содержать никаких объявлений переменных.

Дифференцировать переменные по умолчанию

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

Вот пример того, как объявлять и использовать переменные по умолчанию:


// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

В приведенном выше примере мы использовали тег !default для определения значения по умолчанию. Это означает, что если $primary-color или $вторичный-color не определены где-либо еще до введения в этот файл SCSS, они будут использовать указанные значения по умолчанию (#3498db и #2ecc71). Если эти переменные были определены до импорта файла, значения по умолчанию будут игнорироваться.

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

Различайте глобальные переменные и локальные переменные.

Глобальные переменные. Глобальные переменные — это переменные, объявленные вне селектора или вне микшера/функции. Они доступны во всей таблице стилей, и если одна и та же глобальная переменная определена в нескольких файлах, их значения останутся согласованными.
Локальные переменные: Локальные переменные — это переменные, определенные внутри селектора или внутри микшера/функции. Их можно использовать только в той области, в которой они определены, и они больше не действительны за пределами этой области.

Примечание: локальные переменные переопределяют глобальные переменные.

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

Используйте ключевое слово !global, чтобы превратить локальные переменные в глобальные переменные.

SCSS предоставляет ключевое слово !global для явного объявления локальных переменных как глобальных. Это приводит к тому, что значение локальной переменной перемещается в глобальную область, где она объявлена, перезаписывая любую существующую глобальную переменную с тем же именем.

Пример:


// 全局变量
$primary-color: #3498db;
 
.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}
 
// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;
 
.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}
 
body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

В первом примере локальная переменная $primary-color внутри селектора .button переопределяет значение глобальной переменной. Во втором примере с помощью ключевого слова !global локальные переменные внутри селектора .button преобразуются в глобальные переменные, тем самым влияя на значения переменных в глобальной области видимости.

Вложенный синтаксис

Вложенность селекторов

базовое размещение

Вложенность селекторов позволяет вкладывать правила стиля для дочерних селекторов в родительские селекторы, например:


// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
 
    li {
      display: inline-block;
      margin-right: 10px;
 
      a {
        text-decoration: none;
        color: #fff;
 
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

В приведенном выше коде селектор .navbar содержит вложенные ul, li и подселектор. Эта вложенная структура делает правила стиля более понятными и простыми в управлении.

Ссылка на вложенный родительский селектор (&)

В SCSS символ & используется для обозначения родительского селектора, что особенно полезно в случае псевдоклассов или псевдоэлементов. Например, используйте &:hover для ссылки на родительский селектор текущего селектора и добавьте стиль состояния :hover.


.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  &:hover {
    background-color: #2980b9;
  }
}

вложенный вложенный

SCSS допускает несколько уровней вложенности селекторов, например:


.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

Вложение свойств

В SCSS, помимо вложения селекторов, есть еще функция вложения атрибутов, которая делает таблицы стилей более понятными и простыми в управлении. Вложенность свойств позволяет организовывать связанные свойства вместе, подобно форме объекта.

Базовое вложение атрибутов

Вложенность свойств можно использовать для размещения связанных свойств в блоке кода, например:


.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

В приведенном выше примере блоки шрифта, полей и отступов содержат связанные атрибуты. Такая организация делает свойства внутри каждого блока более понятными и простыми для изменения и обслуживания.

наследовать

В SCSS наследование (Extend) — очень полезная функция, позволяющая одному селектору наследовать правила стиля другого селектора. Эта функция уменьшает дублирование кода CSS и делает таблицы стилей более модульными и простыми в обслуживании.

Основное использование

Наследование селектора может быть достигнуто с помощью ключевого слова @extend. Например:


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}
 
.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

В приведенном выше примере %message-shared — это селектор-заполнитель, определяющий общий набор стилей. .success-message и .error-message соответственно наследуют стиль %message-shared и добавляют свои собственные цвета фона.

Примечания о наследовании

Порядок селекторов: наследование может генерировать длинный список селекторов, что может повлиять на приоритет стиля. При использовании @extend убедитесь, что порядок и положение селекторов верны, чтобы избежать ненужных проблем с приоритетом.
Ограничение: унаследованные селекторы должны располагаться после унаследованных селекторов. Это означает, что если вы определите селектор в файле SCSS и используете @extend для наследования его стиля в последующем коде, это наследование вступит в силу только после того, как оно будет определено.
Селекторы-заполнители против селекторов классов. Селекторы-заполнители, начинающиеся с %, обычно являются лучшими объектами для наследования, чем прямые селекторы классов, поскольку они не генерируют избыточные селекторы после компиляции. С другой стороны, селекторы классов будут генерировать повторяющиеся стили везде, где они используются, увеличивая размер и сложность файла.

Сценарии применения

Наследование особенно подходит для селекторов с общими характеристиками, таких как компоненты кнопок, окна сообщений и т. д. Благодаря наследованию вы можете повторно использовать одни и те же правила стиля в разных сценариях, сохраняя при этом чистоту и удобство обслуживания вашего кода.

Подводя итог, наследование в SCSS — это мощный инструмент, который может помочь вам избежать дублирования стилей и сохранить модульность и ясность вашего кода. Однако при его использовании вам необходимо обращать внимание на разумный порядок и положение селекторов. использование заполнителей для максимизации его эффекта.

Заполнитель %

Заполнитель % — это специальный селектор в SCSS, который часто используется для определения правил стиля, которые могут быть унаследованы, но не генерируют фактический вывод CSS. Конкретно:

определить заполнитель


%placeholder-selector {
  // 样式规则
}

В приведенном выше примере %placeholder-selector — это селектор-заполнитель, начинающийся с %. Он определяет набор правил стиля, но соответствующее имя селектора не будет отображаться в скомпилированном CSS.

заполнитель наследства


.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

Использование ключевого слова @extend позволяет .some-class наследовать стиль %placeholder-selector. Это означает, что .some-class будет применять все правила стиля, определенные в %placeholder-selector, и генерировать соответствующий вывод CSS.

Преимущества и применимые сценарии

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

Меры предосторожности

Порядок и положение: при использовании @extend для наследования селекторов-заполнителей унаследованный селектор-заполнитель должен быть определен до использования его селектора, иначе могут возникнуть непредвиденные проблемы с иерархией стилей.
Смешивание. Вы можете комбинировать селекторы-заполнители с обычными селекторами классов, но обращаться с ними нужно осторожно, чтобы избежать неожиданного вывода CSS.

Подводя итог, можно сказать, что селектор заполнителей% — это мощный инструмент в SCSS, который может помочь разработчикам улучшить возможность повторного использования и обслуживания таблиц стилей, одновременно уменьшая ненужную избыточность CSS.

Микс @mixin

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

Определить микс


@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

В приведенном выше примере ключевое слово @mixin определяет примесь с именем mixin-name, которая может принимать несколько аргументов (при необходимости), и определяет внутри нее набор правил стиля.

вызов микса


.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

Используйте ключевое слово @include, чтобы вызвать миксин в селекторе и передать ему параметры. Таким образом, .some-class будет применять правила стиля, определенные в миксине, и применять переданные значения параметров к соответствующим переменным параметров.

пример


@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}
 
.button-secondary {
  @include button-style(#2ecc71, #fff);
}

Преимущества и применимые сценарии

Гибкость: микширование позволяет передавать параметры и динамически генерировать различные выходные данные стиля по мере необходимости, что делает стиль более гибким и настраиваемым.
Читабельность: инкапсуляция часто используемых правил стиля в миксин может улучшить читаемость и удобство сопровождения вашего кода, особенно если один и тот же стиль требуется в нескольких местах.
Возможность повторного использования: один и тот же микс можно вызывать несколько раз в разных селекторах и файлах, чтобы избежать повторного определения стилей и уменьшить объем кода.

Меры предосторожности

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

Подводя итог, можно сказать, что mix @mixin — это мощный инструмент для инкапсуляции и повторного использования правил стиля в SCSS. Он может значительно улучшить удобство сопровождения и гибкость CSS и подходит для различных сложных и повторяющихся требований к стилю.

SCSS использует условные операторы

В SCSS условные операторы позволяют динамически генерировать стили CSS на основе определенных условий. Условные операторы в SCSS аналогичны условным операторам в других языках программирования, включая @if, @else if и @else.

оператор @if

Оператор @if позволяет создавать стили на основе условия. Синтаксис следующий:


$use-rounded-corners: true;
 
.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

В приведенном выше примере, если значение переменной $use-rounded-corners истинно, генерируется стиль класса .button, включая border-radius: 4px;. Если условие ложно, эта часть стиля не будет сгенерирована.

Операторы @else и @else if

В дополнение к @if вы также можете использовать @else if и @else для добавления дополнительных условных ветвей.


$button-size: medium;
 
.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

В этом примере, в зависимости от значения переменной $button-size, выбираются разные значения заполнения для применения к классу .button. Если условие соответствия отсутствует, будет выполнен блок кода в @else.

Вложенность условных операторов

Условные операторы также могут быть вложенными для обработки более сложной логики.


$button-style: flat;
$button-size: medium;
 
.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
 
    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

В этом примере для применения выбираются разные стили на основе значений $button-style и $button-size. Этот вложенный подход позволяет создавать сложные правила стиля на основе множества условий.

в заключение

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

Три типа циклов в SCSS

В SCSS есть три основные конструкции цикла, которые можно использовать для создания повторяющихся правил CSS: @for, @each и @ while.

@цикл for

Цикл @for используется для многократного создания стилей в соответствии с определенными шагами и условиями.

базовая грамматика：


@for $i from <start> through <end> {
  // 循环体
}

от<start> через<end> : укажите начальное и конечное значение цикла (включая конечное значение).
Переменная $i может использоваться в теле цикла для представления значения индекса текущего цикла.

Пример：


@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

В приведенном выше примере создаются три класса .item-1, .item-2 и .item-3 с шириной, установленной на 100 пикселей, 200 пикселей и 300 пикселей соответственно.

@каждый цикл

Цикл @each используется для обхода данных типа списка или карты и создания стилей для каждого элемента.

базовая грамматика：


@each $var in <list or map> {
  // 循环体
}

$var: представляет переменную текущего цикла.
<list or map>: может быть списком (например, $list: item1, item2, item3;) или картой (пара ключ-значение).

Пример：


$colors: (red, green, blue);
 
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

В этом примере создаются три класса .text-red, .text-green и .text-blue, а их цветам текста присваиваются соответствующие значения цвета.

@цикл while

Цикл @ while неоднократно генерирует стили на основе условия до тех пор, пока условие не будет выполнено.

базовая грамматика：


$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

$i: как счетчик цикла или условная переменная.
Любой код SCSS может быть выполнен в теле цикла. Обычно переменную условия необходимо обновить в конце тела цикла, чтобы избежать бесконечных циклов.

Пример：


$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

Этот код генерирует три класса .item-1, .item-2 и .item-3 и устанавливает для них ширину 100 пикселей, 200 пикселей и 300 пикселей соответственно.

Подведем итог

Три структуры цикла SCSS @for, @each и @ while используются для цикла по индексу, обхода данных по списку или типу карты и генерации стилей на основе условных циклов соответственно. Эти циклические структуры делают SCSS более мощным и гибким, способным генерировать сложные правила CSS в соответствии с потребностями.

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

В SCSS таблицы стилей можно расширить с помощью пользовательских функций, которые принимают параметры и возвращают обработанные значения.

Определить пользовательские функции

В SCSS используйте ключевое слово @function для определения функций, которые могут иметь параметры и возвращаемые значения. Например, мы определяем функцию для расчета общей ширины блочной модели элемента:


@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

В приведенном выше примере:

Total-Width — это имя функции.
Функция принимает четыре параметра: $padding, $border, $margin, $content-width.
Оператор @return используется для возврата вычисленного значения.

Используйте пользовательские функции

После определения функции ее можно использовать в стилях для расчета и генерации необходимых значений. Например:


.element {
  width: total-width(10px, 1px, 5px, 100px);
}

В этом примере функция общей ширины будет вызываться с параметрами 10px, 1px, 5px и 100px. Результат, возвращаемый функцией (116 пикселей), будет применен к свойству ширины .element.

Меры предосторожности

Функции можно включать в любой файл SCSS, а также организовывать и импортировать, как и другие правила стиля.
Все возможности SCSS, такие как операторы управления (такие как @if, @for, @each, @ while) и встроенные функции, можно использовать в функциях.
Параметрами функции могут быть любые типы данных SCSS, включая числа, строки, цвета и т. д.

Домашнее задание

Используйте SCSS для переключения черно-белой темы страницы.

html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>
 
  <script src="main.js"></script>
</body>
</html>

сцс


// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);
 
// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);
 
// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
 
  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}
 
// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}
 
// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}
 
// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}
 
// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
 
// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}
 
// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
 
  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}


/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Обмен технологиями

концепции и использование scss

что такое ссс

Сравнение scss и css

Использование scs

объявлять переменные

Дифференцировать переменные по умолчанию

Различайте глобальные переменные и локальные переменные.

Вложенный синтаксис

Вложенность селекторов

базовое размещение

Ссылка на вложенный родительский селектор (&)

Рекомендации по вложению

вложенный вложенный

Вложение свойств

Базовое вложение атрибутов

Рекомендации по вложению

наследовать

Основное использование

Примечания о наследовании

Сценарии применения

Заполнитель %

определить заполнитель

заполнитель наследства

Преимущества и применимые сценарии

Меры предосторожности

Микс @mixin

Определить микс

вызов микса

пример

Преимущества и применимые сценарии

Меры предосторожности

SCSS использует условные операторы

оператор @if

Операторы @else и @else if

Вложенность условных операторов

в заключение

Три типа циклов в SCSS

@цикл for

@каждый цикл

@цикл while

Подведем итог

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

Определить пользовательские функции

Используйте пользовательские функции

Меры предосторожности

Домашнее задание

Личный профиль

моя контактная информация