Sass学习笔记

2018-04-07 本文已影响33人智明书

Sass是使用Ruby语言编写的css预处理语言，诞生于2007年。Sass, LESS, stylus等css预处理语言为css增加了编程语言的特性，能够让css可读性增强、更易于后期维护。

Sass和SCSS其实是同一种东西，我们平时都称之为 Sass，两者的区别在于：

文件扩展名不同，Sass 是以.sass后缀为扩展名，而 SCSS 是以.scss后缀为扩展名
语法书写方式不同，如下，Sass 是以严格的缩进式语法规则来书写，不带大括号{}和分号;，是类ruby的写法。而 SCSS 的语法是css3的超集，因此可以把现有的.css文件直接修改成.scss即可使用。

//Sass
body    
  font: 100% $font-stack
  color: $primary-color

//SCSS
body {  
  font: 100% $font-stack;
  color: $primary-color;
}

编译和输出方式

命令行编译：sass --watch sass/bootstrap.scss:css/bootstrap.css
GUI工具编译：koala 是一款桌面程序，支持 less 、 sass 、 coffeescript 即时编译
自动化编译：使用grunt、gulp等

展开输出：sass --watch test.scss:test.css --style expanded {}会另起一行
嵌套输出：sass --watch test.scss:test.css --style nested
紧凑输出：sass --watch test.scss:test.css --style compact 每个样式写在一行
压缩输出：sass --watch test.scss:test.css --style compressed 生产环境使用

注释

我们说过SCSS的语法是CSS的超集，因此SCSS支持css注释风格：块注释/* comment */，该类型的注释会保留在编译后的文件中。

Sass还支持单行注释// commnet ，该类型的注释在编译后会被省略。

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

/*!    
  important comment
*/

变量

Sass变量以$开头

$width: 300px;
$height: 500px;

.sec{
  widht: $widht;
  height: $height;
}

计算

计算在一门计算机语言中是必须的，而css目前只有calc()支持运算，在Sass中扩充了计算功能。

body{
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

嵌套

Sass允许选择器进行嵌套。但要注意:hover的嵌套写法：

a {
  :hover{
    
  }
}
编译成=>
a :hover{   // 等同于a *:hover(a标签下所有子标签的hover)
  
}

可以使用父选择器的标识符&显式的标明：

a{
  &:hover{
    
  }
}

代码复用

@extend 继承

.error{
  color: #f00;
}
.error-serious{
  @extend .error;
  border: 1px #f00
}

编译成=>

.error .error-serious{
  color: #f00;
}
.error-serious{
  border: 1px #f00;
}

@mixin 类似c语言的宏

@mixin col-6{
  width: 50%;
  float: left;
}
div{
  @include col-6;   // 通过@include方式条用
}

编译成=>

div{
  width: 50%;
  float: left;
}

@import 引入文件

css原生的@import指令有两大弊端：

必须放在代码最前面
当浏览器读到@import 指令的时候才会引入其他样式，这样页面处于阻塞状态，对性能不利

局部文件以_开头，比如_variables.scss，待其他文件引用它，引用时候可以忽略_，比如@import 'variables';

所有的sass导入文件都可以忽略后缀名.scss。