Scss快速入门

一、安装 及 编译 详细教程

介绍

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 两种语法格式：
  • scss：即css语法
  • sass：简化了。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器；用 “换行” 代替 “分号” 分隔属性。

安装

• sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

编译：

• 命令行编译
• 编辑器插件编译
• 编译软件koala
• 前端自动化工具编译

编译软件 Koala

• 支持多语言：Less、Sass、CoffeeScript 和 Compass Framework
• 跨平台：Windows、Linux、Mac都能完美运行
• 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作
• Koala 使用教程

二、嵌套

1. 嵌套规则

• Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器
• 优点：层层嵌套，逻辑性更强；便于代码管理；避免多次写父选择器；

#main p {
    color: #00ff00;
    
    .redbox {
        background-color: #ff0000;
    }
}

// 被编译为：（没有&的嵌套会增加 父选择器）
#main p {
    color: #00ff00;
}

#main p .redbox {
    background-color: #ff0000;
}

2. 父选择器 &

• 内层样式不会将外层样式作为父选择器

.but1 {
    color: #00ff00;

    &-class {
        background-color: #ff0000;
    }
}

// 被编译为：（有&的嵌套，不会增加 父选择器）
.but1 {
    color: #00ff00;
}

.but1-class {
    background-color: #ff0000;
}

三、注释、导入 @import

• Sass 支持标准的 CSS 多行注释 /* */，会 被完整输出到编译后的 CSS 文件中
• Sass 支持标准的 CSS 单行注释 //，不会 被输出到编译后的 CSS 文件中

四、SassScript

1. 变量 （块级作用域）

• 定义变量用 $，变量支持块级作用域，只能在局部使用
• 将局部变量转为全局变量：属性后加 !global

.main {
    $width: 5em !global;
    width: $width;
}

.sidebar {
    width: $width;
}

// 被编译为：
.main {
    width: 5em;
}

.sidebar {
    width: 5em;
}

2. 插值语句（）

• 选择器、属性名中、部分片段中：必须使用插值语句

2. 数据类型

数字

• 数字，1, 2, 13, 10px, rem, em

字符串

• 有引号字符串、无引号字符串

数组

• 数组的值之间：用逗号 或 空格 链接

$color: red green;

map 对象

• $obj:（第一项 第二项 ....）;
• 对象中取值 nth()

.evaluate-grade-color {
    display: flex;
    $cls: (1 #d02e2e) (2 #b2883e) (3 #95b23e) (4 #3eb277) (5 #3e9eb2) (6 #4864ae) (7 #4e4392);

    @each $cl in $cls {
        $grade: nth($cl, 1);
        $color: nth($cl, 2);

        span:nth-child(#{$grade}) {
            flex: 1;
            height: 6px;
            background-color: #{$color};
        }
    }
}

颜色

布尔

数字

null

3. 运算

• 关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型

• 数字类型：加减乘 正常； 除 特殊（以下三种情况 / 将被视为除法运算符号）

  • 如果值，或值的一部分，是变量或者函数的返回值
  • 如果值被圆括号包裹
  • 如果值是算数表达式的一部分

p {
    font: 10em + 8em;
    $width: 1000px;
    width: $width/2;
    height: 500px/2;
    margin-left: 5px + 8px/2px; 
}

// 被编译为：
p {
    font: 18em;
    width: 500px;
    height: 500px/2;
    margin-left: 9px;
}

• 字符串类型：加号 代表链接

• 圆括号代表优先集

五、控制指令

1. @if 、 @else 、 @else if

$type: monster;

p {
    @if $type == ocean {
        color: blue;
    }
    @else if $type == matador {
        color: red;
    }
    @else if $type == monster {
        color: green;
    }
    @else {
        color: black;
    }
}

// 被编译为：

p {
    color: green;
}

2. @for

• @for $var from <start> through <end> ：包含开始 和 结束 的值
• @for $var from <start> to <end> ：只包含开始 不包含结束的值

@for $i from 1 to 3 {
    .item-#{$i} { width: 2em * $i; }
}

// 被编译为：
.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}

3. @each

• @each $var in <list> ： list 是一串值列表

@each $i in one, two, three {
    .#{$i} {
        background-color: red;
    }
}

// 被编译为：
.one {
    background-color: red;
}

.two {
    background-color: red;
}

.three {
    background-color: red;
}

4. @while

• 格式如下：

$i: 6;
@while $i > 0 {
    // 样式

    $i: $i - 1;
}

• 示例代码

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

// 被编译为：
.item-6 {
    width: 12em;
}

.item-4 {
    width: 8em;
}

.item-2 {
    width: 4em;
}

六、混合指令（定义@mixin、调用include、传参）

1. 定义混合指令

• @mixin

调用混合指令

• @include

@mixin large-text {  // 定义
    background-color: red;
}

.class {  // 调用
    @include large-text;
}

// 被编译为：
.class {
    background-color: red;
}

@mixin silly-links {
    a {
        color: blue;
        background-color: red;
    }
}
@include silly-links;

// 被编译为：
a {
    color: blue;
    background-color: red;
}

2. 混合指令传参

@mixin name($color, $width) {
    border: {
        color: $color;
        width: $width;
    }
}

p {
    @include name(red, 1px);
}

// 被编译为：
p {
    border-color: red;
    border-width: 1px;
}

3. 混合指令传参（带默认值得参数）

@mixin name($color, $width: 10px) {
    border: {
        color: $color;
        width: $width;
    }
}

p {
    @include name(red);
}

// 被编译为：
p {
    border-color: red;
    border-width: 10px;
}

混合指令传参（命名参数, 但也有顺序要求）

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

p {
    @include sexy-border($color: blue);
}

// 被编译为：
p {
    border-color: blue;
    border-width: 10px;
    border-style: dashed;
}

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

p {
    @include sexy-border($color: blue);
}

// 报错：因为有顺序要求

七、使用示例：循环对象中的值

<html>
    <div class="evaluate-grade-color">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
     </div>
</html>

.evaluate-grade-color {
    display: flex;
    $cls: (1 #d02e2e) (2 #b2883e) (3 #95b23e) (4 #3eb277) (5 #3e9eb2) (6 #4864ae) (7 #4e4392);

    @each $cl in $cls {
        $grade: nth($cl, 1);
        $color: nth($cl, 2);

        span:nth-child(#{$grade}) {
            flex: 1;
            height: 6px;
            background-color: #{$color};
        }
    }
}