自定义sublime text 2 build system - CzmMiao的博客生活 - ITeye博客
博客分类：
Introduction
Sublime Text
can be considered simplistic, but highly customizable. The basic idea is that each type of Build profile is powered by a “.sublime-build” file – a JSON representations of the commands, paths and configuration needed to build a project using a specific tool or set of tools.
Builds can be executed using a keyboard shortcut (Command+B on Mac is the default on Mac or F7 on Windows), via the Tools menu or when a file is saved. If a project is currently open, the build system we last selected (e.g grunt) will be remembered.
When Sublime is passed references to external tools/binaries via a “.sublime-build” files, it can execute these applications with any arguments or flags that may be necessary. It is also able to pipe back the output of calling any of these apps using the built-in console in Sublime. Effectively this allows us to easily build projects without the need to leave our editor.
Adding a custom Build System
Sublime populates its Tools/Build System menu based on the “.sublime-build” files stored in the Sublime “Packages” directory. Should one need to locate this, it can be found in “~/Library/Application Support/Sublime Text 2/Packages/User” (if using OS X) or the corresponding Packages/User directory on other platforms.
A basic “.sublime-build” file could be represented in key/value form as follows:
"cmd": ["command", "argument", "--flag"],
"selector": ["source.js"],
"path": "/usr/local/bin",
"working_dir": "/projects/"
Array containing the command to run and its desired arguments. If you don’t specify an absolute path, the external program will be searched in your PATH, one of your system’s environmental variables.
On Windows, GUIs are supressed.
file_regex
Optional. Regular expression (Perl-style) to capture error output of cmd. See the next section for details.
line_regex
Optional. If file_regex doesn’t match on the current line, but line_regex exists, and it does match on the current line, then walk backwards through the buffer until a line matching file regex is found, and use these two matches to determine the file and line to go to.
Optional. Used when Tools | Build System | Automatic is set to true. Sublime Text uses this scope selector to find the appropriate build system for the active view.
working_dir
Optional. Directory to change the current directory to before running cmd. The original current directory is restored afterwards.
Optional. Output encoding of cmd. Must be a valid Python encoding. Defaults to UTF-8.
Optional. Sublime Text command to run. Defaults to exec (Packages/Default/exec.py). This command receives the configuration data specified in the .build-system file.
Used to override the default build system command. Note that if you choose to override the default command for build systems, you can add arbitrary variables in the .sublime-build file.
Optional. Dictionary of environment variables to be merged with the current process’ before passing them to cmd.
Use this element, for example, to add or modify environment variables without modifying your system’s settings.
Optional. If true, cmd will be run through the shell (cmd.exe, bash...).
Optional. This string will replace the current process’ PATH before calling cmd. The old PATH value will be restored after that.
Use this option to add directories to PATH without having to modify your system’s settings.
Optional. A list of dictionaries of options to override the main build system’s options. Variant name``s will appear in the Command Palette for easy access if the build system’s selector matches for the active file.
Only valid inside a variant (see variants). Identifies variant build systems. If name is Run, the variant will show up under the Tools | Build System menu and be bound to Ctrl + Shift + B.
Capturing Error Output with file_regex
The file_regex option uses a Perl-style regular expression to capture up to four fields of error information from the build program’s output, namely: filename, line number, column number and error message. Use groups in the pattern to capture this information. The filename field and the line number field are required.
When error information is captured, you can navigate to error instances in your project’s files with F4 and Shift+F4. If available, the captured error message will be displayed in the status bar.
Platform-specific Options
The windows, osx and linux elements let you provide platform-specific data in the build system. Here’s an example:
"cmd": ["ant"],
"file_regex": "^ *\\[javac\\] (.+):([0-9]+):() (.*)$",
"working_dir": "${project_path:${folder}}",
"selector": "source.java",
"windows":
"cmd": ["ant.bat"]
In this case, ant will be executed for every platform except Windows, where ant.bat will be used instead.
Here’s a contrived example of a build system with variants:
"selector": "source.python",
"cmd": ["date"],
"variants": [
{ "cmd": ["ls -l *.py"],
"name": "List Python Files",
"shell": true
{ "cmd": ["wc", "$file"],
"name": "Word Count (current file)"
{ "cmd": ["python", "-u", "$file"],
"name": "Run"
Given these settings, Ctrl + B would run the date command, Crtl + Shift + B would run the Python interpreter and the remaining variants would appear in the Command Palette whenever the build system was active.
For a comprehensive list of keys supported in Sublime build scripts, see the .
Build System Variables
Build systems expand the following variables in .sublime-build files:
$file_path
The directory of the current file, e.g., C:\Files.
The full path to the current file, e.g., C:\Files\Chapter1.txt.
$file_name
The name portion of the current file, e.g., Chapter1.txt.
$file_extension
The extension portion of the current file, e.g., txt.
$file_base_name
The name-only portion of the current file, e.g., Document.
The full path to the Packages folder.
The full path to the current project file.
$project_path
The directory of the current project file.
$project_name
The name portion of the current project file.
$project_extension
The extension portion of the current project file.
$project_base_name
The name-only portion of the current project file.
A complete list of
supported is also available.
Grouping build tasks
Some developers also like to group together tasks within an external bash script (or equivalent). For example, here’s a simple
deploy script you can use with Sublime to commit and push your latest changes with git and then upload your latest files to FTP.
Example: Commit, Push And Upload To FTP
deployment.sh:
#!/bin/bash
git add . && git commit -m 'deployment' && git push && git ftp init -u username
-p password - ftp:
deployment.sublime-build:
"cmd": ["deployment"],
"working_dir": "${project_path:${folder}}"
If you haven’t used git-ftp before, Alex Fluger has a solid
about using it that may be of interest.
Targeting Platforms:
Sublime build files also support specifying configuration data for specific platforms (namely, OS X, Windows and Linux). Targeting a platform can easily be done by specifying another element in our config with the name of the platform. e.g
"cmd": ...
"windows":
"cmd": ...
"cmd": ...
Build files for popular front-end tools
To help you get started, I’ve written a
of “.sublime-build” files for some of the front-end tools I’m aware web developers are using these days below.
Most of these will function fine without the need to specify path, but if you run into an issue with paths, try including it to your config (e.g "path": "/usr/local/bin").
"cmd": ["grunt", "--no-color"],
"selector": ["source.js", "source.less", "source.json"]
Node Build Script:
"cmd": ["h5bp", "--no-color"],
"selector": ["source.js", "source.less", "source.json"]
CoffeeScript:
"cmd": ["coffee","-c", "$file"],
"selector" : "source.coffee"
"cmd": ["sass", "--watch", ".:."],
"working_dir": "$file_path",
"selector": ["source.scss", "source.sass"]
Whilst a more verbose version with automatic minification and watch config could be written:
"cmd": ["sass", "--watch", "sass:stylesheets", "--style", "compressed"],
"working_dir": "$project_path",
"selector": ["source.scss", "source.sass"]
"cmd": ["lessc", "-x", "$file", "$file_path/$file_base_name.css", "--verbose"],
"shell" : true,
"selector": "source.css.less"
"cmd": ["stylus", "$file"],
"file_regex": ".",
"selector": "source.stylus"
(a more comprehensive version of this can be found in the project.)
"cmd": ["cmd", "/c", "jade", "$file"],
"selector": "source.jade"
r.js (RequireJS Optimizer):
"cmd": ["node", "r.js", "-o", "app.build.js"],
"working_dir": "$project_path",
"selector": "source.js"
"cmd": [ "node", "uglifyjs", "-o", "${file_path}/${file_base_name}.min.js", "$file"],
"selector": "source.js"
Node (just passing in directly):
"cmd": ["node", "$file"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"selector": "source.js"
Pandoc (Markdown to HTML):
"cmd": ["pandoc", "-S", "-s", "-f", "markdown", "-t", "html", "-o", "$file_base_name.html", "$file"],
"selector": "text.html.markdown"
(and when it’s released, Yeoman):
"cmd": ["yeoman", "build", "--no-color"],
"selector": ["source.js", "source.scss", "source.sass", "source.html"]
I imagine most web developers would want to run JSHint from within a broader build process, but if you’d also like to run it standalone via a Sublime build file, the
package has a
that will work fine on both OS X and Windows.
Build files for specific programming languages
I also thought that while we were looking at build files, it would be useful to demonstrate how these can be used to build/compile with some popular programming languages. These may differ to those included with Sublime by default, but are useful for reference:
Ruby (using RVM):
"cmd": ["~/.rvm/bin/rvm-auto-ruby", "$file"],
"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
"selector": "source.ruby"
"cmd": ["python", "-u", "$file"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"selector": "source.python"
"cmd": ["/usr/bin/php", "-l", "$file"], &- Couldn't just use "php" ?
"file_regex": "^Parse error: .* in (.*?) on line ([0-9]*)",
"selector": "source.php"
"cmd": ["javac", "$file_name", "&&", "java", "$file_base_name"],
"working_dir": "${project_path:${folder}}",
"selector": "source.java",
"shell": true
.Net (Windows):
"cmd": ["%WINDIR%\\Microsoft.NET\\Framework\\v4.0.30319\\msbuild", "${project_base_name}.sln"],
"shell": true,
"working_dir": "${project_path:${folder}}"
"cmd": ["make && ./a.out"],
"path": "/usr/bin:/usr/local/bin:...",
"shell": true
C++ (via g++):
(Note that we’re also able to specify OS-specific configurations too, as in the below):
"cmd": ["g++", "$file", "-o", "$file_base_name", "-I/usr/local/include"],
"selector": "source.c++",
"windows": {
"cmd": ["cl", "/Fo${file_path}", "/O2", "$file"]
"cmd": ["runhaskell", "$file"],
"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
"selector": "source.haskell"
Conclusions
Sublime build systems are awesome and can help you avoid the need to manually switch between your editor and external build tools regularly. As you’ve hopefully now learned, putting together your own custom build systems is a straight-forward process and I’d recommend trying it out if Sublime happens to be your editor of choice.
Mutiple command
It seems that the Sublime Build System only allows for one cmd. The most common solution I've found is to make a bash script with multiple commands and run the bash script from the Sublime build system.
#!/bin/bash
# compiles all java files within directory and runs first argument
for file in *.java
echo "Compiling $file"
javac $file
echo "Running $1"
: ["build_java.sh", "$file_base_name"]
参考至：/blog/custom-sublime-text-build-systems-for-popular-tools-and-languages/
/results?search_query=Sublime%20text%202%20project&oq=Sublime%20text%202%20project&gs_l=youtube.3....0.0.0.0.520.j4-3j3.9.0...0.0...1ac.1.11.youtube.pSdgI6sgT0k
/DevinClark/1633819
/en/latest/reference/build_systems.html#platform-specific-options
如有错误，欢迎指正
浏览 15726
浏览: 2578808 次
来自: 厦门
谢谢非常有用那
写的很详细
学习了，学习了
大写的赞..
作为初学者，我表示写得非常好，正在疑惑这些参数的意义呢！搞了好久，终于把sass搞定了。
最开始，我是想使用koala来实现对sass的实时编译的，但是每当我保存的时候，总是弹出erro错误，即无法编译生成css文件，百度了半天，问了好久，这个问题还是没能解决了，还希望能有个哥哥姐姐不吝指导我一下。。
下面我给大家介绍一下，如何使用sublime插件实现对scss文件的编译的吧。
首先，你想要使用sass的话，就必须依赖于ruby环境。所以，你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器，因为他真得加载不出来。
下载好之后，就需要一步步进行安装了（建议大家把其安装在c盘），这里需要注意的是：
这个勾别忘了选，因为不选中，就会出现编译时找不到Ruby环境的情况。
这时，我们在控制台输入ruby -v就可以得到我们的安装好的ruby的版本号等信息
Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示：
当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。给大家提供一种最实用的方法。
到&(http://rubygems.org/) 网站上将&（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入：
gem install &把下载的安装包拖到这里&
直接回车即可安装成功。
接下来，就是在sublime中安装sass插件和sass build插件了，打开我们的sublime
首先你要看的是在preference选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件（一个方便&Sublime text 管理插件的插件），这时，你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装
sublime text3
import urllib.request, pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
sublime text2
import urllib2, pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else N urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
完成了这步之后,再重新打开我们的sublime,ctrl+shift+p，并输入install
选择第一个Install Pacage,
在命令栏中输入"Sass"然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
在命令栏中输入"SassBuild"然后回车，然后在弹出的列表中选择SassBuild插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
按ctrl+shift+p，输入package，选择list packages，就看到了我们安装的插件列表
如果你看到了sass和sass bulid就说明插件安装成功了。
这是你把scss文件写完之后，按ctrl+b就可以实现sass文件的编译了，他会生成一个自动编译生成css文件。这里,再跟大家介绍一下windows7下解决中文乱码的问题吧。需要做的就是：
找到ruby的安装目录，里面也有sass模块，如这个路径：&C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass&在这个文件里面engine.rb，添加一行代码Encoding.default_external = Encoding.find(&utf-8&) 放在所有的require XXXX 之后即可.
阅读(...) 评论()★Web前端（43）
----------前端开发工具（5）
下面我给大家介绍一下，如何使用sublime插件实现对scss文件的编译的吧。
首先，你想要使用sass的话，就必须依赖于ruby环境。所以，你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器，因为他真得加载不出来。注意：这里对应的是windows系统。
下载好之后，就需要一步步进行安装了（建议大家把其安装在c盘），这里需要注意的是：
这个勾别忘了选，因为不选中，就会出现编译时找不到Ruby环境的情况。
这时，我们在控制台输入ruby -v就可以得到我们的安装好的ruby的版本号等信息
Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示：
当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。给大家提供一种最实用的方法。
到&(http://rubygems.org/) 网站上将&（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入：
gem install &把下载的安装包拖到这里&
直接回车即可安装成功。
接下来，就是在sublime中安装sass插件和sass build插件了，打开我们的sublime
首先你要看的是在preference选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件（一个方便&Sublime text 管理插件的插件），这时，你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装
sublime text3
import&urllib.request,
pf&=&'Package
Control.sublime-package';
ipp&=&sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );&open(os.path.join(ipp,
pf),&'wb').write(urllib.request.urlopen(&'http://sublime.wbond.net/'&+&pf.replace('
','%20')).read())
sublime text2
import&urllib2,
pf='Package
Control.sublime-package';
ipp&=&sublime.installed_packages_path();
os.makedirs( ipp )&if&not&os.path.exists(ipp)&else&None;
urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( )));&open(
os.path.join( ipp, pf),&'wb'&).write(
urllib2.urlopen(&'http://sublime.wbond.net/'&+pf.replace(&'
','%20'&)).read());&print(&'Please
restart Sublime Text to finish installation')
完成了这步之后,再重新打开我们的sublime,ctrl+shift+p，并输入install
选择第一个Install Pacage,
在命令栏中输入&Sass&然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
在命令栏中输入&SassBuild&然后回车，然后在弹出的列表中选择SassBuild插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
按ctrl+shift+p，输入package，选择list packages，就看到了我们安装的插件列表
如果你看到了sass和sass bulid就说明插件安装成功了。
这是你把scss文件写完之后，按ctrl+b就可以实现sass文件的编译了，他会生成一个自动编译生成css文件。这里,再跟大家介绍一下windows7下解决中文乱码的问题吧。需要做的就是：
找到ruby的安装目录，里面也有sass模块，如这个路径：&
C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass&
在这个文件里面engine.rb，添加一行代码Encoding.default_external = Encoding.find(‘utf-8’) 放在所有的require XXXX 之后即可.
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40521次
排名：千里之外
原创：42篇
转载：29篇
(1)(3)(6)(15)(2)(1)(4)(3)(11)(2)(3)(20)SASS用法指南 - 阮一峰的网络日志
SASS用法指南
学过的人都知道，它不是一种编程语言。
你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
各种"CSS预处理器"之中，我自己最喜欢，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。
============================================
SASS用法指南
作者：阮一峰
一、什么是SASS
是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看了。
二、安装和使用
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
　　gem install sass
然后，就可以使用了。
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
　　sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
　　sass test.scss test.css
SASS提供四个的选项：
　　* nested：嵌套缩进的css代码，它是默认值。
　　* expanded：没有缩进的、扩展的css代码。
　　* compact：简洁格式的css代码。
　　* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
　　sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
　　// watch a file
　　sass --watch input.scss:output.css
　　// watch a directory
　　sass --watch app/sass:public/stylesheets
SASS的官方网站，提供了一个。你可以在那里，试运行下面的各种例子。
三、基本用法
SASS允许使用变量，所有变量以$开头。
　　$blue : #1875e7;　
　　　color : $
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
　　$side :
　　.rounded {
　　　　border-#{$side}-radius: 5
3.2 计算功能
SASS允许在代码中使用算式：
　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100
　　　　right: $var
SASS允许选择器嵌套。比如，下面的CSS代码：
　　div h1 {
　　　　color :
可以写成：
　　　　hi {
　　　　　　color:
属性也可以嵌套，比如border-color属性，可以写成：
　　　　border: {
　　　　　　color:
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
　　　　&:hover { color: #ffb3 }
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
　　　　重要注释！
四、代码的重用
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
　　.class1 {
　　　　border: 1px solid #
class2要继承class1，就要使用@extend命令：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
　　@mixin left {
　　　　float:
　　　　margin-left: 10
使用@include命令，调用这个mixin。
mixin的强大之处，在于可以指定参数和缺省值。
　　@mixin left($value: 10px) {
　　　　float:
　　　　margin-right: $
使用的时候，根据需要加入参数：
　　　　@include left(20px);
下面是一个mixin的实例，用来生成浏览器前缀。
　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $
　　　　-moz-border-radius-#{$vert}#{$horz}: $
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $
使用的时候，可以像下面这样调用：
　　#navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
　　lighten(#cc3, 10%)
// #d6d65c
　　darken(#cc3, 10%)
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
　　@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
　　@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断：
　　　　@if 1 + 1 == 2 { border: 1 }
　　　　@if 5 < 3 { border: 2 }
配套的还有@else命令：
　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #
5.2 循环语句
SASS支持for循环：
　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}
也支持while循环：
　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
each命令，作用与for类似：
　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
5.3 自定义函数
SASS允许用户编写自己的函数。
　　@function double($n) {
　　　　@return $n * 2;
　　#sidebar {
　　　　width: double(5px);
开发者最需要的，就是一个顺手的开发环境。
Github 的一大特色就是 Pull Request 功能（简写为 PR）。
组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。
树莓派（Raspberry Pi）是学习计算机知识、架设服务器的好工具，价格低廉，可玩性高。}