简单的使用koala-scss

一、资源

1.koala(中文，免费)
2.koalad的中文wiki
3.SASS界面编译工具——Koala的使用© [w3cplus.com]
4.SASS基础教程——SASS基本语法与特性© [w3cplus.com]

二、使用koala

1.安装

现在koala官网下载相应的版本（ps：我是windows版本）
下载之后，点击下一步下一步，完成安装，软件是卡拉形象的。

image.png

2.设置

软件刚刚打开，默认是英文版本的，需要自己设置成中文。当你设置好之后，需要关闭重新打开，软件才会变成中文的。

image.png

3.添加项目

第一种，根据软件提示，直接把相应项目拖进来

image.png

image.png

第二种，点击“添加项目”按钮，选择相应的文件。

image.png

4.删除项目

抱歉，手残，截图截不出来，只能文字描述。
在koala左边项目区，选中你要删除的项目，右键，出现选项，点击删除，就能删除你要删除的项目。

5.编译scss

image.png

编译结果.png

koala刷新之后.png

三、简单运用scss

因为其他的不太会，最近就使用了scss，感觉他的使用方法和css基本差不多，但是和css比起来，维护方便，不需要重复写css（例如高度，宽度，颜色值等），更好的是还能有变量。

SCSS语法规则和CSS的语法规则差不多，由选择器、属性和属性三部分组成，并且和大括号`{}`与分号`;`配合在一起使用。
选择器{
  属性:属性值;
}

1.scss的变量【$】

变量申明用$，变量可以在整个文件中重复使用

/*scss中申明变量*/
$color:red;
/*scss中引用变量*/
.head{
  color:$color;
}
/*css*/
.head{color:red;}

2.scss的嵌套

1.元素嵌套
父元素底下的相关元素，可以写在父元素的{}里面，元素的相关选择器可以使用&相连。

/*css*/
.head{}
.head:after{}
.head div{}
.head ul{}
.head ul li{}
/*scss嵌套*/
.head{
  ul{
        li{}
     }
  div{}
  &:after{}
}

2.属性嵌套

/*css*/
li {
  font-style: italic;
  font-family: serif; 
  font-weight: bold; 
  font-size:1.2em;
 }

/*scss嵌套*/
.li{
  font{
        style:italic;
        size:1.2em;
     }
}

3.Mixins：作为一个选择器，可在里面定义变量和默认参数

/*先申明mixins*/
@mixin  mixins名称 { 样式规则 }
@mixin  mixins名称（$参数名:参数值） { 样式规则 }
@mixin  mixins名称（$参数名1,$参数名2） { 样式规则 }
/*定义mixin*/
@mixin fixbox($width:50px){
      width:$width;
      border:2px red solid;
}
@mixin fixbox($width,$height){
      width:$width;
      border:2px red solid;
}
/*调用mixin*/
.head{
    @include fixbox();
    /*更改参数名的参数值*/
    @include fixbox(3px);
    @include fixbox(50px,60px);
}

4.extend：继承样式

选择器{ @extend 定义的类 }
/*方法一：建立一个新的class*/
.box{width:100px;font-size:14px;}
.head{
      @extend .box;
      border-bottom:2px red solid;
}
.footer{
      @extend .box;
      border-bottom:2px red solid;
}
/*css*/
.head,.footer{width:100px;font-size:14px;}
.head{ border-bottom:2px red solid;}
.footer{ border-bottom:2px red solid;}
/*方法二：用%代替. */
%box{width:100px;font-size:14px;}
.head{
      @extend %box;
      border-bottom:2px red solid;
}
.footer{
      @extend %box;
      border-bottom:2px red solid;
}
/*css*/
.head,.footer{width:100px;font-size:14px;}
.head{ border-bottom:2px red solid;}
.footer{ border-bottom:2px red solid;}

推荐使用方法二，用%

四、注意点

1.假如你使用的时候，直接报错，就需要注意下，你所在目录是否有中文路径，如果有，建议换成英文的
例如:c:/demo/html