Подключить файл css в css: @import | htmlbook.ru

Содержание

@import | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+2.0+4.0+2.0+1.0+1.0+1.0+

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

Версии CSS

Описание

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

Синтаксис

@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
ТипОписание
allВсе типы. Это значение используется по умолчанию.
auralРечевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
brailleУстройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheldНаладонные компьютеры и аналогичные им аппараты.
printПечатающие устройства вроде принтера.
projectionПроектор.
screenЭкран монитора.
tvТелевизор.

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

Значения

В качестве значения используется путь к стилевому файлу, который указывается
внутри необязательной конструкции url(). Путь к файлу при этом
можно писать как в кавычках (двойных или одинарных), так и без них.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Браузеры

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

Подключение CSS — Часть 1 • Vertex Academy

  • Данная статья написана командой Vertex Academy.
  • Это одна из статей из нашего Самоучителя по HTML&CSS.
  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы продолжим знакомство с CSS, а именно научимся подключать CSS стили.

Приведем аналогию из нашей обычной жизни. У всех у нас дома есть розетки и бытовые приборы (электрочайник, стиральная машинка и т.д.). Так вот, если розетка отдельно, а штепсель от элетроприбора отдельно, как бы пользы от этого мало 🙂 Надо чтоб они были подключены. Верно?

Точно так же и с HTML и CSS.

Вы уже знаете:

  • с помощью HTML мы задаем структуру страницы
  • с помощью CSS мы стилизуем данную страницу

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

Существует 3 способа подключения CSS к HTML. Рассмотрим каждый способ по порядку.

Способ №1 — Создаем CSS-файл и подключаем его к HTML-файлу

Вы уже знаете, что все HTML-файлы имеют расширение .html. Например:

  • index.html
  • contacts.html
  • page-2.html

Точно также для CSS-стилей мы можем создать отдельный файл, только с расширением .css. Например, style.css.

На картинке ниже показан пример, как можно подключить файл style.css к файлу index.html.

Как видите, в теге <head> нам необходимо написать следующее:

<head>
<link rel=»stylesheet» href=»style.css»>
</head>



<head>

    <link rel=»stylesheet» href=»style.css»>

</head>

  • <link>  — это специальный тег, который используется для подключения CSS-стилей.
  • rel = «stylesheet» — это аттрибут rel со значением «stylesheet», что значит таблица стилей. То есть таким образом мы говорим браузеру, что мы хотим подлючить таблицу стилей.
  • href = «style.css» — в аттрибуте href мы прописали путь к файлу style.css.

Как бы и все 🙂 Файл style.css будет подключен к файлу index.html.

Теперь сделайте это на практике — всего 3 шага:

Шаг 1: Создадим 2 файла:  index.html и style.css.

Структура файла index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=»UTF-8″>
<title>Название страницы</title>
</head>
<body>
<p>Утром надо быть особенно осторожным. Одно неловкое движение — и ты снова спишь.</p>
<p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p>
</body>
</html>



<!DOCTYPE html>

<html>

<head>

    <meta charset=»UTF-8″>

    <title>Название страницы</title>

</head>

<body>

    <p>Утром надо быть особенно осторожным. Одно неловкое движение — и ты снова спишь.</p>

    <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p>

</body>

</html>

Структура файла style.css

p {
font-family: Georgia;
font-size: 18px;
color: green;
}



p {

    font-family: Georgia;

    font-size: 18px;

    color: green;

}

Шаг 2: Подключаем файл style.css к файлу index.html.

Для этого в файле index.html добавьте тег <link> c необходимыми аттрибутами:

<!DOCTYPE html>
<html lang=»en»>

<head>
<meta charset=»UTF-8″>
<title>Название страницы</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<p> Утром надо быть особенно осторожным. Одно неловкое движение — и ты снова спишь. </p>
<p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланнированных. </p>
</body>

</html>



<!DOCTYPE html>

<html lang=»en»>

