CSS-Sass

什么是css预处理器

CSS 预处理器是一个能让你通过预处理器自己的语法生成CSS的工具。预处理器有许多：
1.Sass（SCSS）
2.LESS
3.Stylus
4.Turbine
5.Swithch CSS
6.CSS Cacheer
7.DT CSS
...

什么是sass？

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. --sass官网
sass基于ruby

Sass 和 SCSS 有什么区别？

1.Sass 和 SCSS 是同一种东西，都称之为 Sass。
2.文件扩展名不同，分别以.sass和.scss后缀为扩展名。
3.书写 Sass 不带有大括号和分号，依靠严格的缩进方式来控制。
4.SCSS 的语法书写和我们的 CSS 语法书写无差别,直接把.css改成.scss或者.scs改成.scss都没问题。
代码对比

sass

$my-color: #666 //定义变量
$my-heihgt: 100%
body
  color: $my-color
  height: $my-height

scss

$my-color: #666; //定义变量
$my-heihgt: 100%;
body {
  color: $my-color;
  height: $my-height;
}

他们编译出来的css

css

body {
    color: #666;
    height: 100%;
}

后面的内容我们使用scss编写

安装

1.ruby官网下载安装包安装
下载地址:
http://www.ruby-lang.org/zh_cn/downloads/

编译

使用sass开发，并不是直接引入.scss文件，引入的.css文件，Sass 只不过是作为一个预处理工具，通过编译生成对应的css内容。
编译方法：

• 命令编译
  sass --watch <要编译的Sass文件路径> : <要输出CSS文件路径>
• GUI工具编译
• 自动化编译

数据类型

• 数字: 如，1、 2、 13、 10px；
• 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
• 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
• 布尔型：如，true、 false；
• 空值：如，null；
• 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

注释

• // 这是注释--我不会出现在生成的css中
• /* 这是注释--我会出现在生成的css中 */

变量

使用 $ 声明变量

普通变量

定义之后在全局范围内有效。

scss

$my-color: #666; //定义变量
$my-heihgt: 100%;
body {
  color: $my-color;
  height: $my-height;
}

默认变量

sass 的默认变量需要在值后面加上 !default。
默认变量一般是用来设置默认值，然后根据需求来覆盖，只需要在默认变量之前重新声明下变量即可覆默认变量。

scss

$my-color: #666!default;
body {
  color: $my-color;
}

编译出来的css

css

body {
  color: #666;
}

局部变量和全局变量

• 全局变量 --定义在元素外面的变量
• 局部变量 --定义在元素内部的变量
• 局部变量只会在局部范围内覆盖全局变量
  示例

scss

$my-color: #666!default; //全局变量
body {
  $my-color: #000; //局部变量
  color: $my-color;
}

编译出来的css

css

body {
  color: #000;
}

嵌套

选择器嵌套

Sass允许CSS规则彼此嵌套。然后内部规则仅适用于外部规则的选择器。

scss

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
}

编译出来的css

css

#main {
    width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
    font-weight: bold; 
}

使用 & 引用父选择器

scss

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译出来的css

css

#main {
    color: black; 
}
#main-sidebar {
    border: 1px solid; 
}

提示：伪类嵌套，&，你应该懂了吧。

属性嵌套

scss

.funky {
  font: {
    size: 30em;
    weight: bold;
  }
}

编译出来的css

css

.funky {
  font-size: 30em;
  font-weight: bold;
}

混合宏（mixin）

mixins定义可以在整个样式表中重复使用的样式。

定义混合宏

通过@mixin来定义一个mixin
通过@include来引用

scss

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译出来的css

css

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

传递参数

scss

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译后的css

css

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

Mixins还可以使用常规变量设置语法为其参数指定默认值。

scss

@mixin sexy-border($color:#666, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

有一个特别的参数...

scss

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后的css

css

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

继承

通过@extend实现继承。

scss

.outer {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
}

.wrap-first {
  background-color: #f36;
  @extend .outer;
}

.wrap1-second {
  background-color: orange;
  @extend .outer;
}

编译出来的css

css

.outer,.wrap-first,.wrap1-second {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
}
.wrap-first {
  background-color: #f36;
}

.wrap1-second {
  background-color: orange;
}

不仅实现了继承，而且非常智能的合并了。

占位符 placeholder

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

 scss

 %outer { //如果不被@extend继承  不会在编译后产生任意的代码。
  margin: 0 auto;
}

插值

使用 #{} 插值语法在选择器和属性名称中使用变量。

scss

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为：

css

p.foo {
  border-color: blue; 
}

运算

加法

直接上例子

scss

.outer {
  width: 20px + 8in;
}
/* 
    in是英寸。8in即8英寸。
    1英寸约=2.54厘米,1英寸大约是96像素
    width:20px+8in;
    8in=8*96px = 768px
    即width=20px + 768px = 788px;
 */

编译出的css

css

.outer {
  width: 788px;
}

如果是不同单位会报错
比如px + em 报错

减法规则同加法

乘法

• 如果是不同单位会报错
• 10px * 2正确 写成10px * 2px报错

除法

• 如果是不同单位会报错
• 10px * 2正确 写成10px * 2px报错
• 但是/运算符css中本来就有，所以要这样写：

scss

.outer {
  width: (200px / 4);
}

编译出的css：

css

.outer {
  width: 50px;
}

• 如果使用了函数不用()括起来，也被认作除法运算，例如width: round(1.5)/2;
• 如果使用了加法或减法，也被认作除法运算，例如width: 5px + 8px/2px;;
• 注意还有一种情况： 如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。在乘法中这么做会报错。

变量也是可以运算的

颜色运算

scss

.container {
  color: #112233 + #112233; //编译后的css中的结果是#224466
}

字符串运算

• "Hello" + "" + "World!" 结果为 "Hello World"
• "Hello" + "" + World! 结果为 "Hello World"
• Hello + "" + World! 结果为 Hello World
• font + -size 结果为font-size