SASS安装方法
在讲解安装SASS之前先进行一下SASS的介绍:
什么是SASS?
Sass是是一种基于ruby编写的CSS预处理器,诞生于2007年,是最早也是最成熟的一款CSS预处理器语言,它可以使用变量、嵌套、混入、继承,运算,函数等功能,使得CSS的开发,变得简单清晰可维护,同时也大大节省了设计者的时间,提高了效率。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
SASS的语法规则:
现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。我们这里讨论的如无特殊说明,全指scss。
SASS的优秀:
默认变量:sass版本3.0引入了默认变量!default,使变量更好控制。
@content:sass版本3.2.0对mixin进行了补充,以使其可以接受一整块样式,大多应用在css3的@media情况下。
占位选择器%:sass版本3.2.0引入了占位选择器%,对于不传递参数的mixin,以后都可以考虑使用它,因为有两个优点——不调用就不会产生css;解析的css是以组合方式申明的,而不是mixin的拷贝方式。
变量参数:sass版本3.2.0对变量参数进行了补充,使其可以设置css3的多个属性值的参数,如box-shadow,transition它们都可以拥有多个值,并以逗号隔开。而mixin的参数本来就是以逗号分开的,所以这样一来对css3定义些mixin就会报错,于是有了变量后面加三个点来表示这个参数是表示可以传递多个值的。
下面正式进行对SASS安装的内容:
1、Ruby安装:
因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先到官网下载个ruby.
注:在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境.
2、SASS安装
安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby.
然后直接在命令行中输入:
gem install sass
按回车键确认,等待一段时间就会提示你sass安装成功,如下图。
如果要安装beta版本的,可以在命令行中输入:
gem install sass –pre
你还可以从sass的Git repository来安装,git的命令行为:
git clone git://github.com/nex3/sass.git
cd sass
rake install
如果上述的办法你尝试失败了,那说明要么被你的网络被墙了(天朝特有),要么就是你的网络信号不好。你可以尝试本地安装,不过有点复杂,或者翻一下墙也OK。
至于还有一种说法就是koala这个编译工具已经内置了sass,所以如果你安装了koala,就根本不需要安装sass,注意ruby还是得安装,但是如果你用起一些比如Sublime Text之类的工具来对sass文件进行编辑的话还是得安装sass的,后期小觉也会就翻墙做一个说明。
原文链接:http://www.zhugexiaojue.com/note/setupsass-141.html
什么是SASS?
Sass是是一种基于ruby编写的CSS预处理器,诞生于2007年,是最早也是最成熟的一款CSS预处理器语言,它可以使用变量、嵌套、混入、继承,运算,函数等功能,使得CSS的开发,变得简单清晰可维护,同时也大大节省了设计者的时间,提高了效率。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
SASS的语法规则:
现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。我们这里讨论的如无特殊说明,全指scss。
SASS的优秀:
默认变量:sass版本3.0引入了默认变量!default,使变量更好控制。
@content:sass版本3.2.0对mixin进行了补充,以使其可以接受一整块样式,大多应用在css3的@media情况下。
占位选择器%:sass版本3.2.0引入了占位选择器%,对于不传递参数的mixin,以后都可以考虑使用它,因为有两个优点——不调用就不会产生css;解析的css是以组合方式申明的,而不是mixin的拷贝方式。
变量参数:sass版本3.2.0对变量参数进行了补充,使其可以设置css3的多个属性值的参数,如box-shadow,transition它们都可以拥有多个值,并以逗号隔开。而mixin的参数本来就是以逗号分开的,所以这样一来对css3定义些mixin就会报错,于是有了变量后面加三个点来表示这个参数是表示可以传递多个值的。
下面正式进行对SASS安装的内容:
1、Ruby安装:
因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先到官网下载个ruby.
注:在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境.
2、SASS安装
安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby.
然后直接在命令行中输入:
gem install sass
按回车键确认,等待一段时间就会提示你sass安装成功,如下图。
如果要安装beta版本的,可以在命令行中输入:
gem install sass –pre
你还可以从sass的Git repository来安装,git的命令行为:
git clone git://github.com/nex3/sass.git
cd sass
rake install
如果上述的办法你尝试失败了,那说明要么被你的网络被墙了(天朝特有),要么就是你的网络信号不好。你可以尝试本地安装,不过有点复杂,或者翻一下墙也OK。
至于还有一种说法就是koala这个编译工具已经内置了sass,所以如果你安装了koala,就根本不需要安装sass,注意ruby还是得安装,但是如果你用起一些比如Sublime Text之类的工具来对sass文件进行编辑的话还是得安装sass的,后期小觉也会就翻墙做一个说明。
原文链接:http://www.zhugexiaojue.com/note/setupsass-141.html