本文主要是介绍sass学习、sass语法、sass函数、编辑工具koala，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
sass学习
一、sass与scss的区别：
sass定义
sass是一种基于css的预处理语言，在css的基础上进行简化，sass可以定义变量、嵌套、扩展、条件判断、循环等功能。
sass目前有两种语法规则：sass、scss。
1） 第一种语法规则sass,又被称为缩进语法，该种语法不使用大括号、分号，而是通过缩进来指定块。文件扩展名为.sass
2） 第二中语法为scss,该语法与我们平时的css语法差不多，使用大括号、分号。scss是sass3引入新的语法，该语法完全兼容css3,并且继承了sass的强大功能，另外还能识别大部分css hacks和特定于浏览器的语法（这真是太好不过了）。文件扩展名为.scss。
scss更和平常css写法类似，平常一般用scss作为后缀
二、sass语法
1.导入：@import
sass的导入规则与css有所不同。
2.注释
1）多行注释：/**/
2)当行注释：//
css只有一种注释方式：//
3.变量
1)普通变量：ex:$var:#ccc；
$colorPra: 12px;
body{font-size:$colorPra;
}2)默认变量：ex: $var: 1.5 !default;【用来设置默认值】
$heightH1: 1.5 !default;
body{line-height: $heightH1;
}
默认变量设置默认值，根据需求覆盖
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{line-height: $baseLineHeight;
}3)特殊变量
该类变量可以设置 属性 或在某些特殊情况下使用。
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
.border-#{$borderDirection}{border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{font:#{$baseFontSize}/#{$baseLineHeight};
}4)多值变量：list ，map
$pxA:500px 200px 300px ;//一维数组
$borderM:(1px solid #ccc),(2px dashed #000); //二维数组
.aa{width:nth($pxA,1);height:nth($pxA,3);border:nth($borderM,1)
}
.bb{border:nth($borderM,2);
}5)全局变量：!global
4.嵌套
1）选择器嵌套
2）属性嵌套
3）跳出嵌套：@at-root
@at-root (without: all/rule(默认值)/media/support)
@at-root (with: …)
5.混合:@mixin @include
1)无参数：
@mixin center-block {margin-left:auto;margin-right:auto;
}
.demo{@include center-block;
}
2）有参数
@mixin opacity($opacity:50) {opacity: $opacity / 100;filter: alpha(opacity=$opacity);
}等同于
.opacity{@include opacity; //参数使用默认值
}
.opacity-80{@include opacity(80); //传递参数
}3)多个参数
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){border-bottom:$border;padding-top:$padding;padding-bottom:$padding;
}
.imgtext-h li{@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{@include horizontal-line($padding:15px);
}
等同于
.imgtext-h li {border-bottom: 1px solid #cccccc;padding-top: 10px;padding-bottom: 10px;
}
.imgtext-h--product li {border-bottom: 1px dashed #cccccc;padding-top: 15px;padding-bottom: 15px;
}6.@content
7.继承:@extend
h1{border: 4px solid #ff9aa9;
}
.speaker{@extend h1;border-width: 2px;
}8.占位选择器: %
9.函数
在sass中有已经定义好的函数使用，比如我们经常使用的颜色函数：lighten( color, amount)和darken( color, amount)，但是我们也可以自己定义自己需要的函数。
$fontSizeDefault: 16px !default;
$gray: #000 !defualt; @function pxTorem($px) {@return $px / $fontSizeDefault* 1rem; //将像素px转化为rem值
}.aa{font-size:pxTorem(30px);background:$gray;&:hover{background:lighten($gray,10%); //颜色函数计算}
}10.运算：+- * /
进行运算的只能是可以进行 + = /* 的数值型属性（ex:数字、颜色、变量等），在进行运算的时候需要在运算符前后空格，否则会出错。
$pxA:500px 200px 300px ;//一维数组
.tt{color:#fff;width:1200px - nth($pxA,1); //进行-运算
}11.条件判断及循环
1）@if 或者 @if @else if @else判断
$ifTrue :true; //true false 在sass 可作为判断条件
.ab{@if $ifTrue{display:inline-block;}
}结果为：
.ab {display: inline-block;
}注：当$ifTrue 值为false 时，.ab类中的display是没有的。
2）三目判断
3）for循环
4）@each循环
5）多个字段list、map数据循环
四、函数统计
很多函数平常是用不上的，但是这里罗列出一些函数，方便以后使用
| 序号 | 函数类别 | 函数 | 注释 |
|---|---|---|---|
| 1 | 控制命令 | @if | |
| 2 | 控制命令 | @for | |
| 3 | 控制命令 | @while | |
| 4 | 控制命令 | @each | |
| 5 | 控制命令 | @for | |
| 6 | 字符串函数 | unquote() | |
| 7 | 字符串函数 | quote() | |
| 8 | 字符串函数 | To-upper-case()、To-lower-case() | |
| 9 | 数字函数 | percentage() | |
| 10 | 数字函数 | round() | |
| 11 | 数字函数 | ceil() | |
| 12 | 数字函数 | floor() | |
| 13 | 数字函数 | abs() | |
| 14 | 数字函数 | min()、max() | |
| 15 | 数字函数 | random() | |
| 16 | 列表函数 | length() | |
| 17 | 列表函数 | nth() | |
| 18 | 列表函数 | join() | |
| 19 | 列表函数 | append() | |
| 20 | 列表函数 | zip() | |
| 21 | 列表函数 | index() | |
| 22 | 列表函数 | Introspection函数 | |
| 23 | 列表函数 | unit() | |
| 24 | 列表函数 | unitless() | |
| 25 | 列表函数 | comparable() | |
| 26 | 列表函数 | Miscellaneous函数 | |
| 27 | 列表函数 | Map函数 | |
| 28 | 列表函数 | Maps函数:map-get($map,$key)、map-values($map)、map-merge($map1,$map2) | |
| 29 | 列表函数 | Map函数map-has-key($map,$key)、map-keys($map) | |
| 30 | 列表函数 | Map函数map-remove($map,$key)、keywords($args) | |
| 31 | 颜色函数 | RGB() | |
| 32 | 颜色函数 | RGBA() | |
| 33 | 颜色函数 | Red()、Green()、Blue() | |
| 34 | 颜色函数 | Mix() | |
| 35 | HSL函数 | lighten() | |
| 36 | HSL函数 | saturate() | |
| 37 | HSL函数 | adjust-hue() | |
| 38 | HSL函数 | grayscale() | |
| 39 | Opacity函数 | alpha()、opacity() | |
| 40 | Opacity函数 | rgba() | |
| 41 | Opacity函数 | opacify()、fade-out() |
@规则：
| 序号 | ||
|---|---|---|
| 1 | @import | |
| 2 | @media | |
| 3 | @extend | |
| 4 | @at-root | |
| 5 | @debug | |
| 6 | @warn | |
| 7 | @error |
五、工欲善其事必先利其器，sass编辑工具koala
koala用起来非常方便，在项目中使用sass时，该软件配合SublimeText使用，将scss文件自动编为css文件。
附上sass地址,保留地址，方便以后查看。http://www.w3cplus.com/sassguide/http://www.sass.hk/docs/这篇关于sass学习、sass语法、sass函数、编辑工具koala的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
