三言两语之简单上手sass

背景：

  初次接手公司的项目,虽然以前草草的看过一些sass的基础知识，可是由于久未征战，知识也早已随风飘散，如今小复习一下记下一些常识中的重点。。sass是使用ruby写的，因此使用前请先确保本身的机子中有了ruby的开发环境，在cmd下使用 ruby -v 命令能够查看当前的ruby版本，安装Ruby后咱们要安装sass，按住键盘win+R，输入ruby打开命令行，输入gem install sass安装sass便可，如图所示：

 

须要注意的是：只要咱们的项目中用到了sass都应该将环境配置全了，以防往后的其余依赖出现问题。

 

简介及概述：

  sass是css的 预处理工具，当咱们的css代码量很大的时候能够简化咱们的开发方便后续的维护。什么是预处理工具，简单的理解就是在产生真正css代码 以前 要作的工做，他融入了一些高级语言的特性，提升了咱们css的书写效率,且sass也支持css3。

 

  还记得c语言中的预处理嘛？c语言中预处理的类型包括不少，其中最不为人知的是“宏定义”，宏定义的做用就是定义一个预设好的常量，而后将代码中出现这个常量的部分，所有使用这个常量预设好的值替换，例如 #define A 5 ，他的意思就是将下文代码中出现的全部A直接替换为5，而这些工做都是在代码编译之前就要进行的，因此宏定义为预处理的一种。

 

      回到咱们的上文，咱们知道css的代码都要写在文件后缀为css的文件中才能进行编译解析，既然sass是预编译工具，可想而知sass的使用必定就会在产生css以前了，嗯，确实是这样的，sass最经常使用的书写方式有两种，他们分别对应着不一样的后缀名 sass、scss,前者沿袭了ruby、python之类语言的语法，使用空格做为语言语法的一部分，然后者更加贴近于广大的前端爱好者，使用咱们css中最多见到的花括号做为语法支持，对于同一段代码区别以下

sass写法: 使用空格做为语法的一部分，本应该是一个空格的地方若出现两个空格则语法报错,且不须要分号结尾    
div     
 width:100px   
 height:100px

scss写法：一如咱们写css通常
div{
    width:100px;   
    height:100px;
}   

须要注意的是两种语法不可在同一文件中混写，可是能够利用工具进行相互的转换。

 

 

经常使用技巧：

 

1.类名嵌套

css代码：   
.div1 .div2{
    background-color:red;
}

sass代码：
.div1{
    .div2{
        background-color:red;
    }
}   
能够看到sass使类名的嵌套更加清晰，类名的权重也会一目了然

 

2.变量

使用$定义一个变量
$mainColor:red;

css写法：  
.div1 .div2{
    background-color:red;
}

sass写法：
 .div1{
    .div2{
        background-color:$mainColor;
    }
} 
更加方便维护和修改

 

3.伪类/伪元素写法

这个写法我当时猛的一看，确实不知道，还纳闷为何这样用，后来一查资料，原来只是伪元素的写法而已   

css写法：   
.clearfix::before{
    content:"";
    ...
}

sass写法：
.clearfix{
    &:before{  //&称为父元素选择器，若是不加则表明选中.clearfix类下全部的元素
        content:"";
        ...
    }
}

这里有个小的注意点就是伪类和伪元素的区别：伪元素是css3中才出现的概念，用两个::来表示，伪类意为向某些选择器添加特殊的效果，而伪元素意为将某些特殊的效果添加到某些选择器上，常见的伪类如link、visited、hover、active这里值得一提的是你们必定要注意个人书写顺序，当这四个伪类要同时出现并使用的时候，他的书写顺序必须与我这个保持一致，不然无效，怎么记呢？lv包听过吗？他好很差？嗯！lvha。。开头字母记住整个单词也就差很少了。经常使用的伪元素就不用说了如after、before、first-letter、first-line等，因此你们必定要知道两点，第一什么时候写几个分号，第二当同时使用多个伪类时的顺序问题。

 

