Sass

简介

CSS分为预处理器和后处理器，SASS（Syntactically Awesome StyleSheets）基于Ruby开发，是对CSS的扩展，被称之为“CSS预处理器（CSS Preprocessor）”。其基本思想是用一种编程语言进行样式设计然后再编译成正常的CSS文件。允许使用变量、嵌套规则、minxins、导入等众多功能。

SASS是一门高于CSS的元语言，用来清晰地、结构化地描述文件样式，SASS提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

SASS和SCSS

SASS和SCSS其实是同一种东西，不同点在于

• SASS以.sass后缀为扩展名，SCSS以.scss后缀为扩展名。
• SASS是以严格缩进式规则来书写，不带大括号{}和分号;。
• SCSS语法书写与CSS语法类似

https://www.sass.hk/

$ ruby -v
ruby 2.4.2p198 (2017-09-14 revision 59899) [i386-mingw32]

# 使用Ruby安装SASS
$ gem install sass

语法

变量

$ vim index.scss
# SASS可定义变量，方便统一修改和维护。
$fontStack:Helvetica,sans-serif;
$primaryColor:#333;

body{
    font-family:$fontStack;
    color:$primaryColor;
}

# 编译SASS
$ sass index.scss

# 编译SASS形成CSS
$ sass index.scss index.css
body {
  font-family: Helvetica, sans-serif;
  color: #333; }

h1 {
  color: #333; }

/*# sourceMappingURL=index.css.map */

嵌套

$ vim index.scss
// SASS嵌套，SASS可进行选择器的嵌套，表示层级关系，优雅且整齐。
nav{
    ul{
        margin:0;
        padding: 0;
        list-style:none;
    }
    li{
        display: inline-block;
    }
    a{
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

# 编译SASS为指定CSS
$ sass index.scss index.css

导入

$ vim _reset.scss
html,body,ul,ol{margin:0; padding:0}

$ vim index.scss
@import 'reset'

$ sass index.scss index.css

混入

$ vim _reset.scss
html,body,ul,ol{margin: 0;padding: 0;}

@mixin box-sizing($sizing){
    -webkit-box-sizing:$sizing;
    -moz-box-sizing:$sizing;
    box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

$ vim index.scss
@import 'reset'

$ sass index.scss index.css
html, body, ul, ol {
  margin: 0;
  padding: 0; }

.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*# sourceMappingURL=index.css.map */

继承

$ vim _base.scss
.message{
    border:1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success{
    @extend .message;
    border-color: #0f0;
}
.error{
    @extend .message;
    border-color: #f00;
}
.warning{
    @extend .message;
    border-color: #00f;
}

运算

$ vim _base.scss
.container{width: 100%;}
article[role="main"]{
    float:left;
    width:600px/960px*100%;
}
aside[role="ocmplimentary"]{
    float:right;
    width:300px/960px*100;
}

颜色

$ vim _base.scss
$linkColor:#08c;
a{
    text-decoration: none;
    color: $linkColor;
    &:hover{
        color:darken($linkColor, 10%);
    }
}

Compass

Compass样式框架，Compass由SASS核心团队Chris Eppstein创建，是一个非常丰富的样式框架，包含大量已定义好的mixin、函数，以及对SASS的扩展。
http://compass-style.org/