<head>

    <meta charset=»UTF-8″>

    <title>Название страницы</title>

    <link rel=»stylesheet» href=»style.css»>

</head>

<body>

    <p> Утром надо быть особенно осторожным. Одно неловкое движение — и ты снова спишь. </p>

    <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланнированных. </p>

</body>

</html>

Шаг 3: Открываем файл index.html в браузере. В браузере Вы увидите 2 текста параграфов, написанные:

  • шрифтом: Georgia
  • размером шрифта: 18px
  • цветом: зеленым

Поздравляем! Вы уже умеете подключать CSS к HTML.

Данный способ подключения CSS к HTML является самым распространенным и правильным. Однако мы Вам покажем и 2 других способа, просто чтоб Вы знали как они выглядят, если увидите в коде.

Следующие 2 способа подключения CSS мы опишем в следующей статье.

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.

React css — компонентый подход

Всем привет. В этом уроке мы разберем как работать с стилями в react.

Если мы посмотрим в index.js файл, то увидим, что там импортируется index.css. То есть в javascript можно импортировать css. Это делается при помощи webpack лоадера, который специальным образом обрабатывает все файлы с расширением .css.

Давайте добавим в index.css у body

background: green

Как мы видим, в браузере фон поменялся на зеленый. Если мы посмотрим в head нашей страницы, то увидим, что у нас добавился элемент style с стилями внутри. Обратите внимание, что когда мы меняем стили, страница не перегружается. Это происходит потому, что внутри react-create-app настроен hot-reloader, который позволяет многие действия применять без перезагрузки страницы. Это очень удобно, так как позволяет быстро пробовать различные стили и елементы.

Как же мы с вами можем структурировать стили этого проекта?

  1. В index.css пишем глобальные стили
  2. Под каждый компонент пишем стили для каждого компонента отдельно

Давайте попробуем

Создадим App.css и импортируем его в App.js

import './App.css';

Для того, чтобы задать елементу в react класс, используется специальный атрибут className. Например, мы можем в className задать строку container. И эта запись конвертируется в обычный класс в html, который будет искать у нас .container. Если мы напишите атрибут class, то он работать не будет. Это очень часто бывает у людей, которые только начинают знакомиться с реакт.

<div className="container">
  <RegistationForm />
</div>

И добавим стили в файле App.css к классу container.

.container {
  width: 700px;
  border: 1px solid red;
  margin: 0 auto;
}

Как мы видим, я неправильно указал импорт App.css. Нам нужно указать relative путью

Как мы видим в браузере все стили применились, но они глобальные. То есть написав класс container в двух разных файлах и примените к ним стили, мы перетрем стили одного из них.

Ну и напоследок давайте применим какие-то стили к вложенному компоненту RegistationForm. Мы, естественно, не хотим их писать в App.js, поскольку это будет тогда не внутри формы регистрации. Мы хотим ее переиспользовать сразу с стилями. Создаем новый файл RegistationForm.css и добавляем классы к инпуту и к button.

  <input
    type="text"
    placeholder="E-mail"
    value={this.state.email}
    onChange={this.handleEmailChange}
    className="emailField"
  />
  <button className="submitBtn">Save</button>

Импортируем цсс файл к нашей компоненте

import './RegistationForm.css';

Добавляем стили для инпута и кнопки.

.emailField {
  width: 300px;
  height: 40px;
  display: block;
  border-radius: 4px;
  margin-bottom: 10px;
}

.submitBtn {
  width: 300px;
  background: green;
  height: 50px;
  border: 0;
}

Теперь если мы посмотрим в браузер, мы видим, что все наши стили применились. И единственный вопрос, что же будет с стилями для продакшена.
Так как у нас все стили находятся в head, и это подойдет не всем. Для продакшена многие люди хотят отдельный файл css в котором все стили минифицированы. Это абсолютно нормально, потому что create-react-app позволяет билдить наш продакшен командой

npm run build

