Как написать повторно используемый CSS с помощью SASS

CSS SCSS

Автор: Обинна Эквуно

Переводчик: Front-end Xiaozhi

Источник: proqsolutions

Ставьте лайк и смотрите снова, формируйте привычку


эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

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

Сасс тожеBootstrap 4основу операции. Это означает, что очень полезно изучить Sass, чтобы понять, как манипулировать загрузочным кодом, а не перезаписывать код (что является обычным подходом для большинства разработчиков). Понимание Sass обеспечивает лучшее понимание инструментов на уровне исходного кода.

При использовании CSS мы часто устанавливаем его в глобальном окружении, что может неправильно стилизовать элементы.

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

В этой статье мы сосредоточимся на важности препроцессоров, уделив особое внимание SASS и его способности группировать правила вместе. Использование Sass обеспечивает более логичный подход к разработке современных веб-компонентов.

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

установить sass

Есть много способов установить sass, вы можете проверитьЭтот адрес, здесь мы используемnpmУстановить:

npm install -g sass

Что не так с CSS?

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

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

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

Даже с CSS3 нам по-прежнему приходится полагаться на некоторые приемы для стилизации пользовательского интерфейса.При написании HTML полезно понимать стили вложенности и визуальной иерархии, но это невозможно с обычным CSS.

Что такое препроцессор CSS?

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

SASS или SCSS?

SCSS — это новый синтаксис, представленный в Sass 3. Его синтаксис полностью совместим с CSS3 и наследует мощные функции Sass. Sass и SCSS на самом деле одно и то же, мы обычно называем его Sass. Различия между ними заключаются в следующем:

1. Расширения файлов разные.Sass имеет суффикс ".sass" в качестве расширения, а SCSS имеет суффикс ".scss" в качестве расширения.

2. Грамматика другая, Sass написан по строгим правилам грамматики отступов без фигурных скобок ({}) и точек с запятой (;), а грамматика SCSS очень похожа на нашу грамматику CSS.

Сначала рассмотрим пример:

Синтаксис Sass:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Scss-синтаксис:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

В приведенном выше примере кода мы заметили разницу в написании Sass и SCSS. Обратите внимание, что они оба используют$объявить переменные.

Концепции в SCSS

Вложенность и область действия

При стилизации HTML-файлов SCSS позволяет нам иметь ту же визуальную иерархию HTML в таблицах стилей, чтобы мы могли стилизовать более понятным способом. Например, спроектировать этоindex.htmlстиль

<nav class = 'sidebar'>
  <ul>
    <li> <a> </a></li>
  </ul>
</nav>

CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

SCSS:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

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

Правила стиля потомков применяются к SCSS, например:

.container{
  .left-area{
    ...
  }
}

Это означает, что сclass = "left-area"изcontainerВсе потомки класса будут затронуты правилом. Базовые селекторы CSS по-прежнему работают со SCSS, например:

** >Селектор**

.container{
  > .left-area{
   ...
 }
}

Теперь только классcontainerТолько прямые подклассы .

в css“>”Это уникальный селектор в css3**, A > B** означает выбор всех дочерних элементов B элемента A, иA Bразница в том,A Bвыбирает все элементы-потомки, какA > Bвыбрать только一代.

Родительский селектор (&)

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

.container{
  &.right-area{
   background-color : #0000
 }
}

Приведенный выше код эквивалентен

.container.right-area {
  background-color : #0000
}

Мы также можем использовать родительский селектор, чтобы квалифицировать роль в другом классе, например

В примере кода из-за родительского селектораcolor:#fffотносятся только к.theme-darkДобрый.

Переменная

Обычно в CSS мы делаем это с помощью@importСвязывание различных таблиц стилей с основным CSS означает необходимость загрузки дополнительных файлов CSS.

Что, если бы был способ проанализировать все эти входные данные в один файл CSS с помощью SCSS. Концепция переменных в CSS исходит из подхода JS.

Обратите внимание, что в SCSS@importИспользуется для передачи некоторого контента другимSCSSфайлы, но они не будут файлами CSS с префиксом имени_Выражать.

Использование переменных scss

Переменные в SCSS отмечены знаком доллара.$начало.

$color: #f002
.color{
  $text_color: #ddd;
  background-color: $color;
  color: $text_color;
  text-shadow:0 0 2px darken($text_color, 40%);
}

Из приведенного выше кода мы замечаем$text_colorДоступно только внутри блоков кода.

Mixins

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

утверждение

СоздайтеmixinОчень просто, просто добавьте перед блоком стилей@mixinа такжеmixinимя, как показано ниже

@mixin {insert name} {
     //write CSS code here
}

Пример:

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

По историческим причинам дефисы и подчеркивания считаются одним и тем же, т.е.@mixin mixin-name { }а также@mixin mixin_name { }это то же самое.

