本来想写一篇关于scss入门的文章。但是看了链接的文章，感觉写的太详细了，真的有必要收藏一下。后面会在本文的基础上，补充一些内容。CSS预处理器定义了一种新的专用编程语言，它被编译成一个普通的CSS文件。在不考虑浏览器兼容性问题的情况下，为CSS添加一些编程特性，使CSS更简洁、适应性更强、可读性更好、代码更易于维护等诸多好处。CSS预处理器语言：scss(sass)、LESS等；2、Sass和SCSS的区别文件扩展名不同：“.sass”和“.scss”；Sass是用严格的缩进语法规则编写的，而不是用花括号和分号；而SCSS语法类似于CSS书写语法。3、sass安装（Windows版）首先安装ruby：Ruby官网（http://rubyinstaller.org/down...Ruby版Paste_Image.png安装sass：方法一（通过命令安装sass）：打开命令终端和输入：geminstallsass方法二（本地安装sass）：从http://rubygems.org/gems/sass下载sass安装包，然后在终端输入：“geminstall<将下载的安装包拖到这里>”直接回车安装成功。4.scss语法格式css代码：body{font:100%Helvetica,sans-serif;color:#333;}使用scss代码：$font-stack:Helvetica,sans-serif;$primary-color:#333;body{font:100%$font-stack;color:$primary-color;}提示：如果你使用旧的sass语法（sasssyntax），文件扩展名应该是“.sass”;如果使用新的sass语法（scss语法），文件扩展名应该是“.scss”语法，否则编译时编译不通过。sass编译5.1Sass编译方式：命令编译GUI工具编译自动编译5.1.1Sass命令编译（在命令终端输入sass命令编译sass，最直接最简单）单文件编译：sass<待编译Sass文件路径>/style.scss:<要输出的css文件路径>/style.css多文件编译：sasssass/:css/上面命令的意思是将“sass”文件夹下的所有“.scss”(.sass)在项目中）文件被编译成“.css”文件，这些CSS文件放在项目中的“css”文件夹中。缺点及解决办法：缺点：每次保存scss文件后重新编译太麻烦；解决方法：启用“watch”功能：sass--watch<要编译的Sass文件路径>/style.scss:<要输出的CSS文件路径>/style.csstip：文件路径不要包含中文。如果有中文，则无法正常使用手表功能。6、sass嵌套输出方式nested只需要在编译时带上参数“--stylenested”即可：sass--watchtest.scss:test.css--stylenested7。编译时带参数“--styleexpanded”的sass扩展输出方式expanded：sass--watchtest.scss:test.css--styleexpanded8.sass编译时带参数“--stylecompact”的扩展输出方式compact：sass--watchtest.scss:test.css--stylecompact9.sass扩展输出模式compressed并在编译时带参数“--stylecompressed”：sass--watchtest.scss:test.css--stylecompressed10.sass变量声明$+变量名+:+变量值；$宽度：200px；11.普通变量和默认变量声明后可以全局使用；默认变量只需要在值后加上!default即可；默认变量一般用来设置默认值，然后根据需要覆盖。覆盖的方法是在默认变量之前重新声明变量。默认变量的值在进行组件化开发时非常有用。$baseLineHeight:2;$baseLineHeight:1.5!default;body{line-height:$baseLineHeight;}编译后的CSS代码：body{line-height:2;}12.局部变量和全局变量局部变量：元素内部声明的变量;全局变量：定义在元素外部的变量；全局变量的影子：与全局变量同名的局部变量称为全局变量的影子。$color:green;//全局变量$width:200px;//全局变量$height:200px;//全局变量body{background-color:$color;//调用全局变量}div{$color:yellow;//定义局部变量，全局变量的阴影$color.div{background-color:$color;//调用局部变量width:$width;//调用全局变量height:$height;//调用全局变量变量}}13。Sass嵌套13.1选择器嵌套css:nava{红色;}headernava{颜色：绿色；}scss:nav{a{颜色：红色；标头&{颜色：绿色；}}}13.2属性嵌套（具有相同的属性前缀）css:.box{font-size:12px;font-weight:bold;}scss:.box{font:{size:12px;权重：粗体；}}13.3伪类嵌套scss:.clearfix{&:before,&:after{content:"";显示：表格；}&:after{clear:both;溢出：隐藏；}}css:clearfix:before,.clearfix:after{content:"";显示：表格；}.clearfix:after{清除:两者;overflow:hidden;}sassmixin宏14.1声明mixin宏@mixinborder-radius{-webkit-border-radius:5px;border-radius:5px;}@mixin:声明mixin宏的关键字；border-radius：混合宏的名称；大括号内：重用的样式代码；14.2调用mixin宏@mixinborder-radius{-webkit-border-radius:3px;border-radius:3px;}//声明mixin宏border-radiusbutton{@includeborder-radius;}//调用混合宏border-radius编译成CSS:button{-webkit-border-radius:3px;border-radius:3px;}14.3混合宏的参数不带任何参数值@mixinborder-radius($radius){-webkit-border-radius:$radius;border-radius:$radius;}//声明一个带参数的mixin宏$radius.box{@includeborder-radius(3px);//调用混合宏并将参数“3px”传递给混合宏}传一个带值的参数（传入默认值）@mixinborder-radius($radius:3px){-webkit-border-radius:$radius;border-radius:$radius;}//声明一个传入默认参数值的mixin宏.btn{@includeborder-radius;//使用默认参数值的mixin宏}.box{@includeborder-radius(50%);//可以自己传入参数值}CompiledCSS:.btn{-webkit-border-radius:3px;border-radius:3px;}.box{-webkit-border-radius:50%;border-radius:50%;}传多个参数值@mixinsize($width,$height){宽度:$width;height:$height;}.box-center{@includesize(500px,300px);}编译后的css:.box-center{width:500px;高度：300px；}15.sass继承scss:.btn{border:1pxsolid#ccc;填充：6px10px；字体大小：14px;}.btn-primary{背景颜色：#f36;颜色：#fff；@extend.btn;}编译后：.btn,.btn-primary{border:1pxsolid#ccc;填充：6px10px；字体大小：14px；}.btn-primary{背景颜色：#f36;颜色：#fff；}sass中的继承，可以继承class样式块中的所有样式代码，编译后的css会将选择器合并在一起，形成组合选择器16.sassplaceholder%用占位符声明的代码，如果不会被编译没有被@extend调用。%mt5{margin-top:5px;}%pt5{padding-top:5px;}.btn{color:red;}编译后：.btn{color:red;}//%占位符声明的代码不是编译生成css代码，使用@extend调用：%mt5{margin-top:5px;}%pt5{padding-top:5px;}.btn{@extend%mt5;//使用@extend调用占位代码@扩展%pt5;}.block{@extend%mt5;跨度{@extend%pt5;}}编译后的css代码：.btn,.block{margin-top:5px;}.btn,.blockspan{padding-top:5px;}通过@extend调用的占位符，编译后的代码会将相同的代码合并在一起，代码变得非常简洁。17.sass插值$properties:(margin,padding);@mixinset-value($side,$value){@each$propin$properties{//对于$properties中的每个$prop，即#{$prop}-#{$side}中的$propertiesmargin和padding：$value;//$prop连接参数$side，value为参数$value}}.login-box{@includeset-value(top,14px);//调用混合宏}编译css:.login-box{margin-顶部：14px；填充顶部：14px；}不允许：$margin-big:40px;$margin-medium:20px;$margin-small:12px;@mixinset-value($size){margin-top:$margin-#{$size};}。登录框{@includeset-value(big);}也不起作用：@mixinupdated-status{margin-top:20px;background:#F00;}$flag:"status";.navigation{@includeupdated-#{$flag};}使用@extend时可以插值:%updated-status{margin-top:20px;背景：#F00;}.selected-status{font-weight:bold;}$flag:"status";.navigation{@extend%updated-#{$flag};@extend.selected-#{$flag};}sasscomment/commentcontent/:会显示在编译后的css文件中//commentcontent:不会显示在编译后的css文件中//defineaplaceholder%mt5{margin-top:5px;}/调用占位符symbol/.box{@extend%mt5;}compiledcss:.box{margin-top:5px;}/调用placeholder/sass操作19.1sass加减可以在变量或属性中加减计算.box{width:20px+8in;height:20px-5px;}编译后的css:.box{width:788px;height:25px;}不同类型的单位做加法/减法会报错：.box{width:20px+1em;//不同类型的单位不能相加}19.2sass乘法会有这样的问题：.框{宽度：10px*2px;}应该是这样的：.box{width:10px*2;}编译后的css:.box{width:20px;}和加减法一样，不同类型单位的乘法也会报错。表达式运算用括号括起来，否则“/”不会被认为是除法运算。p{字体：10px/8px；//纯CSS，不是除法运算$width:1000px;宽度：$width/2；//使用一个变量，是一个除法运算width:round(1.5)/2;//uses函数是除法操作height:(500px/2);//使用括号，是除法运算margin-left:5px+8px/2px;//使用了加号（+），这是一个除法运算}compiledcss:p{font:10px/8px;//这是没有意义的csswidth:500px;高度：250px；左边距：9px；}划分同一个单元不会报错，会产生无单位Value:.box{width:(1000px/100px);}编译css:.box{width:10;}19.4Sass变量计算$content-宽度：720px；$sidebar-width：220px；$gutter：20px；.container{width:$content-width+$sidebar-width+$gutter;}编译css:.container{width:960px;}19.5sass数计算.box{width:((220px+720px)-11*20)/12;}编译后的css:.box{width:60px;}19.6Sass颜色运算所有的算术运算都支持颜色值，并且是分段计算的。p{color:#010203+#040506;}的计算公式为01+04=05,02+05=07,03+06=09，综合为：p{color:#050709;}数和颜色一起运算:p{color:#010203*2;}计算公式为012=02,022=04和03*2=06,合成为:p{color:#020406;}19.7Sass字符操作使用"+"拼接字符串：$content:"Hello"+""+"Sass!";.box:before{content:"#{$content}";}编译css:.box:before{content:"HelloSass!";}可以用"+"直接连接字符:div{cursor:e+-resize;}编译css:div{cursor:e-resize;}带引号的字符串和不带引号的字符添加字符串看看哪个在“+”号的左边。如果左边有引号，则引用结果；如果左边没有引号，则结果不带引号：p:before{content:"Foo"+Bar;font-family:sans-+"serif";}编译后的css:p:before{content:"FooBar";字体系列：无衬线；}作者：Chapi链接：https://www.jianshu.com/p/fa3...来源：简书简书版权归作者所有。任何形式的转载，请联系作者授权并注明出处。
