sass從安裝到放棄

時間  2019-12-04
標籤 sass 安裝 放棄 简体版
原文   原文鏈接

sass學習

Sass 能夠經過如下三種方式使用：做爲命令行工具；做爲獨立的 Ruby 模塊 (Ruby module)；或者做爲 Rack-enabled 框架的插件（例如 Ruby on Rails 與 Merb）。css

1.安裝

ruby安裝

因爲SASS是在Ruby環境下運行，因此首先須要在本身的電腦上安裝Ruby。html

1.在Mac系統下，Ruby通常已內置在其中，查看是否安裝:ruby -vgit

2.在windows系統下，先到官網下載個ruby
在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境github

sass安裝

1.標準穩定版安裝（推薦!!!）web

gem install sass

有的時候在Linux和OS X系統下，可能須要超級管理員權限才能安裝：windows

sudo gem install sass

2.Beat版本安裝 ( 若想要獲取SASS的一些最新變化和最新功能，安裝一個Beat版本的SASS，會自動建立每次更改的主分支 )瀏覽器

gem install sass --pre

3.從Git庫中安裝緩存

git clone git://github.com/nex3/sass.git
    cd sass
    rake install

Windows系統下安裝SASS，能夠點擊這裏。sass

查看你安裝的sass：sass -vruby

安裝sass庫

1.安裝Compass庫

Compass是一個很是成熟的SASS庫，但是一個很強大的框架，使用的頻率也至關的高。若是您瞭解了Compass，那麼他將會讓你受益無窮。一樣的，在你的項目中使用Compass，須要先安裝Compass。

gem install compass

2.安裝Bourbon庫

gem install bourbon

2.建立第一個sass項目

mySass

sass ==> 新建style.scss/style.sass

css <== 編譯後的style.css文件

sass有兩種後綴名文件：一種後綴名爲.sass，不使用大括號和分號；另外一種就是.scss文件，這種和咱們平時寫的css文件格式差很少，使用大括號和分號。

注：建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。任何一種格式均可以直接導入（@import）到另外一種格式之中使用，或者經過sass-convert命令工具轉換格式：

//sass To scss
sass-convert style.sass style.scss;
//scss To sass
sass-convert style.scss style.sass;

Sass 還會自動緩存編譯後的模板，這樣作可以顯著提高從新編譯的速度，尤爲在處理由 @import 導入多個子文件的大型項目時。單獨使用 Sass，緩存內容保存在 .sass-cache 文件夾中。

3.sass語法

1.變量：sass容許使用變量，全部變量以$開頭

$blue : #1875e7;
div {
    color : $blue;
}

一個變量含有多個值，如$i : 12px 15px 16px 14px
取第index個值時nth($i,index)

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

$side : left;
.rounded{
    border-#{$side}-radius : 5px;
}

普通（局部）變量:用$base:1.6 !global能夠將局部變量轉爲全局變量

默認（全局）變量：用$base:1.6 !default聲明爲全局變量

注意：

  • 變量<font color="red">聲明順序</font>問題：必須在調用變量語句的上面，這樣才能正確的調用變量。

  • 變量有<font color="red">做用域</font>的問題（全局變量、局部變量）：代碼段a內不可引用代碼段b內定義的局部變量。

  • 變量<font color="red">重名</font>問題：3.4版本中無重名問題，可是早期的版本中若是咱們在本地從新定義了一個全局變量，這將是新的全局變量。因此，在咱們的示例中編譯樣式時取決於咱們聲明的變量的順序和mixin的順序。

2.計算功能：sass容許在代碼中使用算式（運算的時候，會以空格做爲分割，會操做相鄰的兩個數值）

$a : 100px;
body{
    padding-top : (14px / 2);        //7px
    margin : 3px + 4px auto;        //7px auto
    top : 50px + 100px;        //150px
    right : $a * 10%;    //10px
}

a）.sass中的加法
加法運算還能夠作字符串拼接功能，如：

p {
  cursor: e + -resize;
}

輸出爲：p { cursor: e-resize; }

加法鏈接字符串時，對於引號的合併也有必定規則，若是前面字符串帶有引號，後面字符串會自動包含在引號中，若是前面沒有，後面帶有引號的字符串也會去掉引號：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

