Sass基础

1. npm 安装

npm install -g sass

2. 查看是否安装成功

sass --version

3. 在根目录下创建sass，css文件夹，并且在sass文件夹下创建样式文件

image.png

4. 编译

命令行编译
sass sass/style.scss:css/style.css
自动编译
sass --watch sass:css

image.png

变量 -- Variables

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

div.box{
    background-color: $primary-color;
}
.page-header{
    border: $primary-border;
}

div.box {
  background-color: #1269b5;
}
.page-header {
  border: 1px solid #1269b5;
}

/*# sourceMappingURL=style.css.map */

嵌套 -- Nesting

嵌套

.nav{
    height: 100px;
    ul{
        margin: 0;
        li{
            float: left;
            list-style: none;
            padding: 5px;
        }
        a{
            display: block;
            &:hover{
                background-color: #0d2f7e;
                color: #fff;
            }
        }
    }
    & &-text{
        font-size: 15px;
    }
}

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}
.nav ul a {
  display: block;
}
.nav ul a:hover {
  background-color: #0d2f7e;
  color: #fff;
}
.nav .nav-text {
  font-size: 15px;
}

/*# sourceMappingURL=style.css.map */

属性嵌套

body{
    font: {
        family: Helvetica, Arial, sans-serif;
        size: 15px;
        weight: normal;
    }
}

.nav{
    border: 1px solid #000 {
        left: 0;
        right: 0;
    }
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.nav {
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}

/*# sourceMappingURL=style.css.map */

混合 -- Mixins

@mixin 名字 (参数1，参数2) ｛ ... ｝

$success: green;

@mixin alert($text-color, $background) {
    color: $text-color;
    background-color: $background;
    a{
        color: darken($text-color, 10%);
    }
}

.alert-warning{
    @include alert(#8a8a8a,#fcf8e3);
}

.alert-info{
    @include alert($background:#fcf8e3, $text-color:#8a8a8a )
}

.alert-success{
    @include alert($success, #fcf8e3 )
}

.alert-warning {
  color: #8a8a8a;
  background-color: #fcf8e3;
}
.alert-warning a {
  color: #717171;
}

.alert-info {
  color: #8a8a8a;
  background-color: #fcf8e3;
}
.alert-info a {
  color: #717171;
}

.alert-success {
  color: green;
  background-color: #fcf8e3;
}
.alert-success a {
  color: #004d00;
}

/*# sourceMappingURL=style.css.map */

继承/扩展 -- interitance

.alert{
    padding: 15px;
}
.alert a{
    font-weight: bold;
}

.alert-info{
    @extend .alert;
    background-color: #f5f5f5;
}

.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #f5f5f5;
}

/*# sourceMappingURL=style.css.map */

Partials与@import

partials文件要以 '_' 开头，表示是分割的部分文件，不会被编译成css
创建一个_base.scss

_base.scss

body{
    padding: 0;
    margin: 0;
}

@import 'base';

.alert{
    padding: 15px;
}
.alert a{
    font-weight: bold;
}

.alert-info{
    @extend .alert;
    background-color: #f5f5f5;
}

body {
  padding: 0;
  margin: 0;
}

.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #f5f5f5;
}

/*# sourceMappingURL=style.css.map */

数据类型 -- data type

1. 数字

image.png

数字函数

image.png

2. 字符串

image.png

字符串函数

image.png

3.颜色

rgb 与 rgba

body{
    background-color: rgb(255,255,0);
}
.box{
    background-color: rgba(255,255,0,.5);
}

body {
  background-color: yellow;
}

.box {
  background-color: rgba(255, 255, 0, 0.5);
}

/*# sourceMappingURL=style.css.map */

hsl(色相，饱和度，明度) 与 hsla

body{
    background-color: hsl(60,100%,50%);
}
.box{
    background-color: hsla(60,100%,50%,.5);
}

body {
  background-color: yellow;
}

.box {
  background-color: rgba(255, 255, 0, 0.5);
}

/*# sourceMappingURL=style.css.map */

adjuest 与 hue
adjuest-hue($color, $degrees)
参数1：调整的颜色参数2：调整的度数

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

body{
    background-color: adjust-hue($base-color-hsl,137deg)
}

body {
  background-color: #00ff48;
}

/*# sourceMappingURL=style.css.map */

lighten 与 darken 改变颜色明度

$base-color: hsl(222, 100%, 50%);
$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;
}

.alert {
  border: 1px solid #004dff;
  background-color: #99b8ff;
  color: #002e99;
}

/*# sourceMappingURL=style.css.map */

saturate 与 desaturate 改变饱和度

$base-color: hsl(221, 96%, 69%);
$saturate-color: saturate($base-color, 50%);
$desaturate-color: desaturate($base-color, 30%);
.alert{
    background-color: $saturate-color;
}
.alert{
    background-color: $desaturate-color;
}

.alert {
  background-color: #6193ff;
}

.alert {
  background-color: #7c9de4;
}

/*# sourceMappingURL=style.css.map */

opacify 与 transparentize 改变透明度

$base-color: hsla(221, 100%, 50%, 0.5);
$fade-in-color: opacify($base-color, 0.3);
$fade-out-color: transparentize($base-color, 0.2);
.alert{
    background-color: $fade-in-color;
    border: 1px solid $fade-out-color;
}

.alert {
  background-color: rgba(0, 81, 255, 0.8);
  border: 1px solid rgba(0, 81, 255, 0.3);
}

/*# sourceMappingURL=style.css.map */

4. 列表 -- list

image.png

5. 布尔值 -- boolean

image.png

控制指令 -- Control Directives

@if

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

body {
  background-color: black;
}

.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

/*# sourceMappingURL=style.css.map */

@for (through or to)

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

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

/*# sourceMappingURL=style.css.map */

@each

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

.icon-success {
  background-image: url(../images/icons/success.png);
}

.icon-error {
  background-image: url(../images/icons/error.png);
}

.icon-warning {
  background-image: url(../images/icons/warning.png);
}

@while

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

.item-6 {
  width: 30px;
}

.item-4 {
  width: 20px;
}

.item-2 {
  width: 10px;
}

用户自定义的函数 -- function

$colors: (light: #ffffff, dark: #000000);

@function color($key){
    @return map-get($colors, $key )
}

body{
    background-color: color(light);
}

body {
  background-color: #ffffff;
}

/*# sourceMappingURL=style.css.map */

警告与错误

$colors: (light: #ffffff, dark: #000000);

@function color($key){
    @if not map-has-key($colors, $key ){
        @warn "在 $colors 里没有找到 #{$key} 这个 key"
    }
    @return map-get($colors, $key )
}

body{
    background-color: color(light);
}

Sass基础

1. npm 安装

2. 查看是否安装成功

3. 在根目录下创建sass，css文件夹，并且在sass文件夹下创建样式文件

4. 编译

变量 -- Variables

嵌套 -- Nesting

混合 -- Mixins

继承/扩展 -- interitance

Partials与@import

数据类型 -- data type

1. 数字

2. 字符串

3.颜色

4. 列表 -- list

5. 布尔值 -- boolean

控制指令 -- Control Directives

用户自定义的函数 -- function

警告与错误

推荐阅读更多精彩内容