Sass

lipengjgs大约 3 分钟css预处理

这里说的是SCSS(CSS的扩展语法)，文件格式为 ++.scss++；不同于旧的Sass语法（older）,文件格式为 ++.sass++
sass 与 scss 格式转换：前提安装了Sass sass-convert a.sass a.scss

.sass中不用 {} ，而是靠缩进来显示类及属性，使用的是缩进语法；eg：

$font-stack: Helvetica, sans-serif
$primary-color: #333

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

有些人会认为.sass更加简洁，写起来更加快速，不过因为玩过Less，SCSS看起来与CSS比较接近，我觉得还是SCSS总体看起来更加舒服，个人习惯问题而已

一、通常用法（入门，须完全掌握）

1、变量声明（用$符，而less用@符）

任何可以用作css属性值的赋值都可以用作sass的变量值；包括全局变量和局部变量

$highlight-color: #F90;             //普通变量值
$black-border: 1px solid black;     // border的属性值作为变量值
$basic-font: Helvetica, sans-serif; // 带,的属性值作为变量值

p {
  color:$highlight-color;     // 使用全局变量
  $width: 1000px;             // 局部变量
  width: $width/2;            // 使用局部变量
}

2、嵌套（和less一样）

普通嵌套：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

命名空间嵌套：

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

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

/* 编译后 */

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

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

3、导入css文件（partial）（@import）

partial文件命名要注意：用下划线表示（这一点不像less，less文件命名没有如此要求，导入时，后缀可加可不加）比如：_reset.scss

@import "reset";

4、混合（mixin）

用于css前缀的使用，是一种好的实践需要用到@mixin,@include

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

/* 参数字符串为有引号的 */
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

5、继承(@extend)

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

6、运算符

用于css中的计算（比如在栅格布局中）

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;             
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // 在一个list中, 圆括号中的不会被计算
  color: #010203 + #040506;   //颜色计算；color: #050709;
  //color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); // rgba(255, 255, 0, 0.75);
}

span {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/*
 * opacify和transparentize方法
 **/
$translucent-red: rgba(255, 0, 0, 0.5);
.color {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

7、&选择器

代替父选择器；可以深层次嵌套；可以通过“-”进行组合成选择器

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

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

8、注释

多行注释，单行注释

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

/* 注释使用变量 */
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
/* 编译后 */
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

9、@function (函数)

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }  // 240px

二、高级用法（进阶，尽可能掌握）

1、SassScript

像 $ , @mixin 等等都是脚本

部分知识在上述入门中已经有例子

1.1、

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}