What is style css map

CSS — Source Map

For each CSS file it produces, a CSS preprocessor generates:

The source map file is a JSON file that defines a mapping between:

It allow then to map the (compiled|generated) CSS back to the original pre-processor source file.

Source map files are also generated for javascript. See Javascript source file

Articles Related

Syntax

Each CSS file contains an annotation that specifies the ( URL |location) of its source map file, embedded in a special comment on the last line of the file:

Example

For instance, Sass generates:

$textSize: 26px; $fontColor: red; $bgColor: whitesmoke; h2

h2 < font-size: 26px; color: red; background-color: whitesmoke; >/*# sourceMappingURL=styles.css.map */ 

where the mappings values are encoded in VLQ (Variable Length Quantity)

Management

Enable in Browser

In browser, you can enable them in order to debug via their setting. If they are enable, the browser will try to get them by sending a http request

Support

DevTools failed to load SourceMap

If you get this kind of warning in a browser, this is because you have enabled it in the browser and the source map file was not found on the server.

DevTools failed to load SourceMap: Could not load content for http://example.com/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

A preprocessor takes an arbitrary source file and converts it into something that the browser understands. Preprocessors implements features that browser doesn’t support natively such as: variables.

accept is a request header that specify the mimes type of the response body that are accepted by the client (ie browser) If no Accept header field is present, then it is assumed that the client accepts.

A source map provides a mapping between the original and the build source code. The bundler that combined/minified the source code creates the source map debug session The location coordinates are by.

