参考文章: 阮一峰的网络日志


Sass/Less 都是一种基于 CSS的高级语言, 一种CSS开发工具. 提供了许多便利的写法. 使得CSS 开发&维护 变得非常简单灵活和强大**  Sass 功能远比 less 强大. 可以算一种真正的编程语言了. Less 相对清晰明了.

Sass/Less 到底学哪种:答案是: Sass

CSS

  • 可以开发网页样式.但不是一种编程语言:无法用它编程.
  • CSS 是设计师的工具,不是程序员的工具.

    程序员眼里的 CSS 很麻烦:没有变量.没有条件语句.都是一行行单纯的描述,写起来相当费事….

CSS Preprocessor.

CSS预处理器:

  • 用一种专门的编程语言, 进行网页样式设计.
  • 然后再编译成正常的 CSS 文件.

Sass install (Mac OS)

SASS 是 ruby 写的.但是两者语法没有关系.

  • 必须先安装 Ruby .
  • 再安装 SASS.gem install sass

使用

main.scss 就是普通的文本文件. 里面可以直接使用CSS 语法.

.scss 转为 .css

Sass 编译风格选项
nested: 嵌套 缩进 的css代码.默认值
expended: 没有缩进,扩展的 css代码
compact: 简洁格式的css 代码
compressed: 压缩后的css代码

生产环境 一般使用最后一个: sass --style compressed test.sass test.css


基本用法

SASS 变量

  • 变量必须 $ 开头
    • 后面紧跟变量名.
    • 变量值 和变量名 之间用 : 分割.
    • 后面加上 !default 表示默认值

`$blue: #ffffff; or div { color: $blue;} ` 如果变量需要镶嵌在 字符串中.必须写在 #{} 中
.round { border-#{$side}-radius: 5px; }

普通变量: 定义后 全局使用.

默认变量:


计算功能 允许使用算式. body {   margin: (14px/2);   top: 50px + 100px;   right: $var * 10%; }

嵌套

div h1 {color : red; } = div {  hi {color:red;}  }

嵌套内引用父元素: $ : a:hover = a {&:hover { color: #ffb3ff; } }

注释

  • /* Standard CSS Comment */

    会保留到编译后的文件.

  • // one line comment

    只保留在SASS源文件中,编译后被省略

  • /*! important comment */

    即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

继承

允许一个选择器 继承另一个选着器.

已有 .class1 {border:1px solid #ddd;} class2 要继承class1 就要使用 @extend 命令.

.class2 { @extend .class1; font-size:120%; }

mixin 类似 C语言 宏 Macro. 是可以重用的代码块.

@mixin left {float:left; margin-left: 10px;}  用 include 命令 调用 mixin div { @include left; }

mixin 强大之处:可以指定 参数 和 缺省值.

`@mixin left($value: 10px) { `` float:left; margin-right: $value; } ` when use: add the value: div { @include left(20px); }

Example: 生产 浏览器 前缀.

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }

use like this:

#navbar li { @include rounded(top,left);}
#footer { @include rounded(top,left,5px); }

颜色函数

内置颜色函数,以便生成系列颜色.

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

插入外部文件 @import

@import "path/filename.scss";
@import "foo.css";

条件语句 @if @else

p {
    @ if 1 + 1 == 2 {border: 1px solid;}
    @ if 5 < 3 {border: 2px dotted;}
}

@if lightness($color) > 30% {background-color: #000;} @else { background-color: #fff;}

Recycle → for / while / each 

for recycle:

@for $1 from 1 to 10 {
    .border-#{$i}   {  border: #{$i}px solid blue;  }
}

While recycle:

$i: 6;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i; }
    $i: $i -2;
}

each recycle:

@each $menber in a,b,c,d {
    .#{$menber} {
    background-image: url("/image/#{$menber}.jpg");
    }
}

自定义函数

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

#sidebar {  width: double(5px);  }
}

Sass 两种后缀:

  1. .sass → 无大括号和分号

     body
         background: #eee
         font-size: 12p
     p
         background: #eee
    
  2. .scss → 类似平时css,有大括号+分号. body { background: #fff ; font-size: 120x; }

导入 CSS 中 导入 scss . 编译时候会把 @import 的scss文件 合并,最终生成一个css文件.

Scss 中导入 CSS 导入的css 文件 不会合并 而是以 @import 方式存在.

所有的 sass 导入文件都可以忽略后缀名. 第一个下划线也可以忽略. _minin.scss@import "minxin"

比如有两个 sass文件 : a.scss body {background: #eee;}

b.scss
@import "reset.css";
    @import "a";
        p{ background: #090099; }


最终的样式: b.css

@import "reset.css";
body { background: #eee; }
p {background: #090099; }

根据上面的代码可以看出,b.scss编译后,reset.css继续保持import的方式,而a.scss则被整合进来了。