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
*/