Sass使用教程

in Tutorials with 15 comments

上一篇《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)

参考

内容挺多的,至此~

Responses
  1. 触动

    大佬,我想了解一下,首页的文章略缩图怎么设置成自己的,我也不想上传附件的时候,附件的图片变成我略缩图。

    Reply
  2. 主题很棒啊!自己弄的主题一堆BUG,准备用这个。

    Reply
    1. @刘明野的博客

      你还未完全按照https://www.linpx.com/p/add-a-separate-search-page-to-the-pinghsu-theme.html 这里面写的去做,例如搜索菜单还未隐藏,模板页也未加上自定义字段~

      Reply
  3. 专业,学习了大佬

    Reply
  4. 😔 挺好的

    Reply
    1. @devmsg

      大佬,好~

      Reply
  5. 咦,看你主题文章页头图怎么关了?我已经做好了一切,等你大更新的时候我再更新主题,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

    Reply
    1. @临时工阿k

      后台设置按一下禁用就可以了,主要是想加强文章的阅读体验~

      Reply
      1. @Chakhsu

        对了,你的主题评论回复不是出现在评论下,而是在上面出现,这个你有办法修复吗?

        Reply
        1. @临时工阿k

          我故意的~

          Reply
          1. @Chakhsu Lau

            好坏,我比较喜欢在当前评论下出现。。不知道怎么修改??或者你来个开关?哈哈哈哈,真不好意思

            Reply
            1. @临时工阿k

              开关准备爆了,外观设置需要整理了,我看下能不能整

              Reply
              1. @Chakhsu

                好嘞,主要每次回复都往上面去,都忘记我刚刚会的是哪个了,对了,还有回车回复,这个就一个代码的事情,不知道你加不加。

                Reply
                1. @临时工阿k

                  你是说评论排序?设置评论那可以调的。我上一个主题有回车回复

                  Reply
                  1. @Chakhsu

                    我还是喜欢评论框在当前评论下出现。。

                    Reply