輸出爲：

p:before {
    content: "Foo Bar";
    font-family: sans-serif; 
}

若是在字符串中計算並輸出，須要用到#{}，例如：

$w : 10;
p:before{
    content : "I ate #{5 + $w} pies!";
}

輸出爲：

p:before{
    content : "I ate 15 pies!"；
}

b).sass中的除法

p {
  font: 10px/8px;             // 純 CSS 不會運算
  $width: 1000px;
  width: $width/2;            // 使用變量，執行運算
  width: round(1.5)/2;        // 使用函數返回值，執行運算
  height: (500px/2);          // 使用括號包裹，執行運算
  margin-left: 5px + 8px/2px; // 用了加法，做爲表達式的一部分，執行運算
}

編譯後輸出爲：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

<mark>注意事項：</mark>

*建議運算符之間空開一個空格。

*注意運算單位。單位也會參與運算。

  • 加法：都沒有單位輸出純數字；一方有單位，則結果輸出該單位；兩方相同單位，結果輸出該單位；雙方單位不一樣，若是能換算換算爲前一個進行運算，單位爲前者，若是不能則報錯。

  • 減法：相似加法。

  • 除法：兩方相同單位，結果無單位；都沒有單位，結果無單位；一方有單位另外一方無單位，報錯。

  • 乘法：兩方相同單位，報錯；一方有單位，結果輸出該單位；兩方都無單位，輸出無單位。

Tips：顏色的計算爲分段計算，如：.main-col{ color: #106021 + #023212; }結果爲：.main-col{color : #129233};
計算方法：10+02=12 、60+32=92 、21+12=33 ==>129233

3.嵌套：sass容許選擇器嵌套

如，原始css方式：

div{
    background : blue;
}
div h1{
    color : red;
}

sass支持以下寫法：

div{
    background : blue;
    h1{
        color : red;
    }
}

屬性也能夠嵌套。好比border-color,能夠寫成：

p{
    border : {
        color : red;
    }
}

<mark>注意：border後面必須加上冒號</mark>

咱們也須要在嵌套結構中引用父級選擇器，這時候就能夠用 & 符號代替父級選擇器。好比a:hover僞類，能夠寫成：

a {
    &:hover { color: #ffb3ff; }
}

4.導入：sass中如導入其餘sass文件，最後編譯爲一個css文件，優於純css的@import

@import命令，用來插入外部文件，注意默認無後綴名時是引入.sass或.scss文件。

@import "path/fileName";

導入Sass但不輸出Css--局部文件：那些專門爲 @import 命令而寫的 Sass 文件，並不須要生成對應的獨立 CSS 文件，這樣的 Sass 文件被稱爲局部文件。對此，Sass約定局部文件的文件名如下劃線 _ 開頭。這樣，Sass 就不會在編譯時單獨編譯這個文件輸出 CSS 了，而僅僅是把這個文件做爲導入用途。Sass 更高效的地方在於，導入這樣的文件時，咱們還能夠省略文件名中開頭的下劃線 _，例如，咱們須要導入文件 themes/_night-sky.scss，咱們能夠僅僅寫

@import "/themes/_night-sky";

如下幾種狀況插入的是.css文件，則等同於css的import命令。

@import "foo.css"    //後綴名爲.css
@import "css/style.css"    // 被導入文件的名字是 CSS 的 url() 值
@import "url(.....)"    //被導入文件是一個 URL 地址形式給出的

和css中@import的區別：

  • css中用到了再去下載，而sass編譯時直接導入到當前文件

  • sass中導入可省略後綴名，默認爲.sass格式或者.scss格式

5.擴展/繼承(@extend)：

sass容許一個選擇器，繼承另外一個選擇器。如，class2繼承class1的屬性：

.class1{
    border : 1px solid #ddd;
}
.class2{
    @extend .class1;
    font-size : 12px;
}

按需求輸出的@extend,帶有 % 符號的選擇器不會被編譯輸出，可是能夠被 @extend 到，替換以後輸出，例如：

#context a %extreme {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }
    .notice {
      @extend %extreme;
    }
        #context .title .notice2 {
      @extend %extreme;
    }

會輸出：

#context a .notice, 
    #context a .title .notice2, 
    #context .title a .notice2 {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }

6.Mixin：Mixin是能夠重用的代碼塊。

a).基礎用法

