CSS 教程 webpack SASS

上一篇《webpack2和Sass设置教程》已经讲解了Sass的安装与webpack的设置，那么这篇是讲如何使用Sass，还未涉及到进阶部分，算是一篇较为基础得教程，属于入门

Variables

Sass支持7种数据类型，如下

1. 数值 (e.g. 1.2, 13, 10px)
2. 字符串 (e.g. "foo", 'bar', baz)
3. 颜色 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
4. 布尔值 (e.g. true, false)
5. 空 (e.g. null)
6. 数组 (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
7. 映射 (e.g. (key1: value1, key2: value2))

了解详情可看：Here

变量需要用$去标识,看下面的例子：

scss:

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}

css:

h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336;
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

Nesting

这部分使用得最多，看下面例子

scss:

ul{
  margin:0;
  li{
    list-style:none;
  }
}

css:

ul{
  margin:0;
}
ul li{
  list-style:none;
}

嵌套时使用父选择器，这里的关键字是&

scss:

a{
  font-size:14px;
  &:hover{
    font-size:18px;
  }
  & &-biger{
    font-size:22px;
  }
}

css:

a{
  font-size:14px;
}
a:hover{
  font-size:18px;
}
a a-biger{
  font-size:22px;
}

当然属性也能嵌套，如下

scss:

body{
  font:{
    family: sans-serif;
    size:15px;
    weight:normal;
  }
}
.nav{
  border:1px solid #eee {
    left:0;
    right:0;
  }
}

css:

body{
  font-family:sans-serif;
  font-size:15px;
  font-weight:normal;
}
.nav{
  border:1px solid #eee;
  border-left:0;
  border-right:0;
}

Mixins

混合的使用有两个关键字,分别为@mixin和@include，例子如下

scss:

@mixin alert{
  color:#eee;
  background-color:#111;
  a{
    color:red;
  }
}
.alert-warning{
  @include alert;
}

css:

.alert-warning{
  color:#eee;
  background-color:#111;
}
.alert-warning a{
  color:red;
}

如果需要带参数，则如下

scss:

@mixin alert($text-color,$bg-color){
  color:$text-color;
  background-color:$bg-color;
  a{
    color:darken($text-color,10%);
  }
}
.alert-warning{
  @include alert(#8a6d3b,#eee);
}

css:

.alert-warning{
  color:#eee;
  background-color:#111;
}
.alert-warning a{
  color:#66512c;
}

Extend

使用拓展需要用到关键字@extend,它的工作方式很类似混合，需要注意区分，下面是例子

scss:

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}

css:

.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  background-color: #87bae1;
  float: left;
}

.cancel {
  background-color: #e4749e;
  float: right;
}

Operations

Sass也能做一些基本的数学计算，下面是例子

scss:

$width: 800px;

.container {
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}

css:

.container {
  width: 800px;
}

.column-half {
  width: 400px;
}

.column-fifth {
  width: 160px;
}

更多 Operations 相关可以查看：here

Functions

Sass有大量的函数方便我们去调用，下面是darken($color, $amount)的使用例子

scss:

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}

css:

a {
  padding: 10px 15px;
  background-color: #2196F3;
}

a:hover {
  background-color: #0c7cd5;
}

更多 Functions 相关可以查看：Here

Other

@import的用法如下

base.scss:

body{
  padding:0;
  margin:0;
}

scss:

@import "base";

css:

body{
  padding:0;
  margin:0;
}

注释的用法如下

/*
 * 多行注释
 */

单行注释

// 单行注释

强制注释

/*! 多行注释 */

当然还有更多，如控制流程和表达式(Here)

参考

• tutorialzine.com/2016/01/learn-sass-in-15-minutes/
• sass-lang.com/documentation/file.SASS_REFERENCE.html
• sass-lang.com/documentation/Sass.html

内容挺多的，至此~

本文由 Chakhsu Lau 创作，采用 知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。