【css預處理器】------sass的基本語法------【巷子】

00一、安裝sass

一、刪除gem源：gem sources --remove https://rubygems.org/

二、添加國內源：gem sources -a http://gems.ruby-china.org/

三、打印是否替換成功：gem sources -l

四、安裝sass:gem install sass


Linux和Mac已自帶Ruby，不用再安裝，mac同窗安裝：sudo gem install sass
gem sources -a http://gems.ruby-china.org/

gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/

00二、sass的四種編譯風格

nested：嵌套縮進的css代碼，它是默認值。

expanded：沒有縮進的、擴展的css代碼。

 

compact：簡潔格式的css代碼。

compressed：壓縮後的css代碼。

 

00三、編譯sass

1、單個文件編譯：sass 文件名：文件名

2、編譯整個文件夾：sass 文件夾名：文件夾名

三、監聽編譯：sass --watch 文件名:文件名

四、壓縮加編譯：sass --watch test.scss:test.css --style nested

五、編譯整個文件夾：sass sass/:css/

 

00四、sass的基本語法

一、sass中定義變量用$

1、普通變量和默認變量

    普通變量定義了後可在全局使用
　　　

    默認變量僅須要在值後面加!default
    


二、若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中

三、局部變量只能在局部使用，全局變量能夠在任何地方使用

 

二、嵌套

選擇器嵌套：
    ul{
         li{
            color:red;
            &:hover a{
                  color:#000;
               }
          }
    
    }   

&:表明父級     

三、混合宏

做用：能夠重用代碼塊

聲明混合宏：@mixin

調用混合宏：@include


一、不帶參數的混合宏

　　@mixin border-radius{

    　　 -webkit-border-radius:5px;

     　　border-radius:5px;

　　}

 

 

　二、帶參數的混合宏

　

　　@mixin border-radius($radius:5px){

　　　　 -webkit-border-radius:$radius;

 　　　　border-radius:$radius;

　　}

　　若是須要修改則在調用的時候直接修改便可

 

四、繼承

在sass中，經過繼承能夠減小重複的代碼，讓一個選擇器繼承另外一個選擇器的樣式

方法：@extend

.alert{font-size:18px;}

.alert a{
　　text-align:center;
　　&:hover{
　　　　color:red;
　　}
}

div{@extend .alert}

五、@import

@import:引入其餘文件

例如：reset文件  

公共文件的引入：命名規範是如下劃線開頭的，這樣的 scss 文件不會被編譯成 css

_base.scss文件

@import "base";

 

 未完待續.......