@mixin left{
    float : left;
    margin-left : 10x;
}
//使用@include命令，調用這個mixin
div{
    @include left;
}

輸出：

div{
    float : left;
    margin-left : 10px;
}

b).傳遞參數

@mixin font($color, $fontSize: 14px) {
    color: $color;
    font-size: $fontSize;
}
p { @include font(blue); }
h1 { @include font(blue, 20px); }
h2 { @include font($fontSize: 18px,$color: red); }

輸出：

p {
  color: blue;
  font-size: 14px;
}
h1 {
  color: blue;
  font-size: 20px;
}
h2 {
  color: red;
  font-size: 18px;
}

c）.@mixin 傳遞多值參數

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
    
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

輸出：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

此外，多值參數還能夠用在 @include 傳參的時候，分解某個變量值，例如：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
    
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
    
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

輸出：

.primary {
  color: red;
  background-color: lime;
  border-color: blue;
}
    
.secondary {
  color: lime;
  background-color: blue;
  border-color: red;
}

d）.向 @mixin 傳遞內容

定義的一個選擇器或者一段代碼片斷，在其中添加了 @content 這個命令。當使用 @include 命令使用這條 mixin 的時候，將一段內容包裹了起來，這段被包裹的內容就會替換掉 @mixin 中的 @content。

@mixin apply-to-iphone5 {
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) { 
        @content;
    }
}
@include apply-to-iphone5 {
  #logo {
    background-image: url(/logo@2x.gif);
  }
}

輸出：

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  #logo {
    background-image: url(/logo@2x.gif);
  }
}

@mixin和@extend的區別：

@mixin 定義的是一個片斷，這個片斷能夠是相似變量的一段文字一條屬性，也能夠是一整個選擇器和內容，也能夠是一個選擇器的一部分 CSS 代碼。此外還能夠傳遞參數，經過參數生成不一樣代碼。它須要配合 @inclde 命令來引用這段代碼，相似複製的效果。@mixin 定義的內容，不會編譯輸出。

@extend 就是簡單的擴展，基於某個選擇器，將其餘相似需求的選擇器掛靠上，以提升複用程度

7.流程控制語句（@if、@for、@each、@while）

a.）if判斷

p {  
    @if 1 + 1 == 2 {  
        width:30px;  
    }@else {  
        width:100px;    
    }  
}

編譯結果爲p { width: 30px; } ;
這是半透明rgba背景的一段代碼，高級瀏覽器用rgba，ie6-8若是開啓濾鏡用濾鏡，不開啓濾鏡就用純色，經常使用於圖片下方浮現標題。至於多條件的，能夠參考sass揭祕之@mixin,%,@function裏面的神來之筆的@mixin prefixer

$filter:false !default; //是否開啓ie濾鏡
//背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color:#fff;
  @if $filter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  }@else{
    background-color: #333;
  }
  background-color:$bgcolor;
}

and,or,not分別表示與、或、非（@if not($a)、@if $a or $b）

==等於，!=不等於（@if $a != $b）

b）.@forfor循環有兩種形式，分別爲：@for $var from through 和@for $var from to 。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

$gridColumns:      5 !default;
$gridcolumnWidth:  60px !default;
$gridGutter:       20px !default;

%span-base{
    float:left;
    margin-left:$gridGutter / 2;
    margin-right:$gridGutter / 2;
}
@for $i from 1 through $gridColumns {
    .span#{$i} {
        @extend %span-base;
        width:($gridcolumnWidth + $gridGutter) * $i - $gridGutter;
    }
}

輸出爲：

.span1, .span2, .span3, .span4, .span5{
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}

c).@while@while 和 @for 命令是很是接近的，只不過 @while 循環能夠本身定義步長,屢次輸出，直到該語句的嵌套樣式的計算結果爲false,如：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

輸出爲：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

d).@each語法：@each $var in

