3-基础语法

sass代码

@charset "utf-8";

//【变量】
$color:red;
$100%;
$height:100px;
$fontSize:20px ;
$baseFontSize:10px !default;//默认初始变量
$BackgroundColor: ghostwhite ;



//【嵌套(Nesting)】sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
.mya{
    color:$color;
    width: $width;
    height:$height ;
    font-size:$fontSize ;
    background-color:$BackgroundColor;
    //所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
    span{color: green;}
    //所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。
    border:{
        style: solid;
        left: { 3px;color: red;}
        right: { width: 1px;color: cornflowerblue;}
        top:none;
        bottom:none;
    };
    
}



//【混合(mixin)】sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
//自我理解其实相当于java中的方法，与方法调用
    //不带参混合   
@mixin Myfont{font-size: 30px; color: deeppink; }
.myb{ @include Myfont;}
    //带参混合
@mixin Myfont($a,$b){font-size: $a/2; color: $b; }
.myc{ @include Myfont(40px,blue);}



//【继承】sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。
.myd{@extend.mya;}



//【函数】sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction
    //sass内置函数：实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
.mye{color:lighten(red,30%);}//lighten颜色减淡,0-100为深-浅
   //自定义函数：以@fuction开始
@function pxToRem($px){@return $px / $baseFontSize * 1rem;}
.myf{font-size:pxToRem(16px);}


//【运算】其实上边已经设计到了运算，就不再举例子了


//【流程控制】
    //if判断
.myg{
    width: $width;
    height:$height ;
    background-color:$BackgroundColor;
    @if $width < 20%{color:blueviolet;}
    @else{color:red}
}

编译后的css

.mya, .myd {
  color: red;
  width: 100%;
  height: 100px;
  font-size: 20px;
  background-color: ghostwhite;
  border-style: solid;
  border-left-width: 3px;
  border-left-color: red;
  border-right-width: 1px;
  border-right-color: cornflowerblue;
  border-top: none;
  border-bottom: none; }
  .mya span, .myd span {
    color: green; }

.myb {
  font-size: 30px;
  color: deeppink; }

.myc {
  font-size: 20px;
  color: blue; }

.mye {
  color: #ff9999; }

.myf {
  font-size: 1.6rem; }

.myg {
  width: 100%;
  height: 100px;
  background-color: ghostwhite;
  color: red; }

/*# sourceMappingURL=first.css.map */

项目下载：

http://pan.baidu.com/s/1c9dHXc