简要介绍下SASS

SASS是最早的CSS预处理语言,有比LESS更为强大的功能,不过其一开始的缩进式语法并不能为大众接受,不过由于强大的功能,还是有很多开发者选择了SASS

SASS是采用了Ruby语言编写的一款CSS预处理语言,(不用担心,我们并不用学习Ruby也可以使用全部功能)诞生于2007年,最初是为了配合HAML(缩进式HTML预编译器)而设计

缩进式风格可以缩减代码量,强制代码风格,但不为大多数程序员接受,而且无法兼容已有的CSS代码,这也是SASS出现早,但是没有LESS普及的原因之一

但是SASS三代开始,SASS开始迎合程序员的使用习惯,放弃缩进式,以及完全兼容普通的CSS代码,这一代的SASS也称之为SCSS
想多LESS,SASS功能更加强大

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号

  

语法区别:
//文件后缀名为sass的语法
body  background: #eee font-size:12px 
p background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

  

基本使用:   
变量的使用这里使用$号开头
(这一块和LESS区别不大,所以做个简单的实验)
  <div id="main">
    </div>

main.scss---注意后缀名
$color:red;
div{
  background-color: $color;
  height: 200px;
  width: 200px;
}
计算,和less一样
$number:10px;
$heidth:$number+190;
$width:$number*20;

div{
  background-color: red;
  height: $heidth;
  width: $width;
}

也不支持减法


支持@import导入
在css中
1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。 
2,@import 是css2里面的,所以古老的ie5不支持。 
3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

@import先加载HTML加载CSS
link先加载CSS加载HTML

  

@extend
一个非常厉害的功能:继承
很多编程语言中都有继承这个概念(非常酷的概念可以大大节约代码量)
@extend
/*div标准配置---也可以称之为父类*/
#div{
  width: 200px;
  height: 200px;
}

#main{

  @extend #div;
  background-color: red;
}
#message{
  @extend #div;
  background-color: gray;
}


编译之后:
/*div标准配置---也可以称之为父类*/
#div, #main, #message {
  width: 200px;
  height: 200px; }

#main {
  background-color: red; }

#message {
  background-color: gray; }

  

@mixin混入,之前less学过了不过有一定的区别

@mixin  div{——注意这里声明的部位和之前有点区别
  width: 200px;
  height: 200px;
}

#main{
 @include div;——引用也有区别,这样用关键字是比less麻烦了还是更清晰呢
}
#message{
@include div;
}

  

嵌套——这一块和less没什么区别
    <div id="main">
        <p>文章类容</p>
        <div id="message">hello world</div>
    </div>

#main{
  width: 200px;
  height: 200px;
  background-color: grey;
  p{color: red;font-size: 14px}
  #message{
    width: 50px;
    height: 50px;
    background-color: blanchedalmond;
  }
}

  

@function
方法的编写-和js函数一样,选择使用
实验:
页面有三个div被一个大div包含,要求用sass编写
 <div id="main">
       <div class="one"></div>
       <div class="two"></div>
       <div class="three"></div>
    </div>

@function setSize($size){
  @return $size
}
@mixin div-init{
  position: absolute;
}
$size:200px;
#main{
  height: setSize($size)*2;
  width: setSize($size)*2;
  background-color: grey;
  @include div-init;
  .one{
    height: setSize($size);
    width: setSize($size);
    background-color: red;
    @include div-init;
  }
  .two{
    height: setSize($size)-100;
    width: setSize($size)-100;
    background-color: blue;
    @include div-init;
  }
  .three{
    height: setSize($size)/2;
    width: setSize($size)/2;
    background-color: yellow;
    @include div-init;
  }
}


控制语句:
编程语言中都有控制程序顺序语句(回顾一下程序中都有几种流程结构)
@if @else @while
但我没怎么用,这里省略,然后有兴趣的自己学习一下

 

posted on 2016-02-28 23:54  浅唱年华1920  阅读(370)  评论(0编辑  收藏  举报