То у вас в папке build/static будет лежать 2 файла css и js. Оба файла минифицированы. У нас также есть файл index.html, в который подключены эти файлы. Все что вам остается после билда — это засунуть эти файлы в проект на сервере.

Подключение файла стилей CSS на видеокурсе от Loftblog

Человек стремится к знанию, и как только в нем угасает жажда знания,
он перестает быть человеком. Ф. Нансен

Сегодня мы представляем вашему вниманию видеокурс по основам CSS. Серия видеоуроков нашего курса предназначена тем, кто уже ознакомился и изучил материалы видеокурса по основам HTML. На первом видеоуроке к рассмотрению предлагается ознакомление с понятием CSS-правила, селекторов и блоков объявлений, подключение файла стилей CSS. Итак, приступим к изучению этой увлекательнейшей темы.

Какие знания о CSS, CSS-правилах, подключении файла стилей CSS вы почерпнете на этом видеоуроке

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

Где лучше прописывать файлы стилей CSS

Крайне не рекомендуется прописывать стили для веб-страничек непосредственно в HTML-разметке внутри тега <style>, хотя теоретически это допускается. Но такое задание стилей очень негативно скажется на работе вашего сайта, его загрузке. Все CSS-правила нужно писать в отдельных файлах, которые затем сохранять в специальной папке, расположенной в основном каталоге нашего проекта, в его корне.

Правильное подключение файла стилей CSS

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

<head>
<link href="css/style.css" rel="stylesheet">
</head>

Правильное оформление CSS-правил

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

.class {
font-size: 18px;
width: 50px;
}

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

.class, р {
font-size: 18px;
color: #fd2bac;
width: 50px;
}

Селекторов в подключенном файле стилей CSS может быть очень много, так же, как и блоков объявлений в самом CSS-правиле.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Рекомендуемые курсы

wp_enqueue_style() — подключение стилей CSS — WordPressify

Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head>, либо в футере сайта.

