Sass介绍Sass是一种成熟、稳定、强大的CSS扩展语言。完全兼容所有版本的CSS语法。Sass有两种语法，一种是扩展名为.sass的语法，其书写方式是缩进语法，即选择器的嵌套层级用缩进表示，而不是花括号；而且它不使用分号，而是使用换行符来分隔属性。另一种是常用的语法，后缀为.scss，写法和css一样，用花括号和分号来表示层级和分隔属性。这两种语法可以相互转换或同时使用。sass命令行编译编译//单文件转换命令sassinput.scssoutput.css//单文件监控命令sass--watchinput.scss:output.css//如果sass文件目录很多，可以还告诉sass监控整个目录：sass--watchapp/sass:public/stylesheets配置选项通过--style配置编译和键入的选项。1.嵌套，也是默认的/*命令行内容*/sassstyle.scss:style.css--stylenested/*编译后的样式*/.box{width:300px;高度：400px；}.box-title{高度：30px；行高：30px；}2。expanded/*命令行内容*/sassstyle.scss:style.css--styleexpanded/*编译后的样式*/.box{width:300px;高度：400px;}.box-title{高度：30px;行高：30px；}3。compact/*命令行内容*/sassstyle.scss:style.css--stylecompact/*编译后的样式*/.box{width:300px;高度：400px；}.box-title{高度：30px；行高：30px；}4。compressed/*命令行内容*/sassstyle.scss:style.css--stylecompressed/*编译后续样式*/.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}Sass基本语法变量sass最重要的特性之一是变量。可以将项目中需要重复使用的css属性值定义为变量，然后通过变量名来引用，而不用重复写这个属性值。比如项目中使用的颜色值，以便在项目需要修改时统一更改颜色样式。声明和引用sass使用$符号来标识变量。声明变量时，变量值也可以引用其他变量。也可以定义在一个css规则块中，那么此时该变量只能在这个规则块中使用，即局部变量。$primary-color:#800080;$border:1pxsolid$primary-color;nav{$width:600px;宽度：$宽度；颜色：$primary-color;}.cancel{背景色：#fff;$边框；color:$primary-color;}在引用时，凡是css属性值可以存在的地方都可以使用变量。编译css时，变量会被它们的值替换。变量名sass的变量名可以和css中的属性名和选择器名相同，包括破折号-和下划线_。这两种用法是相互兼容的。用破折号声明的变量可以用下划线引用，反之亦然。$link-color:blue;a{color:$link_color;}//编译了一个{color:blue;}嵌套的CSS规则nested.contentarticleh1{color:#333}.contentarticlep{margin-bottom:1.4em}.contentaside{background-color:#EEE}在这种情况下，sass可以使用嵌套语法，然后在编译成css时自动处理这些嵌套规则，避免重复写法。.content{article{h1{color:#333}p{margin-bottom:1.4em}}aside{background-color:#EEE}}编译后的css和上面原来的css一模一样。Parentselectoridentifier&一般情况下，sass在对嵌套规则进行解包时，会通过一个空格将父选择器（.content）连接到子选择器（article和aside）的前面，形成css的后代选择器。但是，当你遇到像:hover这样的伪类时，如果还用空格连接，就达不到预期的效果了。这时候就需要使用父选择器标识符&来代替。在编译时，&被父选择器直接替换。文章a{颜色：蓝色；&:hover{color:red}}//编译文章a{color:blue}articlea:hover{color:red}组选择器嵌套.containerh1,.containerh2,.containerh3{color:$primary-color;}//sass嵌套写法.container{h1,h2,h3{color:$primary-color;}}属性在sass中是嵌套的，除了CSS选择器，属性嵌套也是可以的。比如设置元素的margin或者topleftbottomrightpadding等值。.div{边距：{顶部：10px;底部：20px；};填充：{顶部：5px;底部：5px；左：10px；右：20px；从-行打断，在根属性后加一个冒号:，然后是{}块，并将子属性部分写在这个{}块中。就像css选择器的嵌套一样，sass会把子属性一个一个拆开，根属性和子属性用破折号-连接起来，最后生成和css样式一样的效果。nav{border:1pxsolid#ccc{left:0px;右：0px；}}Mixer就像一个js函数，当项目中有一大段相同风格的代码需要重复写的时候，需要考虑把重复的部分提取出来封装起来，然后在你调用的时候用它。定义并调用sass通过@mixin标识定义混音器，在@mixin之后定义混音器的名称。下面的sass代码定义了一个非常简单的混合器，用于添加跨浏览器的圆角边框。@mixin圆角{-moz-border-radius:5px;-webkit-边框半径：5px；border-radius:5px;}在样式表中通过@include使用这个混合器。@include标识符将提取mixin中的所有样式并将它们放在调用@include的位置。.button{行高：20px；文本对齐：居中；背景色：$primary-color；颜色：#fff；填充：6px10px；@includerounded-corners;}Mixer传递参数Mixer不一定总是生成相同的样式。可以通过在调用@include时将参数传递给mixin来自定义mixin生成的确切样式。参数也由$符号标识。@mixinellipsis-line($line){溢出：隐藏；文本溢出：省略号；显示：-webkit-box；-webkit-box-orient：垂直；-webkit-line-clamp:$line;}.description{宽度:600px;高度：100px；p{@include省略号线(3);}}多个参数当你@includemixer时，参数太多了。有时可能很难区分每个参数的含义。Parameters之间是怎样的顺序。为了解决这个问题，sass允许通过语法$name:value的形式来指定每个参数的值。在这种形式的参数传递中，参数的顺序并不重要，只要确保没有遗漏任何参数即可：@mixinlink-colors($normal,$hover,$visited){color:$normal;&:hover{颜色：$hover;}&:visited{颜色：$visited;}}a{@includelink-colors($normal:blue,$visited:green,$hover:red);}@includemixer时的默认参数我们可以为参数指定一个默认值，而不是传入所有参数.参数的默认值使用$name:default-value的声明形式，默认值可以是任何有效的css属性值，甚至可以是对其他参数的引用。@mixinlink-colors($normal,$hover:$normal,$visited:$normal){颜色:$normal;&:hover{颜色：$hover;}&:visited{颜色：$visited;}}混音器如果不小心，混音器的便利性和实用性可能会导致过度使用。大量重用会导致生成的样式表很大并且加载速度很慢。因此，有必要明确混音器的使用场景，避免滥用。混合器在某些方面类似于CSS类选择器。这都是关于命名一大段样式然后重用它们。因此，在选择使用哪个时可能会出现混淆。最重要的区别是类选择器应用于html文件，而mixins应用于样式表。这意味着类名是有语义的，而不仅仅是表象描述，它是用来描述html元素的含义而不是html元素的外观。另一方面，混合器是对应用CSS规则时发生的情况的表象描述。就像上面例子中.button类名和圆角混合器的区别。注释在模块化开发中，多人协作，所以一些常用的文件或代码（变量文件、@mixin文件等）需要写清楚注释，以方便协作。而这些注释只有开发者才能看到，任何不需要浏览网页源代码的人都可以看到。因此，sass也提供了不同于css标准注释格式/*...*/的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释以//开始，一直持续到行尾。//这种注释内容不会出现在生成的css文件中/*这种注释内容会出现在生成的css文件中*/@mixinlink-color{}导入模块开发导入文件必不可少。Sass有一个@import规则，在编译生成css文件时会导入相关文件。这意味着所有相关样式都被分组到同一个css文件中，而不需要额外的下载请求。因此，导入文件中定义的所有变量和混合器在导入文件中均可用。/*variable.scss*/$primary-color:#800080;/*index.scss*/@import"variable";p{color:$primary-color;}以下是不同文件导入的一些用法：1.省略.scss或.sass后缀使用sass的@import规则不需要指定导入文件的全名，后缀可以省略。这样，在不修改样式表的情况下，可以随意修改导入的sass样式文件的语法，随意切换sass和scss语法。2.sass部分文件，文件名以下划线开头。那些专门为@import命令编写的sass文件，不需要编译生成相应的独立css文件。此类sass文件称为部分文件。部分文件的文件名以下划线开头。这样sass在编译时就不会单独编译这个文件来输出css，而只是把这个文件作为一个import。当你@import一个部分文件时，你也可以省略文件名中的前导下划线。/*_mixin.scss*/@mixinxxx(){};/*index.scss*/@import"mixin";p{@include();}3.默认变量值，!default。和js一样，sass中一个变量是重复声明的，只有最后一次声明有效，它会覆盖之前的值。在这种情况下，如果你通过@import写了一个可以被别人导入的sass库文件，并且你希望导入器自定义修改sass库文件中的一些值，那么你需要声明默认值带有!default的变量。作用是：如果这个变量被另一个声明赋值，则使用它声明的值，否则使用默认值。/*_variable.scss*/$link-color:pink!default;/*index.scss*/$link-color:yellow;@import"variable";a{color:$link-color;}4.嵌套导入sass允许在css规则中编写@import命令。在这种导入方式中，当生成对应的css文件时，会直接将部分文件插入到css规则中导入的地方。/*_blue-theme.scss*/aside{背景：蓝色；color:#fff;}/*index.scss*/.blue-theme{@import"blue-theme";}/*相当于*/.blue-theme{aside{background:blue;颜色：#fff；}}/*编译后*/.blue-themeaside{background:blue;color:white;}导入的部分文件中定义的所有变量和混合器，也将在此规则范围内生效。这些变量和混合器不是全局可用的，因此我们可以使用嵌套导入将颜色主题或其他变量配置的样式仅应用于站点的特定区域。5、原生css导入：使用.css作为后缀或者url()导入@import"my.css"；@importurl("my.css");css本身有一个特别不常见的@import规则，它允许在一个css文件中导入其他css文件。但是其运行原理是浏览器只有在解析为@import时才会下载@importcss文件，这样会导致页面多请求一次，如果文件比较大，加载可能会比较慢。与css不同的是，sass的@import规则在导入sass文件编译成css的时候会导入相关文件。这意味着所有相关样式都被分组到同一个css文件中，而不需要额外的下载请求。使用.css作为后缀或者url()导入原生css时，编译后会生成原生css的@import语法，导致网络请求较多。/*my.css*/body{background-color:bisque;}/*index.scss*/@import"my.css";/*compiledindex.css*/@importurl(../my.css);因此，由于sass的语法完全兼容css，所以你完全可以将原来的css文件重命名为.scss后缀，然后直接导入，减少冗余的网络请求。/*my.scss*/body{background-color:bisque;}/*index.scss*/@import"my";/*编译后index.css*/body{background-color:bisque;}
