Sass是一种CSS预处理器，Sass是一种易于使用的样式语言，有助于减少传统CSS的许多重复性和可维护性挑战。学习Sass编写可重用的样式效果是工作和面试要求中不可或缺的技能。基本概念什么是Sass？Sass与所有版本的CSS完全兼容。文件扩展名为.scss，意思是SassyCSS。Sass是CSS的扩展，Sass是CSS预处理器。Sass减少了CSS重复，从而节省了时间。Sass文件是可以直接使用CSS语法的普通文本文件。Sass由HamptonCatlin设计，NatalieWeizenbaum于2006年开发为什么使用Sass？随着项目开发，样式表变得越来越大、越来越复杂并且难以维护。这是CSS预处理器可以提供帮助的地方。Sass允许您使用CSS中不存在的特性，例如变量、嵌套规则、mixins、导入、继承、内置函数和其他东西。Sass、Less和Stylus之间有什么区别？它们都具有五个基本特征：“可变”、“混合”、“嵌套”、“继承”和“混色”。Scss和Less有严格的语法，Less需要花括号{}，Scss和Stylus可以通过缩进来表达层级和嵌套关系Scss没有全局变量的概念，Less和Stylus有类似其他语言的作用域概念Sass是基于在Ruby语言上，Less和Stylus可以下载基于NodeJS的NPM库后编译；基本用法1、使用注解支持/****/和//两种方式/*块注释*///行注释2、导入样式可以使用@import关键字导入外部样式。@import'./other_sass_file`;文件的.scss或.sass扩展名是可选的。3.声明变量使用$符号来声明变量。$red:#833;body{color:$red;}如果变量需要嵌入到字符串中，则必须写在#{}中。$side:left;.rounded{border-#{$side}-radius:5px;}4.在嵌套代码块中使用nested，可以使用&来引用父元素，属性也可以嵌套，比如作为边框颜色属性。请注意，必须在边框之后添加一个冒号。markdown-body{p{颜色：蓝色；}&:hover{颜色：红色；}}p{边框：{颜色：红色；}}最终编译结果为.markdown-bodyp{color:blue;}.markdown-body:hover{颜色：红色；}p{border-color:red}5.使用继承通过@extend关键字继承另一个标签的属性。.button{···}.push-button{@extend.button;}6.MixinMixin一般用于编写公共可重用样式，如定位、顶部、底部、左侧、右侧、中心、背景图片地址和大小。使用@Mixin关键字声明，应用使用@include关键字@mixinheading-font{font-family:sans-serif;font-weight:bold;}h1{@includeheading-font;}带有参数的声明和引用@mixinfont-size($n){font-size:$n*1.2em;}body{@includefont-size(2);}withdefaultvalue@mixinpad($n:10px){padding:$n;}body{@includepad(15px);}withdefaultvariable//设置默认值$default-padding:10px;@mixinpad($n:$default-padding){padding:$n;}body{@includepad(15px);}7.颜色函数rgbargb(100,120,140)rgba(100,120,140,.5)rgba($color,.5)Mixingmix($a,$b,10%)//10%a,90%bRGBred($color)//→0..255green($color)blue($color)调整颜色变亮(#cc3,10%)//#d6d65cdarken(#cc3,10%)//#a3a329grayscale(#cc3)//#808080complement(#cc3)//#33c高级用法1.Loop语句使用for循环。@for$i从1到4{.item-#{$i}{left:20px*$i;}}each循环（简单），类似于for。@$menu-items中的每个$item{.photo-#{$item}{background:url('images/#{$item}.jpg');}}每个循环（嵌套）$backgrounds:(home,'home.jpg'),(about,'about.jpg');@each$id,$imagein$backgrounds{.photo-#{$id}{背景：网址（$图片）；}}While循环$i:6;@while$i>0{.item-#{$i}{width:2em*$i;}$i:$i-2;}2.条件语句@if可以用来判断，支持@else命令。@if$position=='left'{位置：绝对；left:0;}@else{position:static;}3.自定义函数Sass允许用户编写自己的函数。@functiondouble($n){@return$n*2;}#sidebar{width:double(5px);}其他功能1.List$list:(abc);nth($list,1)//开头为1length($list)@$list中的每个$item{...}2、Map$map:(key1:value1,key2:value2,key3:value3);map-get($map,key1)