Стили выводятся в футере (перед </body>) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )
$handle
(строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь)
$src
(строка|логическое) абсолютный URL таблицы CSS-стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если файл CSS уже зарегистрирован при помощи wp_register_style(), то этот и последующие параметры отпадают.
$deps
(массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаем файлом, то нужно перечислить их идентификаторы в массиве
$ver
(строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать null, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша.
$media
(строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный CSS-файл, например all — для всех, print — для печати и т.д.

Примеры

Во всех примерах будем использовать один и тот же файл true_style.css. Стили также можно подключать через хуки wp_enqueue_scripts и admin_enqueue_scripts, хотя это и не обязательно, как со скриптами.

Итак, сначала подключим файл во фронтэнде сайта:

function true_style_frontend() {
    wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' );
}
 
add_action( 'wp_enqueue_scripts', 'true_style_frontend' );

Можно подключить файл непосредственно на сайт, вставив функцию прямо в HTML-шаблон, или же в functions.php, при этом не забыв воспользоваться условным тегом is_admin().

if( !is_admin() )
    wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css', array(), '14981210', 'screen' );

Теперь сделаем так, чтобы файл подключался только в админке:

function true_style_backend() {
    wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' );
}
 
add_action( 'admin_enqueue_scripts', 'true_style_backend' );

А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще. Опять-таки пример для админки:

if( is_admin() )
    wp_enqueue_style( 'true_style' );

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

/*
 * Объект $wp_styles содержит информацию обо всех зарегистрированных на данный момент стилях
 */
global $wp_styles;
print_r( $wp_styles );

CSS специально для настроек плагина

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

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

/*
 * Пример будет работать начиная с версии WordPress 2.6.3, 
 */
add_action( 'admin_init', 'true_plugin_init' );
add_action( 'admin_menu', 'true_plugin_menu' );
 
function true_plugin_init() {
    /* 
     * Сначала регистрируем стили
     * файл CSS должен находиться в папке с выполняемым файлов плагина
     */
    wp_register_style( 'trueplugin', plugins_url('true-plugin.css', __FILE__) );
}
 
function true_plugin_menu() {
    /*
     * Создаем страницу настроек плагина, она будет находиться в разделе Параметры
     */
    $page_suffix = add_submenu_page( 'options-general.php', 'True плагин', 'True плагин настройки', 'administrator', __FILE__, 'true_plugin_html' );
 
    /*
     * Создаем хук, содержащий суффикс созданной страницы настроек $page_suffix
     */
    add_action( 'admin_print_styles-' . $page_suffix, 'true_plugin_styles' );
}
 
function true_plugin_styles() {
    /*
     * Ставим в очередь на вывод
     */
    wp_enqueue_style( 'trueplugin' );
}
 
function true_plugin_html() {
    /*
     * Собственно содержимое страницы настроек
     */
    echo 'Это страница настроек';
}

Подмена файла стилей style.css в зависимости от разрешения экрана монитора

Разрешение экрана монитора

Стандартным разрешением экрана, до недавнего времени, считались размеры: 1024 px – ширина и 768 px – высота. Именно на такой монитор старались ориентироваться web мастера при верстке очередного web ресурса. Но прогресс не стоит на месте и сегодня при создании сайта необходимо учитывать все разнообразие мониторов для того, чтобы дизайн Вашего сайта отображался одинаково при любом разрешении экрана у пользователя.
Вот об этом я и хочу рассказать в этой статье.
Для начала выясним, какие свойства и каких элементов дизайна придется изменять, чтобы сохранить внешний вид веб страницы. Во-первых, это фоновый рисунок – т. е. свойство background-image для body. Далее идут: размер шрифта – font-size и размеры картинок width и height для элементов img. Как Вы уже догадались, все эти свойства находятся в одном файле стилей – style.css. Поэтому, на мой взгляд, проще всего при загрузке страницы узнать разрешение экрана монитора у пользователя, а затем в зависимости от размеров ширины (width) и высоты (height) заменить файл style.css на соответствующий данным параметрам.
Всё вышесказанное будем реализовывать при помощи javascript.

Определяем разрешение экрана пользователя
        var w = screen.width;  //- ширина экрана  монитора
        var h = screen.height; //- высота экрана монитора
Задаём условие

        // для разрешений меньше или равных 1024х768
        if (w <= '1024' && h <= '768')
       // или
        if (w == '1280' && h == '1024') – //для разрешения 1280х1024/
        //если хотим задать диапазон разрешений, то можно указать ширину без высоты/
        if (w >= '1024' && w<= '1280')

это будет зависеть от фоновой картинки и других элементов дизайна страницы сайта.

Подменяем файл стилей style.css. 

          {document.getElementById("stylesheet").href="css/style_1024х768.css";}

Предварительно не забудьте прописать  в подключении файла стилей:

          <link rel="stylesheet" href="css/style.css"  type="text/css" media="screen"  />

Функция для замены CSS в соответствии с разрешением экрана.

  function  changeCss() {
              var w =  screen.width;
              var h =  screen.height;
              if (w <=  '1024' && h <= '768')
                  {
                           document.getElementById("stylesheet").href="css/style_1024х768.css";
                  }
              else
                    {
                           if (w == '1152' && h ==  '864')
                                  {
                                           document.getElementById("stylesheet").href="css/style_1152х864.css";
                                  }
                              else
                                    {
                                             if (w == '1280'  && h == '800')
                                                   {
                                                           document.getElementById("stylesheet").href="css/style_1280х800.css";
                                                   }
                                             else
                                                    {
                                                           if (w >= '1280' && h >=  '1024')
                                                                {
                                                                      document.getElementById("stylesheet").href="css/style_1024х1024.css";
                                                               }
                                                   };
                                   };
                  };
             };

Теперь остаётся сохранить данную функцию в файле javascript.js и перед закрывающемся тегом </head> сделать подключение и запуск.

          <script  type="text/javascript"  src="javascript.js"></script>
          <script  type="text/javascript">
          window.onload  = changeCss;
          </script>
          </head>

Вот и всё.

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

 

Основные функции: Встроенная поддержка CSS

Примеры

Next.js позволяет импортировать файлы CSS из файла JavaScript.
Это возможно, потому что Next.js расширяет концепцию import за пределы JavaScript.

Чтобы добавить таблицу стилей в приложение, импортируйте файл CSS в пределах страниц / _app.js .

Например, рассмотрим следующую таблицу стилей с именем styles.css :

  кузов {
  семейство шрифтов: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    "Arial", без засечек;
  отступ: 20 пикселей, 20 пикселей, 60 пикселей;
  максимальная ширина: 680 пикселей;
  маржа: 0 авто;
}

Создайте страниц / _app.js , если он еще не существует.
Затем импортирует файл styles.css .

  import '../styles.css'


экспортировать функцию по умолчанию MyApp ({Component, pageProps}) {
  return 
}

Эти стили ( styles.css ) будут применяться ко всем страницам и компонентам в вашем приложении.
Из-за глобального характера таблиц стилей и во избежание конфликтов вы можете импортировать их только внутри страниц / _app.js .

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

В производственной среде все файлы CSS будут автоматически объединены в один минифицированный файл .css .

Импорт стилей из

node_modules

Начиная с Next.js 9.5.4 , импорт файла CSS из node_modules разрешен в любом месте вашего приложения.

Для глобальных таблиц стилей, таких как bootstrap или nprogress , вы должны импортировать файл в pages / _app.js .
Например:

 
импортировать 'bootstrap / dist / css / bootstrap.css'

экспортировать функцию по умолчанию MyApp ({Component, pageProps}) {
  return 
}

Для импорта CSS, требуемого сторонним компонентом, вы можете сделать это в своем компоненте. Например:

 
импортировать {useState} из "реагировать"
импортировать {Dialog} из '@reach / dialog'
import VisuallyHidden из '@reach / visually-hidden'
import '@reach / dialog / styles.css'

function ExampleDialog (props) {
  const [showDialog, setShowDialog] = useState (ложь)
  const open = () => setShowDialog (истина)
  const close = () => setShowDialog (ложь)

  возвращение (
    

      
      
        
        
 Здравствуйте.Я диалог 

      
    

  )
}

Next.js поддерживает модули CSS, используя соглашение об именах файлов [имя] .module.css .

Модули

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

Такое поведение делает модули CSS идеальным способом включения CSS на уровне компонентов.
Файлы модуля CSS могут быть импортированы в любое место вашего приложения .

Например, рассмотрим повторно используемый компонент Button в папке components / :

Сначала создайте components / Button.module.css со следующим содержимым:

 
.ошибка {
  цвет белый;
  цвет фона: красный;
}

Затем создайте components / Button.js , импортировав и используя указанный выше файл CSS:

  импортировать стили из './Button.module.css'

кнопка функции экспорта () {
  возвращение (
    кнопка <
      type = "кнопка"
      
      
      className = {стили.ошибка}
    >
      Разрушать
    
  )
}

Модули

CSS являются дополнительной функцией и включены только для файлов с расширением .module.css .
Стандартные таблицы стилей и глобальные файлы CSS по-прежнему поддерживаются.

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

Next.js позволяет импортировать Sass с использованием расширений .scss и .sass .
Вы можете использовать Sass на уровне компонентов через модули CSS и расширение .module.scss или .module.sass .

Прежде чем вы сможете использовать встроенную поддержку Next.js Sass, обязательно установите sass :

  npm установить sass

Поддержка

Sass имеет те же преимущества и ограничения, что и встроенная поддержка CSS, описанная выше.

Примечание : Sass поддерживает два разных синтаксиса, каждый со своим собственным расширением.
Расширение .scss требует использования синтаксиса SCSS,
в то время как расширение .sass требует использования синтаксиса с отступом («Sass»).

Если вы не уверены, что выбрать, начните с расширения .scss , которое является надмножеством CSS и не требует изучения
Синтаксис с отступом («Sass»).

Настройка параметров Sass

Если вы хотите настроить компилятор Sass, вы можете сделать это, используя sassOptions в далее.config.js .

Например, чтобы добавить , includePaths :

  const path = require ('путь')

module.exports = {
  sassOptions: {
    includePaths: [path.join (__ dirname, 'styles')],
  },
}

Переменные Sass

Next.js поддерживает переменные Sass, экспортированные из файлов модуля CSS.

Например, используя экспортированную переменную Sass primaryColor :

 
$ primary-color: # 64FF00

: export {
  primaryColor: $ primary-color
}
  
 
импортировать переменные из '../styles/variables.module.scss '

экспортировать функцию по умолчанию MyApp ({Component, pageProps}) {
  возвращение (
    <Цвет макета = {variables.primaryColor}>
      <Компонент {... pageProps} />
    
  )
}

Примеры

Можно использовать любое существующее решение CSS-in-JS.
Самый простой — встроенные стили:

  function HiThere () {
  return 
 привет 

}

экспорт по умолчанию HiThere

Мы объединяем styled-jsx, чтобы обеспечить поддержку CSS с изолированной областью видимости.Цель состоит в том, чтобы поддерживать «теневой CSS», аналогичный веб-компонентам, которые, к сожалению, не поддерживают рендеринг на сервере и предназначены только для JS.

См. Приведенные выше примеры для других популярных решений CSS-in-JS (например, стилизованных компонентов).

Компонент, использующий styled-jsx , выглядит так:

  function HelloWorld () {
  возвращение (
    

      Привет, мир
      
 задан! 

      
      <стиль глобального jsx> {`
        тело {
          фон: черный;
        }
      `} 
    

  )
}

экспорт по умолчанию HelloWorld

Дополнительные примеры см. В документации по styled-jsx.

Работает ли он с отключенным JavaScript?

Да, если вы отключите JavaScript, CSS все равно будет загружен в производственную сборку ( при следующем запуске ). Во время разработки мы требуем, чтобы JavaScript был включен, чтобы обеспечить максимальное удобство для разработчиков с помощью Fast Refresh.

Для получения дополнительной информации о дальнейших действиях мы рекомендуем следующие разделы:

таблиц стилей | IntelliJ IDEA

С помощью IntelliJ IDEA вы можете писать определения стилей в CSS, а также на различных языках, которые в него компилируются, таких как Sass, Less, SCSS или Stylus.

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

Перед началом работы

Убедитесь, что подключаемый модуль CSS включен в меню «Настройки» / «Предпочтения» | Страница «Плагины», вкладка «Установленные», подробности см. В разделе «Управление плагинами».

Завершение кода

IntelliJ IDEA обеспечивает завершение кода для свойств, их значений, селекторов, переменных и миксинов.

Полные классы таблицы стилей

Завершение для классов и идентификаторов CSS, SCSS, Less и Sass доступно в файлах HTML, в различных типах шаблонов (например, в Angular или Vue.js), а также в коде JSX.

В файлах HTML IntelliJ IDEA сначала предлагает классы и идентификаторы из тега стиля и файлы, связанные тегами link . Если совпадающие результаты не найдены, IntelliJ IDEA также предлагает символы, определенные во всех файлах таблиц стилей в проекте. Чтобы сразу увидеть все классы и идентификаторы, определенные в проекте, перед тем, как начать вводить текст, дважды нажмите Ctrl + Пробел .

Полные классы таблицы стилей из внешних библиотек

С помощью IntelliJ IDEA вы также можете получить завершение имен классов из Twitter Bootstrap или других библиотек CSS, которые связаны из CDN в файле HTML, без добавления этих библиотек в зависимости вашего проекта.

  1. Откройте файл HTML со ссылкой CDN на внешнюю библиотеку CSS. IntelliJ IDEA выделяет ссылку.

  2. Чтобы включить автозавершение для библиотеки, нажмите Alt + Enter на ссылке и выберите из списка. Либо наведите указатель мыши на ссылку и нажмите «Загрузить библиотеку».

Библиотека добавлена ​​в список библиотек JavaScript на странице, подробности см. В разделе Настройка библиотеки, добавленной через ссылку CDN.

Полные селекторы Sass и SCSS

IntelliJ IDEA также обеспечивает завершение для селекторов Sass и SCSS, включая вложенные селекторы и селекторы, созданные с помощью амперсанда (&).

  • Чтобы найти использование символа таблицы стилей, поместите на него курсор и нажмите Alt + F7 . Дополнительные сведения см. В разделе «Поиск использования в проекте».

  • Чтобы перейти от использования символа таблицы стилей к его определению, нажмите Ctrl + B . Переход к определению доступен для классов, идентификаторов, селекторов, включая вложенные селекторы и селекторы с амперсандами и , а также для переменных и миксинов.

    Дополнительные сведения см. В разделе «Перейти к декларации».

Поиск в документации

Для свойств и псевдоэлементов IntelliJ IDEA может показать вам сводку из соответствующей статьи MDN. Эта сводка отображается во всплывающем окне документации, в котором отображается краткое описание свойства и его значений, а также информация о его совместимости с различными браузерами.

Если свойство доступно во всех версиях браузеров, IntelliJ IDEA не показывает никакой информации о его совместимости.

В противном случае во всплывающем окне «Документация» также перечислены браузеры и их версии, поддерживающие свойство.

Обратите внимание, что совместимость проверяется только для Chrome, Chrome Android, Safari, Safari iOS, Firefox, Internet Explorer и Edge.

Для селекторов IntelliJ IDEA также показывает их специфичность.

Просмотр документации для свойства

  • Поместите курсор в свойство и нажмите Ctrl + Q или выберите в главном меню.

  • Когда вы наводите указатель мыши на свойство, IntelliJ IDEA немедленно отображает ссылку на него во всплывающем окне «Документация».

    Вы можете отключить это поведение или настроить всплывающее окно так, чтобы оно отображалось быстрее или медленнее, см. Настройка поведения всплывающего окна «Документация» ниже.

  • Чтобы отключить автоматическое отображение документации, откройте диалоговое окно «Настройки / Параметры» Ctrl + Alt + S , перейдите к и снимите флажок «Показывать быструю документацию при наведении».

  • Чтобы всплывающее окно «Документация» отображалось быстрее или медленнее, откройте диалоговое окно «Настройки / Предпочтения» Ctrl + Alt + S , перейдите к, затем установите флажок «Показать всплывающее окно документации» и укажите время задержки.

Откройте документацию MDN в браузере

  • Во всплывающем окне документации Ctrl + Q щелкните ссылку внизу.

  • Нажмите Shift + F1 или выберите в главном меню.

Форматирование

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

  • Чтобы настроить форматирование для языка таблицы стилей, откройте диалоговое окно «Настройки / Предпочтения» Ctrl + Alt + S , перейдите по ссылке и настройте языковые параметры табуляции и отступов, пробелов, обтекания и фигурных скобок, жестких и мягкие поля и т. д.

    В контексте CSS, SCSS и Less IntelliJ IDEA по умолчанию использует двойные кавычки для сгенерированных строковых литералов в операторах import и URL-адресах. Чтобы использовать одинарные кавычки, откройте вкладку «Другое» и выберите «Одиночные кавычки» в списке.

    Чтобы применить выбранный стиль ко всему файлу после переформатирования, установите флажок «Применять при форматировании» под списком.

    В настоящее время изменение конфигурации кавычек не влияет на введенные таблицы стилей и код CSS внутри тегов