参考资料:

sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。

关于 sass 的编译,采用 gulp + gulp-sass + browser-sync 的组合,详见 Gulp 常用插件 一文中「热重载」一节。

基本用法

变量

SASS 允许使用变量,所有的变量以 $ 开头,用过 PHP 的同学会很熟悉。

值得注意的是,SASS 中的变量通常都不需要加引号,如果加了引号,则生成的 CSS 也带引号,如果没有引号,则生成的 CSS 也没有引号。

$borderRadius: 30px;

div.main {
  height: 100px;
  width: 100px;
  background-color: black;
  border-radius: $borderRadius;
}

如果变量需要镶嵌在字符串之中,就需要写在 #{} 之中。

$side: left;
$borderRadius: 30px;

div.main {
  height: 100px;
  width: 100px;
  background-color: black;
  border-top-#{$side}-radius: $borderRadius;
}

除了普通变量外,SASS 还支持 list 类型和 map 类型,list 类型有点像 JavaScript 中的数组,而 map 类型有点像 JavaScript 中的对象。

list 类型可通过空格,逗号,或者小括号分隔多个值,可用 nth($var, $index) 取值。其他函数请参考 sass Functions(搜索 list functions)

map 类型以 key-value 键值对出现,其中 value 又可以是 list 类型。格式为 $map: (key1: value1, key2: value2),可通过 map-get($map, $key) 取值。其他函数请参考 sass Functions(搜索 map functions)

计算功能

SASS 允许在代码中使用算式。

$base: 30px;

div.main {
  height: 100px;
  width: 100px;
  background-color: black;
  border-top-left-radius: 10px + 20px;
  border-top-right-radius: $base * 2;
  border-bottom-left-radius: (100px / 2);
  border-bottom-right-radius: 50px - 40px;
}

注意运算时单位(比如 px)要紧跟着数字,不能 (10+20)px,会被解析成 30 px(数字和单位中间会有个空格)

嵌套

SASS 允许选择器嵌套。比如下面的 CSS 代码:

div.main h1 {
  color: red;
}

可以写成:

div.main {
  h1 {
    color: red;
  }
}

属性也可以嵌套:

div.main {
  height: 100px;
  width: 100px;
  // background-color: red;
  // 等价于下面的代码
  background: {
    color: red;
  }
}

和选择器嵌套不同的是,这里要注意 background 后必须加上冒号

在嵌套的代码块内,可以使用 & 引用父元素,在写伪类的时候比较常用:

a {
  color: red;
  &:hover {
    color: black;
  }
}

.post {
  font-size: 1em;
  &-head {
    font-size: 1.8em;
  }
}

注释

SASS 共有两种注释风格。

标准的 CSS 注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在 SASS 源文件中,编译后被省略。

在 /* 后面加一个感叹号,表示这是 "重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*!
 重要注释!
*/

@at-root

Sass3.3.0 中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。

// sass style
.content {
  @at-root #{&}-header {
    color: red;
  }
  @at-root #{&}-content {
    color: blue;
  }
}

// css style
.content-header {
  color: red;
}
.content-content {
  color: blue;
}

代码复用

继承

SASS 允许一个选择器,继承另一个选择器。

div.first {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  @extend div.first;
  border: {
    color: red;
    width: 10px;
    style: solid;
  }
}

也就是说,某个选择器可以继承另一个选择器的所有样式,并在它的基础上添加样式。

占位选择器 %

这里我们得强势插入占位选择器 %,配合 @entend 风味更佳。从 Sass 3.2.0 以后就可以定义占位选择器 %。这种选择器的优势在于:如果不调用则不会有任何多余的 css 文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了 @extend 去继承相应的样式,都会解析出来所有的样式。占位选择器以 % 标识定义,通过 @extend 调用。

比如这段代码:

.base {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  @extend .base;
  border: {
    color: red;
    width: 10px;
    style: solid;
  }
}

编译的结果是:

.base, div.second {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  border-color: red;
  border-width: 10px;
  border-style: solid;
 }

但是 .base 这个类实际并没有用到,我们不希望它在样式表中,可以用占位选择器:

%base {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  @extend %base;
  border: {
    color: red;
    width: 10px;
    style: solid;
  }
}

这时我们再看生成的样式表:

div.second {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  border-color: red;
  border-width: 10px;
  border-style: solid;
}

Mixin

还是上面的例子,有两个 div,它们有一些基础样式,但是又不能用继承关系,这时就可以用 Mixin 定义可以复用的代码块。

使用 @mixin 命令,定义一个代码块。

@mixin divBase {
  width: 100px;
  height: 100px;
}

使用 @include 命令,调用这个 mixin。

div.first {
  @include divBase;
  background-color: green;
}

div.second {
  @include divBase;
  background-color: red;
}

其实这个例子举的不好,用 @extend 也能实现,但是mixin 的强大之处,在于可以指定参数和缺省值。

@mixin divBase($width: 100px, $height: 100px) {
  width: $width;
  height: $height;
}

div.first {
  @include divBase;
  background-color: green;
}

div.second {
  @include divBase(20px, 50px);
  background-color: red;
}

颜色函数

SASS 提供了一些内置的颜色函数,以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件

@import 命令,用来插入外部文件(.scss 和 .css 的后缀可以省略)。

@import 'b.scss';
@import 'c.css';

