三言兩語之簡單上手sass-html教學-PHP中文網

背景：

初次接手公司的專案,雖然之前草草的看過一些sass的基礎知識，但是因為久未徵戰，知識也早已隨風飄散，現在小複習一下記下一些常識中的重點。。 sass是使用ruby寫的，所以使用前請先確保自己的機子中有了ruby的開發環境，在cmd下使用 ruby -v 命令可以查看當前的ruby版本。

簡介及概述：

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中最常見到的花括號作為語法支持，對於同一段代碼區別如下

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

scss写法：一如我们写css一般
div{
    width:100px;   
    height:100px;
}   <br>
</code>

登入後複製

需要注意的是兩種語法不可在同一文件中混寫，但是可以利用工具進行相互的轉換。

常用技巧：

1.類別名稱嵌套

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

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

登入後複製

2.變數

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

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

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

登入後複製

3.偽類/偽元素寫法

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

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

sass写法：
.clearfix{
    &:before{  //&称为父元素选择器，如果不加则代表选中.clearfix类下所有的元素
        content:"";
        ...
    }
}<br>
</code>

登入後複製

這裡有個小的注意點就是偽類和偽元素的區別：偽元素是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都重寫一遍？聰明的童鞋想到了，把第一部分寫好的繼承過來，重寫不同的就好。

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

登入後複製

在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中要怎样等价替换呢？

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

sass代码
.a{
    padding{
        left:2px;
        right:2px;
    }
}
</code>

登入後複製

9.其他

以上知识sass中最为简单常用的一部分，也是作为一个刚入门的新手必然要掌握的一部分内容，关于sass的其他技巧如可以进行带单位的计算、@if、@at-root等指令如若需要大家可以查阅相关的资料加以补充。