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 <start> through <end> 包含end这个数 @for $i from <start> to <end> 不包含end这个数循环内应用#{$i}调用以后次循环变量，循环内应用函数或mixin时，不须要包装#{}，间接应用 $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 <list>, $var 是个变量名，<list>返回一个列表值。变量 $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.正文
// 单行正文/* 多行正文 */