SCSS允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。父选择器中用&表示当前父选择器。同时支持属性嵌套,例如字体嵌套
SCSS定义变量的格式是$变量名:变量内容
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用。可以将局部变量转换成全局变量可以添加!global声明
SCSS的包括6中数据类型
字符串可以使用插值(${})
SCSS支持数字的加减乘除,取整等运算。关系运算也可以用于数字运算
SCSS扩展了@important的功能.@important寻找SCSS文件并将其导入,但是以下情况@import仅仅作为普通的scss文件,不会导入Scss文件
···
div class="error seriousError">
Oh no! You've been hacked!
</div>
.error {
border: 1px #f00
background-color: #fdd
}
.seriousError {
@extend .error
border-width: 3px
}
//实际是
.error,.seriousError {
border: 1px #f00
background-color: #fdd
}
.seriousError {
border-width: 3px
}
···
CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等;更加入了重叠文字、区块变化及任意位置放置等多页新属性。通过CSS可以使用更丰富、更灵活的样式,更简单设计出更美观的网页。CSS是用来扩展HTML的,而不是用来替代HTML的。也就是CSS离不开HTML,他只是一项辅助工具。
到这里可以了解完整的CSS技术内容与发展现状:http://www.w3.org/style/
CSS的特点:
除了可扩展HTML的样式设定外,CSS还提供了多项新特点,让网页的设计与维护更有效率:
1、减少图形文件的使用
很多网页为求设计效果,而大量使用图形,以致网页的下载速度变得很慢。CSS提供了很多的文字样式设定,且再加上IE%内建的滤镜特效,因此可轻松取代原来图形才能表现的视觉效果。这样的设计方式以仅让修改网页内容变得更方便,也大大提高下载速度。
2、集中管理样式信息
CSS的基本概念在于可将网页要展示的内容与样式设定分开,也就是将网页的外观设定信息从网页内容独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要更改
3、共享样式设定
网页的样式设定和内容分离的好处,除了可集中管理外,如果进一步将CSS样式信息存成独立的文件,还可让多个网页文件共同使用它这样,可省却在每一个网页文件中重复设定的麻烦。
4、将样式分类使用
相对于多份HTML文件可套用同一个CSS样式文件,也可以在一份HTML网页文件上套用多个CSS样式文件。
情形一:Package Control:There are no packages available for installation据StackOverflow上说是IPv6造成,如果我们的Intent服务提供者(ISP)不支持IPv6就会引发上述错误,原文如下:
This error is happened with IPv6 problem. If yourInternet Service Provider (ISP) does not support for IPv6 you got this error.
如果IPV6有问题,curl就会打印类似这样的错误:
curl: (7) Failed to connect to xxxxx...
找到了问题原因,下面着手解决它。
第一步:取得sublime.wbond.net的IPv4地址。在命令提示符中输入以下命令:
pingsublime.wbond.net
第二步:打开C:\Windows\system32\drivers\etc\hosts文件,增加如下对应关系:{IPv4 address}sublime.wbond.net
保存文件,然后再打开Package Control(快捷键Ctrl+Shift+P)开始安装即可。
情形二:Package Control:Unableto download
Emmet.Please view the console for more details./Error while loading PyV8
binary:exit code 3…
类似这种插件无法下载的问题,一般是由于网速慢,或者目标域名被墙而无法正常访问导致的。
这种情况下,首先检查本地网络是否可以访问,检测下载速度是不是特别慢,
如果网速太慢,换个时间再安装。还有一个办法是:到github或第三方网站手动下载安装包,然后解压到安装目录下的/Packages目录下。
比如我的Emmet则需要解压到D:\ProgramFiles\Sublime Text 2\Data\Packages\Emmet目录下。
另外许多插件都依赖于Python的,在插件安装开始时会去下载Python相关资源,
比如,Emmet安装就会先下载你系统位数一致的Python版本,我们在debug窗口可以看到这些信息:
其中有两条,表示下载失败,原因一般是网速慢请求超时或被墙了。
Emmet: Loading PyV8 binary from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip
Emmet.pyv8loader: Unable to download package fromhttps://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zipWrong URL error
同时,pyv8下载失败会弹出一个提示框:
这时候,我们按照给出的zip包下载地址手动下载PyV8的安装包(PyV8的项目地址为https://github.com/emmetio/pyv8-binaries#readme,可以根据系统种类选择对应安装包),下载成功后打开菜单Preferences – Browser Packages,然后解压到子目录PyV8内。比如我的对应目录是D:\Program Files\Sublime Text2\Data\Packages\PyV8\win64(若你的是32位系统,最终目录则为win32)。
大多数情况,PyV8安装好了以后,再安装需要的其他插件便可顺利进行了。
情形三:无法调出Package Control或未安装PackageControl
首次安装或重新安装的方式是一样的,首先打开控制台(Ctrl+~),不过Sublime Text的版本不同,执行的命令是不一样的。
对于Sublime Text2输入以下命令执行:
[python]view plaincopy
importurllib2,os,hashlibh ='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d'pf ='Package Control.sublime-package'ipp = sublime.installed_packages_path()os.makedirs( ipp )ifnotos.path.exists(ipp)elseNoneurllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) )by = urllib2.urlopen('http://packagecontrol.io/'+ pf.replace(' ','%20')).read()dh = hashlib.sha256(by).hexdigest()open( os.path.join( ipp, pf),'wb').write(by)ifdh == helseNoneprint('Error validating download (got %s instead of %s), please try manual install'% (dh, h)ifdh != helse'Please restart Sublime Text to finish installation')
对于Sublime Text 3需要输入如下的命令:
[python]view plaincopy
importurllib.request,os,hashlibh ='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d'pf ='Package Control.sublime-package'ipp = sublime.installed_packages_path()urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) )by = urllib.request.urlopen('http://packagecontrol.io/'+ pf.replace(' ','%20')).read()dh = hashlib.sha256(by).hexdigest()print('Error validating download (got %s instead of %s), please try manual install'% (dh, h))ifdh != helseopen(os.path.join( ipp, pf),'wb').write(by)
执行完后,Package Control安装成功。此时便可以调出PackageControl命令输入面板(Ctrl+Shift+P),输入install
除了使用上述命令安装法,还可手动安装,需要的可访问官网查看https://packagecontrol.io/installation#st3
三、 安装官方原版
上面的问题解决了,但是想想这么强大的工具,这么多的问题,持怀疑态度。折腾了这么久再卸载了有点太可惜了。不过为了弄清楚问题根本,狠狠心,果断卸载了我一直使用的Sublime Text 2 某破解优化版,其中已集成了JsFormat,Alignment,Emmet等这些常用的插件。卸载后去官网下载了官方版本http://www.sublimetext.com/2
并安装完成。
这次安装,先不要着急打开Sublime
Text。为了以后安装方便,决定不再使用系统默认的Packages安装路径C:\Users\Administrator\AppData
\Roaming\Data,在Sublime Text2的安装目录下新建文件夹/Data,该文件夹创建完成后再打开Sublime
Text程序,我们发现,Packages被安装在了当前创建的文件夹下(我的路径是D:\Program Files\Sublime Text
2\Data)。稍后把其他必备插件装全了,我们备份一下Sublime
Text 2文件夹,这样以后走到哪都可以无须一步步重新安装,快速部署我们的Sublime Text环境。
这次安装了七八个插件,也没有出现一次上述错误,说明官方版本还是比较靠谱比较稳定的。虽然每个月都会弹出付费注册提
示,不过不影响使用就这样用吧。有洁癖的我建议你安装Sublime Text
3,本人测试发现最新版这个破解版相对来说比国内流行的某v2版要稳定的多,不过支持ST3的插件目前相对少一些。
英文官方原版首次使用时,会有两个依赖包升级提示:
或
点“确定关闭”即可,无须理会。
四、Sublime必备插件
补充几个必备的开发插件,不了解作用的自行查找吧。
必备的:Alignment,JsFormat,CSSComb,CTags,DocBlockr,Emmet,FileDiffs,SASS,LESS,SASS Build,Lessc,Git,SublimeLinter
另外还有几个不错的,可以选择使用:Terminal,Trimmer,ColorPicker,ConverToUTF8等。
五、补充知识
最后普及几个需要了解的知识:
1.所装的插件列表(有些不在里面)
D:\Program Files\Sublime Text2\Data\Packages\User\Package Control.sublime-settings
2. Package Control常用的命令InstallPackage (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)
3.插件热键冲突,可以自定义修改:Preferences >Package Settings >Alignment(或其他插件名)>Key Bindding - User然后写入快捷键。(有些插件需要到安装目录下的配置文件修改)
4.有Package Control其他相关问题上,上github项目查找。
https://github.com/wbond/package_control/issues?q=is%3Aclosed
比如较常见的问题Package control fails to download new packages:
https://github.com/wbond/package_control/issues/736
5.列一下常用的快捷键:
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)
Ctrl+G 跳转到相应的行
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+P 查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行;
Ctrl+R 快速列出/跳转到某个函数
Ctrl+K Backspace 从光标处删除至行首
Ctrl+KB 开启/关闭侧边栏
Ctrl+KK 从光标处删除至行尾
Ctrl+KT 折叠属性
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+K0 展开所有
Ctrl+Enter 插入行后(快速换行)
Ctrl+Tab 当前窗口中的标签页切换
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+Shift+P 打开命令面板
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码,与上行互换
Ctrl+Shift+↓可以移动此行代码,与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+Shift+Enter 光标前插入行
Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+F2 设置书签
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+鼠标左键 可以同时选择要编辑的多处文本
Shift+鼠标右键(或使用鼠标中键)可以用鼠标进行竖向多行选择
Shift+F2 上一个书签
Shift+Tab 去除缩进
Alt+Shift+1~9(非小键盘)屏幕显示相等数字的小窗口
Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑
Tab 缩进 自动完成
F2 下一个书签
F9 行排序(按a-z)
F11 全屏模式