sass学习

$primarg-color: #1269b5;
$primarg-border: 1px solid $primarg-color;

div.box {
  background-color: $primarg-color;
}

h1.page-header {
  border: 1px solid $primarg-border;
}

.nav {
  height: 100px;
  ul {
    margin: 0;
    li {
      float: left;
      list-style: none;
      padding: 5px;
    }
    a {
      display: block;
      color: #000;
      padding: 5px;
      :hover {
        background-color: $primarg-color;
        color: #fff;
      }
    }
  }
  & &-text {
    font-size: 15px;
  }
}
body {
  font: {
    family: "楷体";
    size: 15px;
    weight: normal;
  }
}
//混入
@mixin alert($text-color, $background) {
  color: $text-color;
  background-color: $background;
  a {
    color: darken($text-color, 10%);
  }
}

.alert-warning {
  @include alert(#8a6b3b, #fcf8e3);
}
.alert-info {
  @include alert($background: #d9edf7, $text-color: #666);
}
//继承
.alert {
  padding: 15px;
}
.alert a {
  font-weight: bold;
}
.alert-info {
  @extend .alert;
  background-color: #d9edf7;
}
//引入其他样式
@import "_base";

//注释
/**/
//
/*!*/

//颜色函数rgb与rgba
body {
  background-color: rgba(100%, 100%, 0, 0);
}

$base-color: #ff0000;
$base-color-hsl: hsl(0, 100, 50%);

body {
  background-color: adjust-hue($color: $base-color, $degrees: 137deg);
}
//颜色明暗
$light-color: lighten($base-color, 30%);
$dark-color: darken($base-color, 20%);

.alert {
  border: 1px solid $base-color;
  background-color: $light-color;
  color: $dark-color;
}

//颜色饱和度
$saturate-color: saturate($base-color, 50%);
$desaturate-color: desaturate($base-color, 30%);

.alert {
  background-color: $saturate-color;
}
.alert-info {
  background-color: $desaturate-color;
}

//透明度
$base-color: hsla(222, 100%, 50%, 0.5);
$fade-in-color: opactify($base-color, 0.3);
$fade-out-color: transparentize($base-color, 0.5);
.alert {
  background-color: $fade-in-color;
  border: 1px solid $fade-out-color;
}

//list 列表类型数据

//map

//boolean

//interpolation
$version: "0.0.1";
$name: "info";
$attr: "border";
.alert-#{$name} {
  #{$attr}-color: #ccc;
}

//控制指令

//if
$use-prefixes: true;
$theme: light;
.rounded {
  @if $use-prefixes {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }
}
body {
  @if $theme==dark {
    background-color: black;
  } @else if $theme==light {
    background-color: wheat;
  }
}

//for
$columns: 3;
@for $i from 1 through $columns {
  .col-#{$i} {
    width: 100% / $columns * $i;
  }
}

//each
$icons: scuuess error warning;

@each $icon in $icons {
  .icon-#{$icon} {
    background-image: url(../img/#{$icon}.png);
  }
}

//while
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 5px * $i;
  }
  $i: $i - 2;
}

//function
$colors: (
  light: #ffffff,
  dark: #000000,
);
@function color($key) {
  @if not map-has-key($colors, $key) {
    @error "在$colors中额没有找到#{$key}这个key";
  }
  @return map-get($colors, $key);
}
body {
  background-color: color(light);
}