4.代码重用之继承

  看到这里，你们必定要想到上面写到的第2点，变量的定义是为了某个值的复用，想要复用一大段的代码该怎么作呢？可使用如今要介绍的继承咯。sass中的继承有两对关键字 @mixin/@include和@extend，二者的工做原理也大不相同，@mixin为定义一个代码快，@include是将定义好的代码快引入，而@extend则是将现定义好的的类样式引入，熟悉c语言的同窗都知道，include是c语言中宏定义的一种，在这里能够理解为同义，至关于代码拷贝， 因此当咱们的sass解析到这个关键字会直接将@mixin中的代码进行拷贝，而@extend若出如今某个类中则是将当前类名并列到了要继承的类名中去也就是事例中的b的名字会出如今a中，最终的效果是.a,.b即类a类b都会有这个属性。继承是面向对象中的概念，sass中使用@extned关键字,意为拿来主义，简单的理解为你父亲的有的你就能够不要本身再有了，直接拿过来用就好,在咱们sass中经常使用于重复代码引用，前天产品给我提了个需求，他说点击搜索框跳转到新的搜索页面进行搜索，新的页面的搜索框和主页的搜索框大部分相同只有字体的颜色不一致， 此刻难道我要将两部分css都重写一遍？聪明的童鞋想到了，把第一部分写好的继承过来，重写不一样的便可。

css代码:
.a{
    background-color:red
    ....
}
.b{
    //假设b也须要背景为红色等
    @extend .a;
    font-size:24px;
}

在php中也有include等关键字，前端同窗能够查阅相关资料补充本身的知识，如include和require在php中的不一样

 

5.注释

  sass中的注释有两种，一种是咱们在css中使用的/**/，一种是//注释，前者在编码阶段和编译后的阶段都会被保留，然后者只存在于编码阶段，也就是给程序看的咯~

 

6.文件定义

  sass中的文件定义也很简单，咱们只须要知道一点就能够，以_开头的文件名不会被sass编译器编译成css文件，因此他有个见名知意的名字叫 局部文件 而以_下开头的文件中一般会被用做定义一些所有变量，如字体大小颜色等，至少我这个项目是这样作的，如_var.scss文件他的存在形式只会有一种，就是scss后缀结尾的文件，而aa.scss这样的文件，通过sass编译器就会被编译为css文件，咱们知道浏览器的渲染引擎只认css文件。不过此刻问题又来了，那_var.scss该怎么使用呢？

 

7.sass中的import和css中import的区别

  _var.scss文件既然不会被编译为css文件，那就意味着他没有办法被浏览器解析，上文也提到过一般使用他来声明一些变量，那么这些变量将怎么被主文件引用呢？这里咱们依旧使用的是css中就有的一个关键字@import指令，只是sass中的对这个指令进行的了必定的加强，这里须要你们明确一点，在sass中 *_var和var表明同一个文件* ，因此当引入_var这个文件的时候，只须要写var便可，sass中使用@import引入sass文件的时候只须要写上文件名而不须要后缀，这点就和node中使用require引入一个模块是相似的，例如@import "var",这里你们可能会有疑问怎么使用这个指令来引入曾经的css文件，其实咱们上边已经说过@import是sass对css中同名指令的加强，因此当sass判断到@import指令后面出现后缀名、url函数、http等关键字时就会认为你使用的是css中原生的@import指令。

 

关于css中@import的最佳实践，在性能优化方面并不提倡你们在css中常用@import指令，咱们知道当浏览器引擎拿到一个网页文件的时候是先生成dom树，其次构建渲染树进行渲染，而@import是内嵌在css中的，也就是他会比link标签中的css代码晚一步执行，因此使用这个指令会形成页面的卡顿留白。

 

8.属性的连写拆分

  在css中有个称之为属性连写的概念，如padding：5px，其实咱们也能够分写成padding-left、padding-right等，可见这样分写冗余了一个padding关键字，那在sass中要怎样等价替换呢？

css代码
.a{
    padding-left:2px;
    padding-right:2px;
}

sass代码
.a{
    padding{
        left:2px;
        right:2px;
    }
}

 

9.其余

  以上知识sass中最为简单经常使用的一部分，也是做为一个刚入门的新手必然要掌握的一部份内容，关于sass的其余技巧如能够进行带单位的计算、@if、@at-root等指令如若须要你们能够查阅相关的资料加以补充。

 

10.后处理

　　预处理是在生成css代码以前，然后处理包括的内容则是代码的压缩混淆等，这就能够构成一个完整的css工做流了。