1.SASS和SCSS的区别文件扩展名不同：“.sass”和“.scss”；SASS是用严格的缩进语法规则编写的，没有大括号和分号；语法类似于CSS书写语法。2、安装首先安装Ruby（http://rubyinstaller.org/down...命令安装sass：打开命令终端输入：geminstallsass3、sass编译3.1单文件编译sass<编译后的sass文件路径>/xx.scss:/xx.csssassinput.scss:output.css3.2多文件编译sasssrc/sass/:dist/css/上面命令的意思是编译“sass”中的所有“sass””文件夹中的“.scss”（.sass）文件被编译成“.css”文件，这些CSS文件放在项目中的“css”文件夹中。3.3SASS提供了四种编译样式选项：nested:nestedcompression导入的css代码，默认值expanded:不缩进，展开的css代码compact:压缩格式的css代码compressed:压缩的css代码带上参数'--styleexpandedwhencompiling':inaproduction环境，一般使用最后的sass--stylecompressedtest.sasstest.css3.4??watch监控sass文件或目录//watchafile sass--watchinput.scss:output.css //watchadirectory sass--watchapp/sass:public/css官方在线工具https://www.sassmeister.com/用法1.变量sass允许使用变量，所有变量以$开头。Common声明变量后，可以在全局范围内使用默认变量。只需在值$side:left;之后添加!default即可；如果变量需要嵌套在字符串中，则必须写在#{}中：$side:left;.rouned{border-#{$side}-radius:3px;}2.加减乘除sass允许在代码中使用计算：body{margin:(14像素/2);顶部：50px+100px；//变量或属性可以是对的：$var*10%;左：10px*2px；//左误差：10px*2;//正确}请注意，sass划分更为特殊。如果除法中没有变量或不在数学表达式（加法、减法等）中，则除法运算必须用括号括起来，否则“/”将不会被视为除法运算。p{字体：10px/8px；//纯CSS，不是除法运算width:$width/2;//使用变量，是除法运算width:round(1.5)/2;//使用一个函数，是一个除法操作height:(500px/2);//使用括号，是除法运算margin-left:5px+8px/2px;//使用了加号（+），是除法运算}3、嵌套3.1选择器嵌套Setdivh1{color:red;}//可以这样写：div{h1{color:red;}}在嵌套的代码块中，可以使用&来引用父元素a{&:hover{color:red;}}3.2border-color、字体系列等属性嵌套p{border:{color:red;}字体：{大小：12px；重量：700；注释样式。标准的CSS注释：/*comment*/，会在编译后的文件中保留。单行注释//注释只保留在SASS源文件中，编译后省略。在/*后加感叹号，表示这是一条“重要评论”。即使以压缩模式编译，这行注释也会被保留，通常可以用来声明版权信息。/*!重要声明*/5.继承@extendSASS允许一个选择器继承另一个选择器，使用@extend命令。例如，现有的class1:.class1{border:1pxsolid#ddd;}.class2{@extend.class1; font-size:120%; }注：要继承的不仅仅是class选择器，可以是id选择器，label选择器，也可以是某个state。任何选择器都可以被继承。此外，可以使用占位符%构造仅继承选择器。用占位符%声明的代码如果没有被@extend调用将不会被编译，也不会被渲染到CSS规则集中。%br5{border-radius:5px;}//使用@extendcall:.btn{@extend%bt5;}//Compiled.btn{border-radius:5px;}6.MixinMixin有点像C语言A宏是一个可以重复使用的代码块。首先，使用@mixin命令定义一个代码块。@mixinleft{ float:left; margin-left:10px;}其次，使用@include调用div{ @includeleft;}mixin的强大之处在于你可以指定参数和默认值价值。@mixinleft($value:10px){ float:left; margin-right:$value; }7.插入/引入外部文件@import命令用于插入外部文件。@import“路径/文件名.scss”；8。条件语句@if语句@iflightness($color)>30%{ background-color:#000; }@else{ background-color:#fff; }9.循环@for循环@for$i从1到10{ .border-#{$i}{ border:#{$i}pxsolidblue; }}@whileloop$i:6;@while$i>0{ .item-#{$i}{width:2em*$i;} $i:$i-2;}@eachcommand@each$memberina,b,c,d{ .#{$member}{ background-image:url("/图片/#{$member}.jpg"); }}10。自定义函数 @functiondouble($n){ @return$n*2; } #sidebar{ width:double(5px); }
