sass/scss-学习

http://www.w3cplus.com/sassguide/syntax.html

  // sass练习
  /* 默认样式与覆盖默认样式 */
  $linkColor: yellow red;
  $linkColor: red blue !default;
  .test-link{
    color:nth($linkColor, 1);

    &:hover{
      color: nth($linkColor, 2);
    }
  }

  /* map */
  $texts: (text1: red, text2: blue, text3: green);
  @each $text, $color in $texts {
    .#{$text} {
      color: $color;
    }
  }

  /* 选择器嵌套 属性嵌套 */
  .text1{
    border: {
      style:solid;
      top: {
        width:4px;
        color:blue;
      }
      bottom: {
        width:2px;
        color:green;
      }
    }
  }

  /* mixin */
  // 无参数mixin