SASS学习系列之四--------- 快速入门

    本文直接用scss语法规则写的scss文件，直接复制代码保存即可用

/*
**    SASS 快速入门
**
/*
**  1. 使用变量, 
**      1.1 声明变量以$符号标识 ()
**      1.2 引用变量
**      1.3 变量名用中划线还是下划线分隔;个人喜好，建议用中划线。
**
*/
$base-color: #ccc; /*声明变量*/
$side: left;
.main-container {
    background-color: $base-color; /*引用变量*/
    border-#{$side}-radius: 5px; /*在字符连接时，要用#开头和一对花括号包裹*/
}
/*  2. 嵌套CSS 规则 
**      2-1. 父选择器的标识符&
**      2-2. 群组选择器的嵌套
**      2-3. 子组合选择器和同层组合选择器：>、+和~
**      2-4. 嵌套属性;
*/
.container {
  p {
    padding: 10px;
  }
  .item {
    width: 200px;
    height: 40px;
  }
  a {
    background-color: #ccc;     
    &:hover { /*父选择器的标识符&*/
        color: fff;
        background-color: green;
    }
  }
  h1, h2, h3 { /*群组选择器的嵌套;*/
    margin-bottom: .8em
  }

  article { /*子组合选择器和同层组合选择器：>、+和~*/
    ~ article { border-top: 1px dashed #ccc }
    > section { background: #eee }
    dl > {
      dt { color: #333 }
      dd { color: #555 }
    }
    nav + & { margin-top: 0 }
  }
  .div {
    border-left: {
        color: $base-color;
        width: 1px;
        style: solid; /*当然，这个更简单的是border-left: 1px solid #ccc*/
    }
  }
}

/*
**  3. 导入SASS文件
**      3-1 关键字 @import <引用文件>   省略文件sass、scss后缀
**      3-2 使用SASS部分文件，sass局部文件的文件名以下划线开头。
**              即只引用该文件中的样式，在编译时却生成该文件对应的css文件
**      3-3 默认变量值
**              关键字 !default 
**              声明某个可以被其他sass文件改变的属性提供默认值
**      3-4 嵌套导入
**              跟原生的css不同，sass允许@import命令写在css规则内。
**      3-5 原生的CSS导入
**              需要把原生css文件的后缀改成scss，然后直接导入就好，scss兼容css语法
**  
*/
@import '_reset'; 
/*  这个_reset.scss文件我只想在这里引用它，而在编译的时候，
**  不会生成对应的css文件，也就是_reset.css文件*/

$box-width: 100px !default; /*默认变量值*/
/*$box-width: 10px; /*若自己后面覆盖了*/
.box-width {
    width: $box-width; /*我在_reset.scss中，声明$fancybox-width: 200px; 若没有外部引用，就默认400px;*/
}
/*嵌套导入*/
.iframe {
  .div {
    position: absolute;
  }
  @import 'iframe'; /*不加分号会报错 */
}
/*原生的CSS导入*/
@import 'myCssFile';  

/**
**  4. 注释 /***/  /*或者*/  //双斜线注释  /*!貌似还有有这种米字号后加感叹号的


/*
**  5. 混合器
**      混合器使用@mixin标识符定义。
**      5-1. 不传参数
**      5-2. 传一个或多个参数
**      5-3. 默认参数
*/
@mixin div-demo { //无参数
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
 @mixin rounded-corners($size) { //带参数
  -moz-border-radius: $size;
  -webkit-border-radius: $size;
  border-radius: $size;
}

@mixin border-radius ( $left-radius, $right-radius ) { //多个参数
  -webkit-border-left-radius: $left-radius;
     -moz-border-left-radius: $left-radius;
      -ms-border-left-radius: $left-radius;
          border-left-radius: $left-radius;

  -webkit-border-right-radius: $right-radius;
     -moz-border-right-radius: $right-radius;
      -ms-border-right-radius: $right-radius;
          border-right-radius: $right-radius;

}

@mixin border-radius-default ( $default, $left-radius: $default, $right-radius: $default ) { //默认参数
  border-left-radius: $left-radius;
  border-right-radius: $right-radius; /*为看得清楚些，就把兼容写法去掉*/
}

@mixin border-radius-default-2px ( $default:2px, $left-radius: $default, $right-radius: $default ) { //默认参数
  border-left-radius: $left-radius;
  border-right-radius: $right-radius; /*本应传多个参数，但什么都不传*/
}
.container {
  .div {
    @include div-demo;
    @include rounded-corners(3px);
  }
  .div2 {
    @include border-radius(3px, 6px);
  }
  .div3 {
    @include border-radius-default(1px);
  }
  .div4 {
    @include border-radius-default-2px();
  }
}

/*  6. 继承 @extend */
.container2 {
  .div {
    width: 100px;
    height: 100px;
  }
  .div2 {
    @extend .div;
    text-shadow: 3px 3px 3px #ccc;

  }
}

/*
** sass官网: http://sass-lang.com/
** sass中文网快速入门: https://www.sass.hk/guide/
** sass在线转换器: https://www.sassmeister.com/
** 阮一峰SASS用法指南: http://www.ruanyifeng.com/blog/2012/06/sass.html
*/