高级用法

条件语句

@if 以及 @else 以及 @else if 命令:

div.second {
  width: 100px;
  height: 100px;
  @if (1 + 1 != 2) {
    background-color: red;
  } @else {
    background: {
      color: black;
    }
  }
}

注意 SASS 中只有 ==!= 没有 ===

循环语句

循环语句我觉得是 SASS 中最好用的功能,让我觉得 SASS 真的是一种 "编程语言"。

比如有一张雪碧图,如果仅仅用 CSS,我们可能会写出如下 "又臭又长" 的代码:

div.bg_1 {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
  background-position: 0 0;
}

div.bg_2 {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
  background-position: -50px 0;
}

div.bg_3 {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
  background-position: -100px 0;
}

我们先用 SASS 的 Mixin 复用一些代码(用 @extend 也可以):

@mixin divBase {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
}

div.bg_1 {
  @include divBase;
  background-position: 0 0;
}

div.bg_2 {
  @include divBase;
  background-position: -50px 0;
}

div.bg_3 {
  @include divBase;
  background-position: -100px 0;
}

接着我们就来用循环语句进一步精简代码。

SASS 支持 for 循环:

@mixin divBase {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
}

@for $i from 1 to 4 {  // [1, 4)
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

我们注意下上面的循环次数,是 [1, 4),如果想要 [1, 4],则要用 through 关键字:

@for $i from 1 through 4 {  // [1, 4]
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

支持 while 循环:

@mixin divBase {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
}

$i: 1;

@while $i < 4 {
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
  $i: $i + 1;
}

我们还可以用 each,语法为 @each $var in <list or map>

@each $i in (1, 2, 3) {
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

我们可以把 (1, 2, 3) 抽象为一个变量,有点 JavaScript 中数组的意思,这样更灵活,这样数字不一定是等比数列,适用范围就更广了。我喜欢 each!

$num: (1, 2, 3);

@each $i in $num {
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

自定义函数

@function double($n) {
  @return $n * 2;
}

div.second {
  width: 100px;
  height: double(100px);
  background-color: red;
}

SASS 入门笔记的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. Ruby小白入门笔记之 <Gemfile 文件>

    因为初学Ruby,四处查资料无果,才来的贴出亲自试过的操作,覆盖整个个人入门笔记博客中,故所有的操作,都以最明了的方式阐述,当你创建完一个新的Rails应用后,你发现JAVA中我们可以编写maven聚 ...

  3. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

  4. [Java入门笔记] 面向对象编程基础(二):方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  5. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  6. redis入门笔记(2)

    redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...

  7. redis入门笔记(1)

    redis入门笔记(1) 1. Redis 简介 •Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure serv ...

  8. OpenGLES入门笔记四

    原文参考地址:http://www.cnblogs.com/zilongshanren/archive/2011/08/08/2131019.html 一.编译Vertex Shaders和Fragm ...

  9. OpenGLES入门笔记三

    在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...

随机推荐

  1. VS2015企业版,社区版,专业版详细对比

    VS2015 微软出了3个大版本,其实在前天晚上就放出了三个版本的对比说明.,但是昨天挂掉了..今天特意去看了..截取了自己觉得比较重要的分享一下. 首先我们最常用的 诊断调试工具 其次测试工具(区别 ...

  2. [JSP]JSP 简介

    1.1 概述 1.1.1 什么是 JSP? JSP 全称是 Java Server Pages,是一种动态网页开发技术. 它与 PHP.ASP.ASP.NET 等语言类似,运行在服务端的语言. JSP ...

  3. 在docker中运行ASP.NET Core Web API应用程序

    本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过程中,也会对docker的使用进行一些简单的描述.对于.NET Cor ...

  4. 安装MySql for Visual Studio的坑

    阅读目录 问题描述 解决过程 解决方案 总结 回到顶部 问题描述 安装MySql for Visual Studio 一般来说是为了能在VS的服务器数据连接的数据源中能选择MySql类型,如下图: 但 ...

  5. python 数据类型---列表使用 之一

    列表的表现形式:其中的元素可以使任何数据类型,像 字符串,数字, 字典, 列表,变量 等任何类型 age = 28 name = ["Frank", "Lee" ...

  6. Unmanaged Exports使用方法

    Unmanaged Exports,可以利用C#生成非托管的DLL文件. 从https://sites.google.com/site/robertgiesecke/下载UnmanagedExport ...

  7. 记录一次bug解决过程:规范变量名称和mybatis的使用以及代码优化

    一.总结 Mybatis中当parameterType为基本数据类型的时候,统一采用_parameter来代替基本数据类型变量. Mybatis中resultMap返回一个对象,resultType返 ...

  8. Android开发学习—— activity

    activity生命周期 #Activity生命周期###void onCreate()* Activity已经被创建完毕###void onStart()* Activity已经显示在屏幕,但没有得 ...

  9. iOS项目iCloud及CloudKit Dashboard运用

    CloudKit是苹果推出的基于iCloud的一个云端数据存储服务.其 主要由下面两部分组成: 一个仪表web页面,用于管理公开数据的记录类型. 一组API接口,用于iCloud和设备之间的数据传递. ...

  10. yii2分页扩展之实现跳转到具体某页

    作者:白狼 出处:http://www.manks.top/yii2_linkpager_widget.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文 ...