什么是css预处理器

?? CSS 预处理器是一个能让你通过预处理器自己的语法生成CSS的工具。

• CSS 预处理器技术已经非常的成熟。

• 预处理器有许多
  1.Sass（SCSS）
  2.LESS
  3.Stylus
  4.Turbine
  5.Swithch CSS
  6.CSS Cacheer
  7.DT CSS
  ...
  这里来学习sass。

  什么是sass？

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

  Sass 和 SCSS 有什么区别？

  相同点：Sass 和 SCSS 是同一种东西，都称之为 Sass。
  不同点：
  1.文件扩展名不同，分别以.sass和.scss后缀为扩展名。
  2.书写 Sass 不带有大括号和分号，依靠严格的缩进方式来控制。
  3.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编译

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

• 命令编译
• GUI工具编译

• 自动化编译

  通过命令编译

  sass --watch <要编译的Sass文件路径> /style.scss : <要输出CSS文件路径> /style.css
示例

  数据类型

• 数字: 如，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。

  Sass注释

  1、// 这是注释--我不会出现在生成的css中
  2、/* 这是注释--我会出现在生成的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嵌套

选择器嵌套

??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是一个极好的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %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

??希望你对sass能有初步认识，后续我会写一篇关于compass的文章
如有错误，敬请批评指正！
完~~

CSS-再不学习sass你就被淘汰了！

原文：https://www.cnblogs.com/guangzan/p/10547335.html