[研究] css less sass stylus map 是甚麼？

[研究] css less sass stylus map 是甚麼？

2018-04-13

因為偶然看到 .map , .less 於是開始 Google 查是甚麼。

Visual Studio 2017 IDE 用 NuGet 安裝 jQuery 3.3.1 後可以看到 .map 檔案。

Visual Studio 2017 IDE 用 NuGet 安裝 Bootstrap v4.1.0後。

Visual Studio 2017 IDE 用 NuGet 安裝 Bootstrap.V3.Datetimepicker 後可以看到 .less 檔案。

W3C

全球資訊網協會（World Wide Web Consortium，W3C），又稱W3C理事會，是全球資訊網的主要國際標準組織。
https://zh.wikipedia.org/wiki/%E4%B8%87%E7%BB%B4%E7%BD%91%E8%81%94%E7%9B%9F

HTML & CSS - W3C
https://www.w3.org/standards/webdesign/htmlcss

**********
CSS

CSS 階層式樣式表 - 維基百科，自由的百科全書
https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8
層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。

**********

CSS 的變種： LESS 與 SASS
http://programmermagazine.github.io/201409/htm/focus2.html
HTML/CSS/JavaScript 這些 W3C 所規定的官方語言，LESS 與 SASS (Syntactically Awesome Stylesheets)、Stylus 則不屬於 W3C。
LESS 與 SASS 語法和 CSS 有點像，但卻又不太一樣。提供了更強大的功能，更簡潔的語法，但最後需被轉換成 CSS 語言之後，才能放到瀏覽器上使用。

把 less 或 sass 轉成 css 的工具稱為 預處理器 (preprocessor 或  pre-processor) 或轉譯器 (translator)。

將預處理代碼映射到源代碼
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

**********
LESS

Less (層疊樣式表) - 維基百科，自由的百科全書
https://zh.wikipedia.org/wiki/Less_(%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8)
less 不是縮寫字。
LESS受啟發於Sass，但更接近於CSS，新版Sass將CSS式語法引入了其中，命名為SCSS（Sassy CSS）。ZUSS受啟發於LESS，但其目的是與Java進行結合，因此混合當中不允許使用JavaScript函數，取而代之的是Java函數。

Less (stylesheet language) - Wikipedia
https://en.wikipedia.org/wiki/Less_(stylesheet_language)

less 官方網站
http://lesscss.org/
https://github.com/less/less.js

Sass/Less Comparison
https://gist.github.com/chriseppstein/674726

**********
SASS

Sass - 維基百科，自由的百科全書
https://zh.wikipedia.org/wiki/Sass

Sass (stylesheet language) - Wikipedia
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

官方網站
http://sass-lang.com/
http://sass-lang.com/guide

Sass 参考手册 | Sass 中文文档
http://sass.bootcss.com/docs/sass-reference/

**********
SCSS(Sassy CSS，時髦的CSS)

SCSS 15分鐘入門 - eddychang.me
http://eddychang.me/blog/others/91-scss-15-mins.html

SCSS入門筆記 « Augus's Blog
http://augus-blog.logdown.com/posts/143401-scss-tutorial

**********
Stylus

Stylus (stylesheet language) - Wikipedia
https://en.wikipedia.org/wiki/Stylus_(stylesheet_language)

Built-in Functions — Stylus
http://stylus-lang.com/docs/bifs.html

**********
JavaScript Source Map

JavaScript Source Map 介绍
http://bubkoo.com/2014/01/05/introduction-to-javascript-source-maps/

Source Map(原始碼映射表)
http://eddychang.me/blog/javascript/76-source-map.html

Source Map是除錯時用的，它是用來映射對照"正式執行的程式碼檔案內容"，與"開發時撰寫的程式碼檔案內容"。

它不只用於Javascript，也可以用於CSS框架如SASS/LESS的除錯。目前這種檔案的規格是由Google Chrome開始制定的，大約是在2013年開始。Chrome也是最早能支援Source Map的瀏覽器，目前還有另外的瀏覽器也可以支援 - Firefox、Opera、Safari、IE11等等。

Source Map會被制定出來，主是要因為Javascript程式碼，雖然直接從瀏覽器的原始碼檢視工具可以看得到，但在應用程式正式發行時，為了增加檔案傳輸的效率，進行最小化(Minify)或醜化(Uglify)之類的壓縮，造成無法直接進行原始碼除錯的工作。

JavaScript Source Map 详解
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

jquery-1.10.2.min.map是什么，怎么用？
https://segmentfault.com/q/1010000000259052

**********
CoffeeScript

CoffeeScript - 維基百科，自由的百科全書
https://zh.wikipedia.org/wiki/CoffeeScript

CoffeeScript - Wikipedia
https://en.wikipedia.org/wiki/CoffeeScript

********************************************************************************

聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp (HTML5 Boilerplate)
https://ruby-china.org/topics/4370

为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
http://www.oschina.net/question/12_44255

線上轉換

在線Less轉換CSS工具
http://www.awesometool.org/Encode/Lesscss

LESS編譯、LESS轉換為CSS、LESS編譯為CSS
https://1024tools.com/less

離線工具

CSS, Sass and Less
https://code.visualstudio.com/docs/languages/css
Visual Studio Code has built-in support for editing style sheets in CSS .css, Sass .scss and Less .less.

LessCompiler
https://github.com/madskristensen/LessCompiler

Web Compiker
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
The easiest and most powerful way to compile LESS, Scss, Stylus, JSX and CoffeeScript files directly within Visual Studio or through MSBuild.

為什麼Visual Studio 2017不支持實時預覽less到css了？
https://segmentfault.com/q/1010000010615301/a-1020000010968203
2017年08月11日提問
Visual Studio 2013有一個插件，可以在保存.less文件時，自動編譯成.css和.map(.map文件存在編碼問題導致不能用)，而且在less文件編輯界面，可以分拆成左右兩個窗格，右側顯示的是編譯的css文件。
更新了Visual Studio 2017後，這個插件不再支持了，並且其他的插件只有在解決方案裡才能用，編輯單個文件的時候不能用，也不能預覽css。

(待續)

[研究] 用 Web Essentials 2017 在 Visual Studio 2017 IDE 縮小 .js (JavaScript 檔) 成為 .min.js
http://shaurong.blogspot.com/2018/02/web-essentials-2017-visual-studio-2017.html

Web Essentials 2015不再支援SCSS/LESS自動編譯
http://blog.darkthread.net/post-2015-07-21-web-compiler-for-vs2015.aspx