CSS预处理器SASS用法和koala工具的使用 -我爱编程

当前位置：: 首页; 文章; 前端
详情

CSS预处理器SASS用法和koala工具的使用

前端
Stella981
0

最近在学习前端的时候，发现了一个SASS（CSS预处理器），感觉在前端布局写css样式来说是相当强大，效率又高，在用到SASS的时候感觉很爽。

首先说一下传统的CSS，在程序员的眼里感觉是一个很麻烦的东西，没有变量，也没有运算，还没有条件语句，感觉写的相当费事。在人们都感觉费事的同时，真有牛人把CSS加入了编程的元素，这就是（CSS预处理器），是一种专门的编程语言，进行网而设计，然后在编译成正常的CSS文件，但是CSS预处理器中有很多，今天就说一下SASS。

在百度SASS以后，在百度百科中看到了SASS的安装：如下：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令：gem install sass然后，就可以使用了。今天咱们在这里就跳过这一步，在我编程的过程中感觉越省事越好。推荐大家使用一款使用工具－Koala. 首页说一下Koala, koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。下载地址：http://koala-app.com/index-zh.html 使用这款工具也相当省事，安装成功以后，打开此工具，在你的项目目录下创建css目录，然后在css目录下创建style.scss ,然后装css文件夹直接拖到工具内，接着用sublime Text编辑style.scss,工具自动会编释一份style.css文件，真正在网页中使用的是style.css文件。

在使用koala工具的时候，在写样式中添加汉字的时候会提示错误，解决方法：找到工具的安装目录，然后找到以下目录/koala/rubygems/gems/sass-3.4.9/lib/sass/目录有一个engine.rb文件，打开rb文件，在require底部添加

Encoding.default_external = Encoding.find('utf-8')

接着说一下SASS的书写规则和语法：

一、变量 SASS允许使用变量，所在变量以$开头

$color_blue :#1875e7;
div{
color : $color_blue;
}

如果变量要在css的属性中出现的话，就必须需要写在#{}中

$side : left;
 
.box{
border-#{$side}:5px solid #f5f5f5;
}

二、计算功能

SASS可以在代码中做运算

.box{
margin:(14px/2);
top :50px+30px;//当前这些值还可以定义变量
}

三、嵌套

SASS允许选择器嵌套

ul{
  li{
    a{
       color :#dedede;
     }
  }
}
/*编释以后的代码为*/
ul li a { color : #dedede;}

属性也可以嵌套，比如border-color属性，但是border后面必须加上冒号

p{
 
  border:{
     color :#dedede
  }
 
}

在嵌套的代码中，也可以用&符号引用父元素，

ul{
  li{
 
    a{
       &:hover{ color:#dedede}
     }
   }
 
}

四、代码的注释

SASS共用两种注释

标准的CSS注释/* ... */会保留到编译后的文件中单行注释//…… 只保留在SASS的源文件中，编译后被省略重要注释如版权之类的/*! .......*/

五、代码的重用

5.1 继承

SASS允许一个选择器继承另一个选择器，语法( @extend 类名)

.class_one{
  line-height:30px;
}
 
.class_two{
   @extend.class_one;
   font-size :25px
}

5.2Mixin 重用代码块语法 @mixin 定义一个代码块

@mixin left{
 
float: left;
   margin-left :10px
}

使用@include命令可以调用mixin

.box{
 
   @include left;
}

mixin的强大之处，在于可以指定参数和缺省值

@mixin left( $right_v:10px){
 
float: left;
   margin-right : $right_v;
 
}
那么在使用的的时候，可以根据项目的不同设置不同的值
.box{
  @include left(30px);
}
5.3、插入文件

@import命令，用来插入外部文件
@import"path/filename.scss"
@improt"body.css"
六、高级用法

6.1、条件语句

@if可以用来判断
span{
  @if1+1==2{border:1px solid;}
  @if5<3{border:2px dotted;}
}
还可以加上@else命令
@if lightness( $color )>30%{
  background-color :#000;
}@else{
  background-color : $fff;
}
6.2、循环语句

SASS－for循环
@for $i from1 to 10{
   .border-#{$i}{
     border:#{i}px solid blue;
   }
}
//同时也支持while循环
$i :6;
@while $i >0{
  .item-#{$i}{
     width :2px* $i;
   }
   $i: $i -2;
}
@each 命令，作用与for类似
@each $member in a, b, c, d{
 .#{$member}{
    background-image : url("/image/#{$member}.jpg");
 }
 
}
6.3、自定义函数

SASS允许用户编写自己的自定义函数
@functiondouble($n){
  @return $n *2;
}
  
#sidebar {
  width :double(5px);
}