易于书写阅读的CSS开发工具——SASS

SASS简化了我们的css工作流，在样式设计时更轻松，并且更易于日常阅读维护

SASS的安装与使用

安装

首先需要安装ruby，然后才可以安装SASS

ruby是啥楼主不懂也不关心，只知道SASS是ruby开发的，写SASS不需要懂ruby，但是想安装SASS得先安装ruby

网上下载一个适合自己开发环境的Ruby版本，安装后运行命令行

gem -vruby -v

运行成功后返回版本号

本来可以直接安装SASS

gem install sass

因为被墙应该不会成功，于是只好迂回到淘宝RubyGems镜像安装SASS

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l

运行成功最后返回源指向路径，注意源指向路径必须为唯一

再次安装SASS

gem install sass

升级SASS

gem update sass

使用

运行命令行直接看编译后的css代码，这样并没什么实际作用

sass init.sass

把SASS文件编译转化为css文件

sass init.scss init.css

我们有SASS作为开发文件，所以一般在编译CSS文件时候直接选择压缩

sass --style comPRessed init.sass init.css

SASS提供了四种编译风格，自己私下可以逐一体验

nested：嵌套并且缩进，默认值expanded：嵌套但不缩进compact：简洁格式compressed：压缩

监听SASS文件，发生变动时自动编译转化为css文件

sass --watch init.scss:init.css --style compressed

编译过程中，如有语法错误则会编译失败，命令行与css文件都会提供具体错误信息

安装WebStorm编辑器

Sublime、Dreamweaver都弱爆了，下载安装个WebStorm编辑器才能和SASS好好玩耍

国际惯例，晒一下WebStorm编辑器

注意文件开头声明UTF8编码，不然注释里如有中文编译时会报错

@charset "utf-8"

Sublime编辑器安装SASS插件

Package Control组件安装

首先，【Ctrl+`】调出 Sonsole（QQ输入法快捷键会冲突，只能先去系统的输入法属性设置里取消热键切换至QQ拼音法了）

然后，粘贴如下代码，回车

sublime 2import urllib2,os; 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 3import urllib.request,os; 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())

最后，按提示重启，【Ctrl+Shift+P】调出命令面板输入 install，在下拉提示列表中选择 Install Package，输入 sass，在下拉提示列表中选择 SASS

SASS语法

基本用法

变量

$cl: #333bodycolor: $cl

计算

$sz: 14px$ln: $sz * 1.5

嵌套（选择器、属性、伪类三种嵌套方式）

.indexborder: 1px solid #ccctop: 3px solid #999radius: 5pxacolor: #666&:hover,&.active#333

注释

/* 首页 *///导航条

代码重用

继承

htmlheight: 100%.index@extend html

混合

@mixin txt ()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis@mixin rads ($v: 2px)-webkit-border-radius: $v-moz-border-radius: $vborder-radius: $v.indexwidth: 200px@include txt@include rads(50%)

文件引用

@import '../base/set'

高级语句

条件

$cl: #333.index@if lightness($cl) > 30%color: #666@elsecolor: #999

循环语句

@for $i from 1 to 10.module_#{$i}background: url(../image/module_#{i}.png) 50% no-repeat$i: 0@while $i < 10$i: $i + 1.module_#{$i}background: url(../image/module_#{i}.png) 50% no-repeat$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)@each $i in $arr.module_#{$i}background: url(../image/module_#{i}.png) 50% no-repeat

自定义函数

@function large ($v)@return $v * 1.5.indexfont-size: large(14px)

还有颜色函数等，暂时没用得上的切合场景，API不算很少；SASS/SCSS/LESS不能直接与CSS比较谁更好，SASS/SCSS/LESS只是丰富CSS书写方式的工具，最终页面引用文件还是需要编译转化后的CSS文件