其实浏览器只认CSS，所以Sass文件需要编译成CSS才能够起作用。
如何将Sass文件需要编译成CSS，这里推荐简单的工具，koala官方网站http://koala-app.com/index-zh.html，更具系统版本选择相应的版本进行下载。
Paste_Image.png
下载后傻瓜式安装
安装后可能是英文界面。
Paste_Image.png
点击设置，将英文改成中文，关闭软件重新打开即可。
如何使用Sass
在项目目录下创建Sass文件，比如我在项目目录css目录下创建index.scss文件，需要注意这里文件后缀是scss，创建完之后我们需要将整个css目录直接拖拽到koala软件中去。
Paste_Image.png
这么一来，koala软件就能将scss实时编译成css文件了。
开始使用Sass
直接CSS写法
// index.scss
ul li a{
display: block;
}
编译成css的效果
//index.css
ul li a {
display: block; }
在Sass语法中是完全支持css写法的，即使在Sass全部写成css也是没有问题的。
Sass嵌套写法
// index.scss
ul{
li{
a{
display: block;
}
}
}
在ul的方括号中写上他的后代li表示li是ul的后代，在li的花括号中写上a标签，表示这个a标签是li的后代，他要是ul的后代，将它变成快元素。
编译成css的效果
//index.css
ul li a {
display: block; }
效果和css写法一模一样
给a标签添加
hover伪类
// index.scss
ul{
li{
a{
display: block;
}
a:hover{
color: #000;
}
}
}
自动编译后
ul li a {
display: block; }
ul li a:hover {
color: #000; }
给a标签添加
hover伪类更好的办法
// index.scss
ul{
li{
a{
display: block;
&:hover{
color: #000;
}
}
}
}
在a的花括号里面通过&符号来代替a标签，在他的里面写入hover伪类使它的归属感更加明确。
自动编译后
//index.css
ul li a {
display: block; }
ul li a:hover {
color: #000; }
&符在谁的花括号下就代表着谁
// index.scss
ul{
li{
& .div{
color: #000;
}
a{
display: block;
&:hover{
color: #000;
}
}
}
}
自动编译后
//index.css
ul li .div {
color: #000; }
ul li a {
display: block; }
ul li a:hover {
color: #000; }
将颜色色值定义成变量，在需要用到的地方写入变量即可
// index.scss
$color1: #ccc;
ul{
li{
& .div{
color: $color1;
}
a{
display: block;
&:hover{
color: $color1;
}
}
}
}
.crtop{
color:$color1;
}
自动编译后
//index.css
ul li .div {
color: #ccc; }
ul li a {
display: block; }
ul li a:hover {
color: #ccc; }
.crtop {
color: #ccc; }
这样只要改变变量色值就能统一的改变颜色
Sass中文的问题
// index.scss
body{
font-family: "微软雅黑";
}
通过Sass给body添加字体微软雅黑，当保存的时候会报错
Paste_Image.png
Sass本身是不支持中文的。
解决方法，找到安装目录
Koala>rubygems>gems>sass-3.4.9>lib>sass>engine.rb
依次找到文件打开
Paste_Image.png
在上图的位置输入这行代码即可
Encoding.default_external = Encoding.find('utf-8')
完成后来看看效果
// index.scss
body{
font-family: "微软雅黑";
}
css输出
// index.css
@charset "UTF-8";
body {
font-family: "微软雅黑"; }
以上就是Sass的基础知识。
Sass定义变量使用
$toolbar-size:52px;
.toolbar{
position: fixed;
left: 50%;
bottom: 5px;
margin-left: -$toolbar-size/2;
}
.toolbar-layer{
position: absolute;
right: $toolbar-size - 6;
bottom: 0;
width: 172px;
background-image: url(../img/toolbar.png);
background-repeat: no-repeat;
opacity: 0;
filter:alpha(opacity=0);
transform-origin: 95% bottom;
transform: scale(0.01);
transition: all 1s;
}
定义 $toolbar-size等于52px运算以下结果
.toolbar {
position: fixed;
left: 50%;
bottom: 5px;
margin-left: -26px;
}
.toolbar-layer {
position: absolute;
right: 46px;
bottom: 0;
width: 172px;
background-image: url(../img/toolbar.png);
background-repeat: no-repeat;
opacity: 0;
filter: alpha(opacity=0);
transform-origin: 95% bottom;
transform: scale(0.01);
transition: all 1s;
}
Sass函数穿参定义
$toolbar-size:52px;
@mixin toolbar-item($pos,$hoverPos){
background-position: 0 $pos;
&:hover{
background-position: 0 $hoverPos;
}
}
@mixin opacity($opacity){
opacity: $opacity;
filter: alpha(opacity = $opacity * 100);
}
.toolbar-iten{
position: relative;
display: block;
width: $toolbar-size;
height: $toolbar-size;
margin-top: 1px;
transition: background-position 1s;
&:hover{
.toolbar-layer{
@include opacity(1);
transform: scale(1);
}
}
}
.toolbar-iten-weixin{
@include toolbar-item(-798px,-860px);
.toolbar-layer{
height: 212px;
background-position: 0 0;
}
}
.toolbar-iten-feedback{
@include toolbar-item(-426px,-488px);
}
调用生成实例
.toolbar-iten {
position: relative;
display: block;
width: 52px;
height: 52px;
margin-top: 1px;
-webkit-transition: background-position 1s;
transition: background-position 1s;
}
.toolbar-iten:hover .toolbar-layer {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.toolbar-iten-weixin {
background-position: 0 -798px;
}
.toolbar-iten-weixin:hover {
background-position: 0 -860px;
}
将sass文件进行封装哪里需要使用调用即可
封装定义sass模块
将cass函数变量封装到一个文件后缀为.scss比如我定义一个cq.scss文件
// cq.scss
$toolbar-size:52px;
@mixin opacity($opacity){
opacity: $opacity;
filter: alpha(opacity = $opacity * 100);
}
$toolbar-size定义变量方便调用
@mixin opacity($opacity){
opacity: $opacity;
filter: alpha(opacity = $opacity * 100);
}
@mixin声明函数，opacity函数名，($opacity)括号里卖的是传参的参数，{}花括号里面是方法，比如上面的代码中将参数变成了透明度，针对ie浏览器做了配置，让参数乘以100。
调用sass模块
// index1.scss
body{
font-family: "微软雅黑";
}
@import "cq";
.div{
@include opacity(1);
}
.div1{
height: $toolbar-size;
}
使用@import "cq";@import在sass中是引入模块的意思，将cq文件引入当前ccss文件，引入这里可以不谢后缀。
引入文件后，通过@include关键字调用函数后面写上函数名和参数，就能运行函数体。
$toolbar-size;变量可直接使用
再来看看最终效果，生成的css文件
@charset "UTF-8";
body {
font-family: "微软雅黑";
}
.div {
opacity: 1;
filter: alpha(opacity=100);
}
.div1 {
height: 52px;
}
/*# sourceMappingURL=index1.css.map */
如果说上面的代码是表示某个功能的，同样可以将它提取出来保存到一个单独的文件当中，方便调用。也就是说在其他地方需要使用的话可以很方便的拿去使用。
.div{
@include opacity(1);
}
.div1{
height: $toolbar-size;
}
比如说这块sass是一块功能，我把它放到_tool.scss文件下
cq.scss
// cq.scss
$toolbar-size:52px;
@mixin opacity($opacity){
opacity: $opacity;
filter: alpha(opacity = $opacity * 100);
}
_tool.scss
//_tool.scss
.div{
@include opacity(1);
}
.div1{
height: $toolbar-size;
}
index1.scss
// index1.scss
body{
font-family: "微软雅黑";
}
@import "cq";
@import "tool";
index1.css输出
@charset "UTF-8";
body {
font-family: "微软雅黑";
}
.div {
opacity: 1;
filter: alpha(opacity=100);
}
.div1 {
height: 52px;
}
/*# sourceMappingURL=index1.css.map */
这样通过sass来编写css工作效率会提高，同事代码更加整洁，非常适合复用。
最后附上Koala安装包下载，和Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件下载
-
下载后傻瓜化安装
Koala -
打开sublime安装目录下的 Packages目录 将
danro-LESS-sublime-ebd4a2f和MarioRicalde-SCSS.tmbundle-58d60a4文件放入打开的目录，重启sublime，搞定。
网友评论