Применение

Для использования в блоке кодаmixin, мы должны использовать@include, затем взятьmixinИмя.

.button-green {  
    @include button;  
    background-color: green;  
}

здесь через@includeПеред вызовом я создал файл с именемbuttonМодуль миксина, затем разобранный CSS выглядит так:

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background-color: green;  
}

использоватьmixinДругой способ — использовать параметры, как функции в JS, мы можем объявить глобальную переменную и установить ее какmixinПараметр , здесь обновлено вышеbuttonмодуль, добавив имяbackgroundПараметр и передайте его в модуль.

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

Обратите внимание, что для параметра задана переменная, и он становитсяbackroundСтоимость имущества. Если мы хотим создать зеленую кнопку, то можем использовать следующий код:

.button-green {  
    @include button(green);  
}

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

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

Теперь, если вы забудете передать значение параметра при вызове:

.button-green {  
  @include button;  
}

Ваш код будет проанализирован с использованием установленного вами значения параметра по умолчанию, которое в данном случае равноgreenэто значение.

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}

функция

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

Здесь перечислены некоторые часто используемые функции:

  • lighten(color,amount): Сделать цвет светлее.
  • darken(color,amount): Делает цвет темнее.
  • adjust-hue(color,degrees): изменение оттенка цвета.
  • mix(color1,color2, $weight): Смешайте два цвета вместе в определенном соотношении, чтобы получить другой цвет.
  • hue($color): получает компонент оттенка цвета.
  • saturation($color): получить компонент насыщенности цвета.
  • lightness($color): получить компонент светлоты цвета.

Мы также можем определить нашу собственную функцию Sass, чтобы реализовать объявление функции и вернуть контент, который нам нужно использовать.functionа такжеreturnДве директивы, аналогичные ключевым словам в других языках.

@function 函数名(形参) {
  @return;
}

Вы можете использовать имя функции напрямую, когда используете его:

@function getWidth($w) {
  @return $w * 2;
}

.main{
  max-width: #{getWidth(20)}px;
}

После компиляции:

.main {
  max-width: 40px;
}

Условные стили с потоком управления

if()

if()Sass — это встроенная функция, аналогичная ей@ifявляется встроенной директивой.if()Используется для вынесения условных суждений и возврата конкретных значений. Примеры:

@mixin test($condition) { 
  $color: if($condition, blue, red); 
  color:$color 
}
  
.firstClass { 
  @include test(true); 
} 
 
.secondClass { 
  @include test(false); 
}

Результат компиляции:

.firstClass {
  color: blue; 
} 
.secondClass { 
  color: red; 
}

В приведенном выше примереif()Три параметра в функции представляют собой: условие теста, возвращаемое значение успеха теста, возвращаемое значение отказа теста (все условия теста, кроме false и null, считаются успешными тестами). Если в приведенном выше примере в качестве условия используется число, оно также вернет значение, указывающее на то, что тест прошел успешно:

.firstClass { 
  @include test(1); 
}

@if

@ifс последующим выражением, если результат выраженияtrue, возвращает определенный стиль, например:

@mixin txt($weight) { 
  color: white; 
  @if $weight == bold { font-weight: bold;} 
} 

.txt1 { 
  @include txt(none); 
} 

.txt2 { 
  @include txt(bold); 
}

Результат компиляции:

.txt1 { 
  color: white; 
} 
.txt2 { 
  color: white; 
  font-weight: bold; 
}

@for

@forИнструкции часто используются для циклического вывода.@forЕсть два способа его использования:from start through endа такжеfrom start to end, разница между ними состоит в том, что диапазон, пройденный первым, равен[start, end], а дальность обхода последнего[start, end-1]. существует@forФиксированная переменная используется в цикле для замены пройденного элемента. Если вы хотите перейти от большого к малому, просто позвольтеstartбольше, чемendВот и все. Ниже@forПростой пример:

@for $i from 1 through 4 { 
  .col-#{$i} { 
    width: 100/4 * $i + %;
  } 
}

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

.col-1 { 
  width: 25%; 
} 
.col-2 { 
  width: 50%; 
} 
.col-3 { 
  width: 75%; 
} 
.col-4 { 
  width: 100%; 
}

Суммировать

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

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:woohoo.pro решения для поездок.com/creating-hot…

общаться с

Статьи из серии галантерейных товаров резюмируются следующим образом: если вы чувствуете себя хорошо, нажмите «Звезда», добро пожаловать в группу, чтобы учиться друг у друга.

GitHub.com/QQ449245884…

Я Сяо Чжи, автор официального аккаунта "Moving the World",Продолжайте знакомить энтузиастов с передовыми технологиями. Я буду часто делиться тем, что я узнал и увидел, На пути продвижения, давайте подбадривать друг друга!

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

clipboard.png

Категории