一、Sass安装(windows版)
1.在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。
在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况)
2.安装Sass
通过命令安装 gem install sass
查看Sass版本 sass -v
更新Sass版本 gem update sass
卸载(删除)Sass gem uninstall sass
二、Sass的语法格式及编译调试..
语法
sass 有两种, 以下都是以 scss为主 文件后辍为 *.scss 此语法格式与css语法更相似!更易学习
Sass编译
Sass 的编译有多种方法:
1、命令编译
----单文件编译:
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
------多文件编译
sass sass/:css/
上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。
缺点及解决方法:
在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
当然,使用 sass 命令编译时,可以带很多的参数:
2、GUI工具编译
对于 GUI 界面编译工具,目前较为流行的主要有:
Koala (http://koala-app.com/)
Compass.app(http://compass.kkbox.com/)
Scout(http://mhs.github.io/scout-app/)
CodeKit(https://incident57.com/codekit/index.html)
Prepros(https://prepros.io/)
相比之下,我比较推荐使用以下两个:
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3、自动化编译
喜欢自动化研究的同学,应该都知道Grunt和Gulp这两个东东 ,自行学习 此处就不再介绍
[Sass]常见的编译错误
在编译 Sass 代码时常常会碰到一些错误,让编译失败。这样的错误有系统造成的也有人为造成的,但大部分都是人为过失引起编译失败。
而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。
[Sass]不同样式风格的输出方法
众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:
嵌套输出方式 nested
在编译的时候带上参数“--style nested”:
sass --watch test.scss:test.css--style nested
展开输出方式 expanded
在编译的时候带上参数“--style expanded”:
sass --watch test.scss:test.css--style expanded
紧凑输出方式 compact
在编译的时候带上参数“--stylecompact”:
sass --watch test.scss:test.css--stylecompact
压缩输出方式 compressed
在编译的时候带上参数“--stylecompressed”:
sass --watch test.scss:test.css--stylecompressed
三 、Sass的基本特性-基础
变量: 以$ 符号开始
普通变量 $color;
默认变量 sass 的默认变量仅需要在值后面加上 !default 即可。
sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 2;
$baseLineHeight: 1.5!default;
body{
line-height: $baseLineHeight;
}
编译后的css代码:
body{
line-height:2;
}
可以看出现在编译后的 line-height 为 2,而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。
理解全局变量和局部变量
http://www.sassmeister.com/ 在线学习sass的网站
嵌套
选择器嵌套
属性嵌套
伪类嵌套
混合宏
在 Sass 中,使用“@mixin”来声明一个混合宏。
使用一个关键词“@include”来调用声明好的混合宏
注意:带参数的混合宏 如果有更多参数 可以使用“...” 来代替
[Sass]扩展/继承
通过关键词 “@extend”来继承已存在的类样式块
[Sass]占位符 %placeholder
Sass 中的占位符%placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
[Sass]混合宏 VS 继承 VS 占位符
[Sass]插值#{} /*并不是很理解插件,待详细学习后更新*/
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分
[Sass]注释
注释对于一名程序员来说,是极其重要,良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式,我暂且将其命名为:
1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ”
2、类似 JavaScript 的注释方式,使用“//”
两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示,
[Sass]数据类型
Sass 和 JavaScript 语言类似,也具有自己的数据类型,在 Sass 中包含以下几种数据类型:
数字: 如,1、2、13、10px;
字符串:有引号字符串或无引号字符串,如,"foo"、'bar'、baz;
颜色:如,blue、#04a3f9、rgba(255,0,0,0.5);
布尔型:如,true、false;
空值:如,null;
值列表:用空格或者逗号分开,如,1.5em 1em 0 2em、Helvetica, Arial, sans-serif。
四、Sass的基本特性-运算