sass使用
一、sass环境
1.sass简述
Sass是最早的Css预处理语言，采用Ruby语言编写，Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的Css代码，这一代的Sass也被称为Scss
2.sass特点
不能直接在页面中解析，需要使用ruby预先翻译成css文件
Sass功能更加强大，拥有流控语句等
完全兼容 CSS3，在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
3.Sass & Scss
Sass和Scss平时都称之为Sass，是同一个东西。区别有两点：
文件后缀 (扩展名) 不同:
Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；
书写方式 (语法) 不同:
Sass 以严格的缩进式语法规则来书写，不带大括号和分号;
Scss 的书写方式和 Css 语法非常类似（越来越受欢迎原因之一）。
4.解析Sass
方法一：使用第三方编译工具koala，官网：http://koala-app.com/
方法二：使用vscode插件：easysass，插件配置参考：https://marketplace.visualstu...
二、sass语法
1.变量
Sass 使用美元符号“$”来声明变量。
Sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量 之前 重新声明下变量即可。
default:降低变量的优先级（备胎）
代码中使用：
$fontSize:60px;
$bgColor:blue !default; //全局变量
$bgColor:skyblue;
body {
font-size: $fontSize;
background-color: $bgColor;
div{
$bgColor:red; //局部变量
background-color: $bgColor;
}
}2.@import
Sass扩展了Css的@import规则，让它能够引入Scss和Sass 文件，合并并输出一个单一的Css文件。
被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。使用：
// test.scss
$bgColor:skyblue;
// index.scss
@import "test";
body {
background-color: $bgColor;
}3.嵌套
a.选择器嵌套
选择器嵌套，默认是叠加后代选择器
div {
h3 {
color: red;
}
}b.属性嵌套
div {
border: { // 注意body 后面有个英文冒号
top:1px solid red;
bottom:10px dotted blue;
}
}c.伪类嵌套
div {
&:hover {
background-color: red;
}
&::after{
content: "after";
}
}4.代码复用
a.混合宏
项目中有几处小样式类似，可以使用变量来统一处理。需要重复使用大段的样式时，变量就无法达到目的了。这个时候就需要混合宏来搞定。
@mixin 用来声明混合宏
@include 用来来调用声明好的混合宏。
缺点：混合宏对于复用重复的代码块很方便，但它会生成冗余的代码块，相同代码块不能智能合并。比如在不同的地方调用一个相同的混合宏时。
使用：
@mixin after{ // 不带参数
content: "after";
display: block;
background-color: red;
}
@mixin circle($radius:50px,$bgColor:skyblue){ // 带参数
width: $radius;
height: $radius;
border-radius: 50%;
background-color: $bgColor;
}
div{
@include circle(50px,red);
&::after{
@include after;
}
}b.继承
Sass通过关键词 @extend 来继承已存在的类样式块，实现代码的继承。（可以解决混合宏不能智能合并相同代码的缺点）.btn{
border: solid 1px #ccc;
background-color: white;
font-size: 14px;
padding: 5px 10px;
border-radius: 4px;
}
.btn-primary{
@extend .btn;
background-color: #33b735; // 重写背景颜色
color: white;
}
.btn-warnning{
@extend .btn;
background-color: #da3e3e;
color: white;
}
//===> css
/*
/*
.btn, .btn-primary, .btn-warnning {
border: solid 1px #ccc;
background-color: white;
font-size: 14px;
padding: 5px 10px;
border-radius: 4px;
}c.占位符
Sass的占位符 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。避免了代码冗余的产生。%popover{ // 不会保存的css中，因为未继承
background-color: #33b735;
}
.btn-primary{
// @extend %popover;
}
区别总结
占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在，不管调用不调用，基类的样式都将会编译到 Css 代码中。区别图示比较：
5.特殊变量类型
a.list
List类型的取值,语法nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,第二个表示索引使用:
div {
$div-padding: 1px 5px 10px 20px 30px 40px;
padding: {
top: nth($div-padding, 1);
bottom: nth($div-padding, 4);
}
}b.map
Map类型取值,语法map-get(map, key),第一个参数表示要取谁的,也就是map类型的变量的名称,第二个参数表示要取的key。使用：
div {
$color-map: (r:red, g:green, b:blue);
color: map-get($color-map, r);
}6.sass运算
对sass中的数值进行计算，除法运算必须加括号，其它运算可以不加，但是建议所有运算都加上括号使用：
div {
border: solid 1px + 3px - 1px red;
padding-left: (1000px / 10);
padding-top: 10px * 10;
}7.sass分支与循环
a.if语句
@if 指令可以根据条件来处理样式块，条件为true返回一个样式块，false返回另外样式块。除了@if之外，还可以配合@else、@else if使用。
使用：
@mixin show($boolean: true){
@if $boolean {
display: block;
visibility: visible;
}@else{
display: none;
visibility: hidden;
}
}
div {
@include show(true);
}b.for循环
@for 循环有两种形式：
@for $i from through 包括end这个数
@for $i from to 不包括end这个数
循环内使用#{$i}调用当前次循环变量 使用：
ul {
width: 500px;
border: solid 1px red;
li {
background-color: red;
margin: 10px 0;
@for $w from 1 through 10 {
&:nth-child(#{$w}) {
width: #{$w}0%;
}
}
}
}c.each循环list
@each 循环就是去遍历一个列表，然后从列表中取出对应的值。
@each $var in , $var 是个变量名，返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。
使用：
ul {
width: 500px;
border: solid 1px red;
$author-list: tony tian kevin;
@mixin user-imgs {
@each $author in $author-list{
.photo-#{$author}{
background-image: url("/imgs/#{$author}.jpg");
}
}
}
.author{
@include user-imgs;
}
}编译后的css:
ul {
width: 500px;
border: solid 1px red;
}
ul .author .photo-tony {
background-image: url("/imgs/tony.jpg");
}
ul .author .photo-tian {
background-image: url("/imgs/tian.jpg");
}
ul .author .photo-kevin {
background-image: url("/imgs/kevin.jpg");
}d.while循环
@while 循环和 @for类似，后面的条件为 true 就会执行，并且会生成不同的样式块，直到表达式值为 false 时停止循环。
使用：
li {
background-color: red;
$types: 10;
$type-width: 20px;
@while $types > 0{
&:nth-child(#{$types}) {
width: $type-width * $types;
$types: $types - 1;
}
}
}8.函数
Sass自备一系列的函数功能。还可以自定义函数。可使用的函数：
字符串函数
unquote($string)： 删除字符串中的引号；
quote($string)： 给字符串添加引号；
To-upper-case()： 将字符串小写字母转换成大写字母；
To-lower-case()： 将字符串转换成小写字母。
数字函数
percentage($value)： 将一个不带单位的数转换成百分比值；
round($value)： 将数值四舍五入，转换成一个最接近的整数；
ceil($value)： 将大于自己的小数转换成下一位整数；
floor($value)： 将一个数去除他的小数部分；
abs($value)： 返回一个数的绝对值；
min($numbers…)： 找出几个数值之间的最小值；
max($numbers…)： 找出几个数值之间的最大值；
random(): 获取随机数。
列表函数
length($list)： 返回一个列表的长度值；
nth($list, $n)： 返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])： 将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])： 将某个值放在列表的最后；
zip($lists…)： 将几个列表结合成一个多维的列表；
index($list, $value)： 返回一个值在列表中的位置值。
Introspection 函数
type-of($value)： 返回一个值的类型；
unit($number)： 返回一个值的单位；
unitless($number)： 判断一个值是否带有单位；
comparable($number-1, $number-2)： 判断两个值是否可以做加、减和合并。
Opacity函数
alpha($color) /opacity($color)： 获取颜色透明度值；
rgba($color, $alpha)： 改变颜色的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。
Sass Maps的函数
map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
Miscellaneous函数（三元函数）
if($condition,$if-true,$if-false)：条件成立时，返回的值为 $if-true，否则返回值为$if-false。
RGB颜色函数
rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起
HSL函数
hsl($hue,$saturation,$lightness)：
通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：
通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount)：
通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
使用：
body{
&::after{
content: to-upper-case("haoyunlai");
display: block;
clear: both;
}
}9.注释
// 单行注释
/* 多行注释 */