SASS学习笔记

SASS用法指南--阮一峰的网络日志

SASS官网

SASS Document

.scss->.css在线转换器

补充一些内容：

arguments with default value:

@mixin mode($color:#333,$height:20px){
  color:$color;
  height:$height;
}
.class4{
  @include mode(#fff,10px);
}
/*--------get below---------*/
.class4 {
  color: #fff;
  height: 10px;
}

using explicit keyword arguments:

.class4{
  @include mode($height:10px);
}
/*------get below--------*/
.class4 {
  color: #333;
  height: 10px;
}

For, Lists: 

$mylist:5px 10px 20px;
@for $i from 1 to length($mylist){
  .class7--#{$i}{
    height:#{nth($mylist,$i)};
  }
}
@for $i from 1 through length($mylist){
  .class8--#{$i}{
    height:#{nth($mylist,$i)};
  }
}
.class6{
  border-width:nth($mylist,1);
}
/*-------get below--------*/
.class7--1 {
  height: 5px;
}
.class7--2 {
  height: 10px;
}
.class8--1 {
  height: 5px;
}
.class8--2 {
  height: 10px;
}
.class8--3 {
  height: 20px;
}
.class6 {
  border-width: 5px;
}
/*     @for $i from $a to $b ----------------->[$a, $b)      */
/*     @for $i from $a through $b ------------>[$a, $b]      */
/*     @for $i from 0 to length($mylist) ------>wrong, Lists start from 1, not 0      */
/*     get the first item of $mylist: nth($mylist,1);      */

lists functions: length($list), nth($list, $n), set-nth($list, $n, $value), append(), index()......

Lists, Variable Arguments

/*----all below are lits--------*/
$mymargin: 10px 15px 0 0;
$myfont-face: Helvetica, Arial, sans-serif;
$mylist: 1px 2px, 3px 4px;//a two-item list containing the list 1px 2px and the list 5px 6px. 

lists as unknown number of arguments:

@mixin colors($text, $background, $border:#111) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}
$values: #ff0000 #00ff00;
.primary {
  @include colors($values...);
}
/*-----------get below------------*/
.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #111;
}
/*-------not right:@include colors($values);--------*/

Maps:

@mixin mapF($map){
  .#{map-get($map,name)}{
  color:map-get($map,color);
  height:map-get($map,height);
  }
}
$mycolor:#333;
$mymap:(
  name:class5,
  color:$mycolor,
  height:20px
);
@include mapF($mymap);
/*-------get below-------*/
.class5 {
  color: #333;
  height: 20px;
}

maps functions: map-get, map-merge, map-remove...... 

my own exercise:

resizable.scss:

@import "./themes/blue";
@import "resizable-base";
@import "resizable-mixin";

@include new-resizable($resizable-bar,$resizable-dragger);

 themes/_blue.scss:

@mixin resizable-hover-bar{
  background: #002D72;
  box-shadow: 0 0 7px #00BDF2
};

$resizable-bar:(
  name: by-resizable-handle-bar,
  column-bar-width: 6,
  row-bar-height: 6
);
$resizable-dragger:(
  name: by-resizable-handle-dragger,
  column-dragger-width: 11,
  column-dragger-height: 30,
  row-dragger-width: 30,
  row-dragger-height: 11
); 

_resizable-base.scss:

.by-resizable{
    position: relative;
    .by-resizable-handle{
        position:absolute;
    }          
}

_resizable-mixin.scss:

@import "sass-list-maps";

@mixin new-resizable($bar,$dragger) {
    $barName: map-get($bar,name);
    $CbarW: map-get($bar,column-bar-width);
    $RbarH: map-get($bar,row-bar-height);
    
    $draggerName: map-get($dragger,name);
    $CdraggerW: map-get($dragger,column-dragger-width);
    $CdraggerH: map-get($dragger,column-dragger-height);
    $RdraggerW: map-get($dragger,row-dragger-width);
    $RdraggerH: map-get($dragger,row-dragger-height);
    
    .by-resizable{
      .by-resizable-handle-e,.by-resizable-handle-w{
        cursor: ew-resize;
        width: #{$CbarW}px;
        height: 100%;
        top: 0;
      }
      .by-resizable-handle-e{
        right: #{-$CbarW/2}px;
      }
      .by-resizable-handle-e .#{$barName},.by-resizable-handle-w .#{$barName}{
        width: 1px;
        height: 100%;
        position: absolute;
        left: #{$CbarW/2}px;
      }
      .by-resizable-handle-e .#{$draggerName},.by-resizable-handle-w .#{$draggerName}{
        display: none;
        width: #{$CdraggerW}px;
        height: #{$CdraggerH}px;
        top: 50%;
        left: #{-$CbarW/2}px;;
        margin-top: #{-$CdraggerH/2}px;
        position: absolute;
        cursor: pointer;
        cursor: -webkit-grab;
      }
      .by-resizable-handle:hover .by-resizable-handle-bar {
        @include resizable-hover-bar
      }      
      ......
　　}
}