sass入门（一）

一、sass安装

sass需要安装ruby，先从官网下载安装ruby，安装时需要勾选Add Ruby executables to your PATH添加到系统环境变量。

安装完成后，使用下面命令测试是否安装成功：

ruby -v

安装成功后切换国内源：

gem update --system // 更新gem到最新版本
// 删除并替换原有源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l
// 确保只有https://gems.ruby-china.com 

使用gem安装compass和sass：

gem install sass
gem install compass

二、sass编译

使用以下命令行可以将sass编译为css文件：

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

koala编译工具

koala是一款免费的sass编译器，下载地址。

Live Sass

live-sass为vscode扩展，能够实时将sass文件转换为css。

sumline扩展sass-build编译器

需要先安装package control后才能安装使用，在搜索sass-build安装，tools->build system->sass。ctrl+B编译scss文件。

二、sass基本类型、变量定义

sass支持6种数据类型：

1. 数字，1, 2, 13, 10px
2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
4. 布尔型，true, false
5. 空值，null
6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

变量

变量以$符号开头，示例如下：

$width:100px; // :类似c语言中的=号

数组的用法

$list:(100px,200px)
//使用
width:nth($list,1); //数组下标从1开始
// 输出：
width: 100px;

map的用法

// 定义
$map: (top: 1px;left:2px);
// 用法
padding-left: map-get($map, left);
----
padding-left: 2px;

使用@each函数遍历：

.div{
    @each $key, $value in $map{
        #{$key}:$value;
    }
}
---------------
.div {
  top: 1px;
  left: 2px; 
}

sass的加减乘除基本运算

数值运算

数值加、减可以数值直接相加减，数值的乘法则不能同时为长度值。

10px + 10px // 20px
10px + 10 // 20px
10px - 10px // 0px
10px - 10 // 0px
10px * 10px //报错
10px * 10 //100px

/符号在css中用于分割数字值，同时它在sass中也被赋予了除法运算符的含义，在某些情况下会被识别为除法运算符。

1. 如果值，或值的一部分，是变量或者函数的返回值。（表达式中存在变量或者有函数返回值）
2. 如果值被圆括号包裹
3. 如果值是算数表达式的一部分

p {
  font: 10px/8px;             // 普通css
  $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
}

颜色值运算

颜色值的运算是分段进行，也就是说先计算出RGB三部分的值，然后在编译为颜色值。

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {
  color: #050709; }

字符串运算

+ 可用于连接字符串

p {
  cursor: e + -resize;
}

编译为

p {
  cursor: e-resize; }