This page is the build operation for the web. A build pipeline will: transform (compile) bundle and optimize web code html, css (less, . ) Javascript (Javascript Module, React Jsx.

Источник

Sass в коде Visual Studio | Часть 1

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

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

Что такое SASS?

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

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

Самый простой способ сделать это — в вашем терминале. Вы можете использовать команду sass для компиляции вашего Sass в CSS после его установки. Вам нужно будет сообщить Sass, куда выводить CSS и из какого файла создавать.

SASS против SCSS

• SCSS (он же Sassy CSS) — это современный стандарт. Его синтаксис очень похож на CSS в том, что он использует скобки и точки с запятой. Даже обычный CSS действителен в этом синтаксисе. Расширение файла .scss

$font-stack: Helvetica, sans-serif; $primary-color: #333; body < font: 100% $font-stack; color: $primary-color; >

• Sass — это более старый синтаксис, который фокусируется на отступах для разделения блоков кода и символов новой строки для разделения правил. Он имеет расширение файла .sass.

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

Но эти два выхода одинаковы. В этой статье я буду использовать SCSS, потому что это более естественный синтаксис. Он также отлично подходит для преобразования стандартного CSS в SCSS, так что вы можете только вставить CSS и начать работать!

Как мы устанавливаем Sass в наш проект Visual Studio Code

Прежде чем мы начнем, вы должны включить npm на своем компьютере; он включен в Node.js и может быть загружен здесь.

Установите его сейчас, если вы еще этого не сделали. Если вы не уверены, какой Node.js установлен, введите

в вашем терминале. Он установлен, если вы видите номер версии!

Затем откройте свой проект в коде VS и инициализируйте наш проект, используя

команда. если вы нажмете кнопку «Ввод», они спросят у вас некоторые вопросы, такие как имя пакета, версия, текстовая команда «Описание», например мудрый. Вы можете заполнить его как ваша страсть. наконец, вы нажимаете Enter, вы можете увидеть файл package.json в своем проекте.
Откройте файл json вашего пакета, вы можете найти имя пакета, версию и другую информацию, которую вы создали ранее.
Теперь вы можете установите sass в свой проект.

в вашем терминале, чтобы установить sass в глобальном

Затем создайте папку sass и создайте в ней файл sass (style.scss)
Затем снова перейдите к файлу package.json и создайте атрибут «start»

Здесь мы указали style.scss в качестве основного файла Sass и style.css в качестве скомпилированного файла CSS.

Также хорошей идеей будет наличие в вашем скрипте флага — watch. Флаг наблюдения указывает компилятору следить за исходными файлами на предмет улучшений и автоматически перекомпилировать в CSS, если вы сохраните файлы Sass. Пересохраните скрипт после добавления — смотрите.

Наконец, перейдите к своему терминалу и введите

Теперь вы можете видеть, что файлы style.css и style.css.map создаются автоматически.

Что такое style.css.map?

Это Less можно использовать для создания загрузочного CSS. Основная цель файла карты — сравнить исходный код css с меньшим исходным кодом в инструменте разработчика Chrome. Раньше мы так делали. В инструменте разработчика Chrome мы можем проверить эту функцию. Исходный код CSS можно просмотреть. Однако, если файл карты используется на странице с файлом bootstrap css. Можно увидеть меньше кода, относящегося к стилю элемента, который вы хотите проверить.

В следующей статье мы увидим, как писать код в style.scss и как импортировать этот код в файл style.css.

Источник

What are source maps in CSS and JavaScript?

With all the optimization techniques like bundling and minification etc getting important and popular it is good that we talk about Source Maps now. Think of this, once you bundle all the CSS files you have into one single file, how do you know which part of CSS was written in which file? To make the situation a little more tricky let us minify the bundled CSS file too. Well, here comes Source Maps to the rescue!

Source Maps, as the name suggests, is a map that contains the mapping between the source file and the final output file. It basically consists of JSON values that are used to map the compressed CSS/JavaScript code to the original file. So even after the source code is bundled or minified, the Source Map file would have information of what code was written on which line number in which file.

What are CSS Source Maps or CSS.map file?

CSS source maps are source map files for CSS. So a CSS source map file would contain the references of code that is within the minified or bundled CSS file. Usually CSS map files would be named after the CSS file names but with .map extension. For example, main.css might have its map file as main.css.map

What are Javascript Sourcemaps?

Similar to the CSS Source maps, even the JavaScript Source maps are source map files but for JavaScript. These would have reference to the JS code written in the original JavaScript file.

Why do I need a CSS / Javascript Source map?

We all want our sites to be fast and optimized and hence one of the most common optimization techniques we apply is to minify and bundle our CSS and JavaScript files. However, after these optimizations are done our multiple CSS or JavaScript files become one CSS or JavaScript file respectively. Hence, it becomes very difficult to know which CSS class was written in which file and on which line. Debugging becomes very difficult. There comes Source Maps to our rescue!

Using Source Map files, we can easily know which class was written in which file and on which line number. All the modern browsers support source maps for both CSS and JavaScript and we can utilize it through the inspect feature of the debugger console that ships with the browser. Let’s see how can we use the source maps.

How to use a source map?

Most of the modern browsers nowadays have inbuilt support for source map files. So if the source map files are available, on Inspecting an element using the developer tools shipped with the browser, it would show you the name of the file and line number where the code is written.

For example, let’s try an example using chrome :

Visit https://getbootstrap.com/getting-started/ (Bootstrap’s download page) and inspect the “Download” page heading. You can see that it has a class named “page-header” and under the “styles” tab on the right you can see that the class is defined in a file named “type.less” on line number 158 (at the time I wrote this) . Please see the screenshot below :

Now, if you notice there is no “type.less” file included on the page anywhere. This is coming from the maps file they have defined which is bootstrap.css.map located on the same path where bootstrap.css file is located. But how did the browser know this? Let check that out.

How to intimate browser that source map for a file is available?

There are different ways through which you can intimate the browser that the Source Map file for a file is available:

1. Through comment :
You can include a comment in a CSS or JS file which intimates the browser that the map file is also available and the path to it.
The Syntax for it is :

 /*# sourceMappingURL=/path/to/thefile.css.map */

For example in the case of Bootstrap.css you can find the comment referring to the SourceMaps file at the end as follows:

 /*# sourceMappingURL=bootstrap.css.map */ 

This way the browser recognizes that the source map file is located in the same folder as the CSS file but with the file name as bootstrap.css.map .

2. Through header information :
You can also send this information through the header information of the compiled CSS or JavaScript file. The header should have the following :

X-SourceMap: /path/to/thefile.css.map

This can help you avoid the comment at the end of the CSS/JavaScript files.

Please note that the Source map file would be downloaded by the browser only if the Source maps are enabled and the developer tool is open.

How to generate source maps ?

You can generate source maps through different ways. Ideally, you would like to do it using the same compiler that you used to compile your SASS/LESS files (if using any of those CSS Preprocessors). Else you can also use many other compilers that you might use to minify and bundle the CSS/JavaScript files. Some of the most common ones are :

NodeJs Modules like generate-source-map .

You can refer to their page for more details.

If you are using Webpack please refer https://webpack.js.org/configuration/output/#outputsourcemapfilename for more details on How to generate source map file using Webpack.

If you are using GulpJs you can refer https://www.npmjs.com/package/gulp-sourcemaps for more details on How to generate Source maps using GulpJs .

If you are using LESS / SASS, during the compile time itself you can pass parameters to the command to generate the source maps file.
So say if you are using LESSC compiler you can use the following command

 lessc --source-map=filename.map

# compile bootstrap.less to bootstrap.css with the map file as bootstrap.css.map

$ lessc bootstrap.less bootstrap.css --source-map

If you don’t provide a file name, it would use the output file’s name with a .map extension.

To conclude, I would say that source maps are playing a significant role in helping debug compressed or bundled files. With the trend being to optimize the websites, it becomes very important to minify and bundle the CSS and JS files, and once we do that we would definitely require source maps to debug it. You can use a compiler of your choice however, I would suggest to you the same ones that you use to compile, compress or bundle the CSS/ JS if they support it. Well, so go ahead try out generating source maps.

Источник