SASS的应用

SASS的简单介绍：SASS是一门对css进行编译的扩展语言,使css编译更加具有逻辑性和可塑性

SASS的安装与配置

第一步：安装ruby。

ruby的官方下载地址：http://rubyinstaller.org/downloads。

注意事项：1.应当下载与系统匹配的版本,最好不要下载最新版本。对应64位操作系统,一般下载2.3.1版本。

　　　　　2.安装ruby时应当勾选Add Ruby executables to your PAIH,添加环境变量。

第二步：

　　　　方法一：通过cmd命令行中执行gem install sass安装sass。使用sass -v 查询SASS的版本号,如果显示版本号证明SASS安装成功。

　　　　　　　　否则,则需要用到下面的方式进行安装了。

　　　　方法二：同样在cmd命令中执行gem sources --remove http://rubygems.org/　　回车

　　　　　　　　　　　　　　　　　　gem sources -a http://gems.ruby-china.org　　回车

　　　　　　　　　　　　　　　　　　gem install sass　　回车

　　　　　　　　同样需要用sass -v 来检测一下sass 版本号

更新SASS的方法为：在cmd命令行中执行gem update sass

第三步：在webstorm编译工具中如何使用SASS

　　　　1.打开webstorm,通过下面的方式配置SASS。

　　　　通过file -->Settings -->Tools -->File Watchers --> + --> SCSS --> Arguments -->

　　　　填写配置信息：--no-cache --update --style expended $FileName$:FileNameWithoutExtension$.css 

　　　　点击确定即可。

　　　　当然有的webstorm不需要配置,当项目中用到SASS文件时,就会在右上角提示添加SASS配置信息,点击Add 添加即可

　　　　这样编译sass文件时就会同时监听出对应的css文件。

　　　　注意：sass文件和对应的css文件的目录等级一致,即处于同级目录下。

SASS的语法结构

参考网站：http://sass.bootcss.com/docs/sass-reference/

下面介绍几种SASS语法的基本用法。

1.变量的定义：

$变量名:值　　eg：$color:#efefef;

2.嵌套语法

&:用于引用父类名称 　　eg: & &-title{}

3.@mixin语法

语法结构：

@mixin 名称 ($参数..,$参数){

　　.........

}

//使用@include 名称 ($参数,...){

　　........

}

4.@extend继承语法

.mm {

　　background-color:red;

　　a {

　　　　text-align:center;

　　}

}

.mm2 {

　　@extend .mm;

　　background-origin:border-box;

}

5.占位符 %placeolder

%icon {

　　transition:background-color ease .2s;

　　margin: 0 .5em;

}

.error-icon{

　　@extend %icon;

　　/*错误图标指定样式...*/

}

.info-icon {

　　@extend %icon;

　　/*信息图标指定的样式...*/

}

6.if..else

$theme:"ddd";

.testif {

　　@if($theme == light){

　　　　background-color:lightblue;

　　} @else if ($theme == red){

　　　　background-color:red;

　　} @else {

　　　　background-color:black;

　　}

}

7 for

@for $i from 1 through 5 {

　　.col-#{$i}{

　　　　width:10% * $i;

　　}

}

8.function

$fontsize:75

@function pxtorem($px){

　　@return $px/$fontsize + rem;

}

.box{

　　width: pxtorem(100);

}