谈谈对sass的理解

对于大部分前端程序员来说，最痛苦的是莫过于写样式（css）了,试想一下，当做了 一个炫酷插件，或者实现了多牛逼的功能，可是没有完美样式，是不被人宠幸的，巨了解，我身边绝大部分的人都及其不喜欢写样式，一方面：嵌套多层元素时，那选择器的写法可不建议简写，毕竟涉及到样式覆盖与权重的问题；第二方面：对于某些程序员来说这与体力活不差一二。可是在我看来，一个优秀的，吸引人的web，样式的成分还是还是处于上游的，试想一下，一个web，没有“华丽”的表面，怎么吸引人的注意？我始终相信这样一句话“天无绝程序员之路”，这时候sass就拯救了我们

何为SASS

SASS是一个成熟、稳定、强大的 CSS 扩展语言解析器，提供变量、嵌套、混合、继承等特性，使用起来可以有效节俭时间，效率更高，维护更便利

sass安装的两种不同方法

gulp-ruby-sass是调用sass，所以需要ruby环境，需要生成临时目录和临时文件。 

gulp-sass是调用node-sass,有node.js环境就够了，编译过程不需要临时目录和文件，直接通过buffer内容转换。

1，这里我主要介绍第二种方法首先需要在node环境下安装gulp插件

(gulp是当下最流行的自动化工具 ，可以自动化完成我们开发过程中大量的重复工作)

2，假设安装好gulp后，就可以安装sass（npm install gulp-sass --save-dev）

3，这里需要新建gulpfile.js文件（这是gulp的配置文件，放在项目根目录）

4，接下来就可以写我们的sass了

注释（与js相同）

         单行注释  //单行注释不会存在css文件

         多行注释  /*多行注释会存在css文件中*/

变量

           1, sass的变量名必须使$开头，后面接变量名（如 $color:#58bc58）;好处不言而喻，相同属性可以直接使用变量名（如 color:$color / background-color:$color)

            2,当然说到变量肯定少不了全局变量，局部变量

（写在选择器外的称全局变量，选择器外称局部变量，如果希望局部变量能覆盖全局变量，只需加上

(!glogal)=>$color:#red !global  ）

            3,引用外部文件的变量，同名变量需要覆盖只需讲要覆盖的变量后加 !default =>$color:pink; !default 

            4,多值变量（list类型=>可以理解成js中的数组，map类型=>可以理解为js中的对象）

            list :  $pd : 5px 10px 15px 20px;=> div{ padding : $pd ;}  span{ border : nth( $pd , 2 ) ;}   

          map : $head : ( h1 : 24px , h2 : 18px , h3 : 16px ); => h1{ map-get( $head , h1) ;}   

 嵌套（重要）

这个就很重要了，css中写重复的东西是非常恼火的，假设父元素里面有多个子元素，则父元素的id就要重复好多次了

如：#content .nav{background:$color}

       #content .nav p { color : red };

       #content span { border-top : ($pd,2) }

sass写法

有了嵌套后就大大的提升开发者的效率了（在嵌套中用&表示父元素选择器）

继承（@extend）

（顾名思义就是继承同种样式，使用简单，使代码变得简洁）

    1，继承一般样式 @extend h1

    2,站位选择器 % （编译后，符号不存在css中），在我看来继承跟变量的是使用某方面还是一方的

    

函数（针对数字方面提供一系列函数功能）

常用函数

• percentage($value)：将一个不带单位的数转换成百分比值；
• round($value)：将数值四舍五入，转换成一个最接近的整数；
• ceil($value)：将大于自己的小数转换成下一位整数；
• floor($value)：将一个数去除他的小数部分；
• abs($value)：返回一个数的绝对值；
• min($numbers…)：找出几个数值之间的最小值；
• max($numbers…)：找出几个数值之间的最大值。
• lighten($color,$percent) $color颜色值，$percent百分比
• darken($color,$num) $num:0-100

自定义函数（@function函数名）

            

  运算      

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

  循环（重要）

像以上案例，循环就可以给4个li加上不同的背景图片，有效的减少了代码的复写

导入（@import）

1,假设一个web，不同的页面存在重复样式有很多的时候，我们可以将其提取出来，存放在公共的sass文件中（如test.sass），（包括需要继承的样式等），@import  'test' ;

2,大部分web中，header，footer内容都一样，就可以同导入的方式完成了

以上就是我对sass的了解了，当然，只是介绍了常用的知识点，详情请关注sass官网或sass中文网