$sprite: puma sea-slug egret salamander !default;
%sprite-animal{
    background: url('/images/animal.png') no-repeat;
}
@each $animal in $sprite {
    .#{$animal}-icon {
        @extend %sprite-animal;     
        background-position:0 -(index($sprite,$animal)*30px);
    }
}

輸出爲：

.puma-icon, .sea-slug-icon, .egret-icon, .salamander-icon {
  background: url("/images/animal.png") no-repeat;
}

.puma-icon {
  background-position: -30px;
}

.sea-slug-icon {
  background-position: -60px;
}

.egret-icon {
  background-position: -90px;
}

.salamander-icon {
  background-position: -120px;
}

8.自定義函數

SASS容許用戶編寫本身的函數。

@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

9.經常使用顏色函數

a）.RGB 顏色只是顏色中的一種表達式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍色。在 Sass 中爲 RGB 顏色提供六種函數：

  • rgb($red,$green,$blue)：根據紅、綠、藍三個值建立一個顏色；

  • rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值建立一個顏色；
    rgba($color,$alpha):根據顏色和透明度值創造一個顏色

  • red($color)：從一個顏色中獲取其中紅色值；

  • green($color)：從一個顏色中獲取其中綠色值；

  • blue($color)：從一個顏色中獲取其中藍色值；

  • mix($color-1,$color-2,[$weight])：把兩種顏色混合根據混合比例混合在一塊兒，默認值50%。

b).lighten()& darken()函數

lighten()和darken()兩個函數都是圍繞顏色的亮度值作調整的，其中lighten()函數會讓顏色變得更亮，與之相反的darken()函數會讓顏色變得更暗。這個亮度值能夠是0~1之間，不過經常使用的通常都在3%~20%之間。

$baseColor: #ad141e;
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

c).ie-hex-str()函數

這個函數常配合IE濾鏡使用，主要用來轉譯出適合IE濾鏡的顏色代碼，如：

ie-hex-str(#abc)        //    "#FFAABBCC"
ie-hex-str(#3322BB)        //    "#FF3322BB"
ie-hex-str(rgba(0, 255, 0, 0.5))        //    "#8000FF00"

10.註釋

  • 標準的CSS註釋 /*comment*/,會保留到編譯後的文件。

  • 單行註釋 //comment,只保留在sass源文件中，編譯後被省略。

  • 重要註釋 /*!comment*/,即便壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。

4.sass轉譯

1.單文件轉譯

轉譯命令：

sass sass/style.scss css/style.css

動態監聽轉譯

使用sass轉譯.scss文件，有一個不足之處，就是咱們修改了.scss文件，不會自動轉譯。這樣一來，咱們要時時查看轉譯出來的CSS樣式就比較麻煩。那麼咱們只須要在sass命令的基礎上添加一個參數--watch就能夠。

sass --watch sass/style.scss:css/style.css

這樣一來，你能夠看到提示：

>>> Sass is watching for changes. Press Ctrl-C to stop.
  overwrite sass/style.css

2.多文件轉譯

雖然sass和sass --watch都達到咱們轉譯.scss文件功能，但在實際項目中，咱們的項目中不可能只存有一個.scss文件。因此咱們須要一種方法，能夠<font color="red">同時將多個.scss文件轉譯成.css文件。</font>其實在SASS中，能夠直接將整個目錄中的全部.scss文件轉譯成全部的.css文件，並放到另外一個CSS目錄中，其命令以下所示：

sass --watch sass/:css/

這樣一來，只要是sass中全部的.scss文件均可以轉譯成.css文件，而且都放在了css目錄中

<mark>特別強調：</mark>若是使用sass --watch轉譯.scss樣式，首先須要安裝rb-fsevent，若是沒有安裝就執行sass --watch將沒法執行時時監控.scss轉譯成.css。安裝方法：

gem install --version `~>0.9` rb-fsevent

3.sass的四種編譯風格(輸出格式)

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

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

  • compact：簡潔格式的css代碼。

  • compressed：壓縮後的css代碼。

<mark>生產環境中通常使用最後一個選項</mark>

sass --style compressed sass/style.scss css/style.css

4.css轉譯爲sass

sass-convert css/style.css sass/style.scss

參考資料：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程