compass&sass高級應用

時間 2019-11-07

標籤 compass&sass compass sass 高級應用简体版

原文原文鏈接

一./背景知識/

1.Sass是什麼？

　　Sass能夠簡化你的Css工做流，並能夠使你的Css的擴展和維護工做變的更加容易！例如，曾幾時何，由於客戶的需求的變動，你必須不斷的經過查找和替換來更改一個像素值，或者，爲了可以肯定多欄佈局中某一欄的寬度，你須要使用計算像素值軟件才能搞定。
　　Sass引入了一些新的概念如，變量，混合，嵌套和選擇器繼承.Sass 生成良好格式化的 CSS 代碼，易於組織和維護。
　　SASS是對CSS3（層疊樣式表）的語法的一種擴充，它能夠使用巢狀、混入、選擇子繼承等功能，能夠更有效有彈性的寫出Stylesheet。
　　Sass最後仍是會編譯出合法的CSS讓瀏覽能夠使用，也就是說它自己的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法很是的像，幾乎同樣），由於它不是標準的CSS格式，在它的語法內部能夠使用動態變量等，因此它更像一種極簡單的動態語言。css

2.Compass是什麼?

　　Compass由SASS的核心團隊成員Chris Eppstein建立，是一個很是豐富的樣式框架，包括大量定義好的mixin，函數，以及對SASS的擴展。web

二./Sass和Compass安裝/

// SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，而後再安裝SASS。瀏覽器

// 假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：sass

1.gem安裝Sass
  C:\Users\DELL>gem install sass

2.查看Sass版本
  C:\Users\DELL>sass -v
  Sass 3.4.13 (Selective Steve)

3.編譯Sass文件
  sass main.scss main css
  // 通常不多使用sass命令,通常都是用Compass命令;

4.gem安裝Compass
  C:\Users\DELL>gem install compass

5.查看Compass版本
  C:\Users\DELL>compass -v
  Compass 1.0.3 (Polaris)

6.Compass搭建項目
  C:\Users\DELL\compass create sass
  // 結果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5   directory sass/
  directory sass/sass/                  // sass文件所在目錄;
  directory sass/stylesheets/           // css文件所在目錄;
     create sass/config.rb              // 項目配置文件;
     create sass/sass/screen.scss       // 主要針對屏幕的sass文件;
     create sass/sass/print.scss        // 主要針對打印設備;
     create sass/sass/ie.scss           // 主要針對IE瀏覽器;
      write sass/stylesheets/ie.css
      write sass/stylesheets/print.css
      write sass/stylesheets/screen.css // scss文件編譯後對應的css文件;最終將引入到HTML中的文件;

  // You may now add and edit sass stylesheets in the sass subdirectory of your project.
  // 你如今能夠在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和編輯項目的樣式表;

  // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
  // Sass文件以"_"開頭的叫作局部文件,不會被編譯成CSS;但它們能夠被引入到其餘Sass文件中;

  // You can configure your project by editing the config.rb configuration file.
  // 你能夠經過編輯config.rb配置文件來配置項目信息; 

  // You must compile your sass stylesheets into CSS when they change.
  // 當Sass文件被修改後,必需要編譯Sass文件到CSS;

  // 1. To compile on demand:                   // 直接編譯;                      
  // compass compile [path/to/project]
  // 2. To monitor your project for changes and automatically recompile:  
  // compass watch [path/to/project]            // 監聽項目變化而且自動編譯; 

  // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
  // <head>
  //   <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  //   <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  //   <!--[if IE]>
  //       <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  //   <![endif]-->
  // </head>
  // 將編譯後的文件引入到HTML頁面中;

三./Sass語法基礎/

1.scss和sass文件轉換
  sass-convert main.scss main.sass
  // 將scss文件轉換爲sass文件;

2.開啓監聽編譯
C:\Users\DELL>cd sass
// 進入項目文件夾;
C:\Users\DELL\sass>compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
// 開啓監聽並自動編譯;

3.變量
  // Sass經過"$"聲明變量;
  >1.聲明變量
    $headline-ff:"宋體",Arial,sans-serif;
    $main-sec-ff:Arial,sans-serif;
  >2.引用變量
    .headline {
      font-family: $headline-ff;
    }
    .main-sec {
      font-family: $main-sec-ff;
    }

4.@import引入文件
  >1.新建局部文件
    _variables.scss
    // 以"_"開頭的局部文件,不會被編譯到css;做爲引入文件使用;
  >2.@import引入文件
    @improt "variables";
    // 基於Sass的既定規則:
    // 1.沒有文件後綴名的時候,sass會添加.scss或.sass的後綴;
    // 2.用同一目錄下,局部文件和非局部文件不能重名;
  >3.使用css原生@import的既定規則:
    >>1.當@import後邊跟的文件名是以".css"結尾的時候;
    >>2.當@import後邊跟的是"http://"開頭的字符串的時候;
    >>3.當@import後邊跟的是一個url()函數的時候
    >>4.當@import後邊帶有media queries的時候;

5.註釋
  >1.以"/**/"註釋的內容最後被輸出到了對應的css文件中;
  >2.以"//"註釋的內容則沒有輸出到對應的css文件;

6.類嵌套語法
  .main-sec{
    font-family: $main-sec-ff;
    .headline {
      font-family: $main-sec-ff;
    }
  }

7.屬性嵌套語法
  .headline {
    font:{
      family:$main-sec-ff;
      size:16px;
    }
  }

8.父類選擇器(自身調用)
  a {
    &:hover {
      color:red;
    }
  }

四./Sass進階語法/

1.變量操做
  >1.直接操做變量,即變量表達式;
  >2.經過函數;
    >>1.跟代碼塊無關的函數,可能是本身內置函數,稱爲functions;
    >>2.可重用的代碼塊:稱爲mixin;
      >>>1.@include;                // 以複製/拷貝的方式存在;
      >>>2.@extend;                 // 以組合聲明的方式存在;

2.顏色值轉換;
  Sass:
    color:hsl(270,100%,50%);
  Css:
    color:#7f00ff;

3.@mixin引用
  Sass:
    @mixin col-6 {                   // 聲明col-6()函數;
      width:50%;
      float:left;
    }
    .webdemo-sec {
      @include col-6                 // 經過@include引入@col-6()函數;而且能夠引入多個;
      &:hover {                      // &:表示父類選擇器;
        background-color:#f5f5f5;
      }
    }
  Css:
    .webdemo-sec {                   // 繼承了col-6()函數的屬性值;
      width:50%;
      float:left;
    }
    .webdemo-sec:hover {             // 經過"&"調用到自己;
      background-color:#f5f5f5;
    }

4.@mixin包含參數引用;
  Sass:
    @mixin col($width:50%){           // 設置默認參數值;不傳參數時,屬性值爲默認;
      width:$width;
      float:right;
    }
    .webdemo-abc {
      @include col(60%);              // 設置傳參數;
    }
  Css:
    .webdemo-abc {
      width:60%;                      // 編譯後的屬性值;
      float:right;
    }

5.@extend繼承
  >1.extend不能夠繼承選擇器序列;
  >2.使用%,用來構建只用來繼承的選擇器;
  Sass:
    .error {
      color:#f00;
    }
    %error {                          // 構建只用來要繼承的選擇器;
      background:#0f0;
    }
    .serious-error {
      @extend .error;
      @extend %error;
      border:1px solid #f00;
    }
  Css:
    .error, .serious-error {          // 繼承自.error;
      color:#f00;
    }
    .serious-error {                  // 繼承自%serious-error;
      background:#0f0;
    }
    .serious-error {                  // 本身的屬性;
      border:1px solid #f00;
    }

五./Sass高級語法/

1.@media用法
// Sass中的@media與Css中的@media區別:
// 1.Sass中的media query能夠內嵌在css規則中;
// 2.在生成css的時候,media query纔會被提到樣式的最高級;
// 3.好處:避免了重複書寫選擇器或者打亂樣式表的流程;
  Sass:
    @mixin col-sm ($width:50%){
      @media (min-width:768px){
        width:$width;
        float:left;
      }
    }
    .webdemo-sec {
      @include col-sm();
    }
  Css:
    @media (min-width:768px){
      .webdemo-sec {
        width:50%;
        float:left;
      }
    }

2.@at-root指令
// 嵌套反作用:增長了樣式修飾的權重;製造了樣式位置的依賴;
  Sass:
    .main-sec {
      font-size:12px;
      @at-root {                        // 在嵌套的時候使用@at-root指令;
        .main-sec-headline {            // 指定被嵌套的內容輸出到樣式表的頂層;
          font-size:16px;
        }
        .main-sec-detail {
          font-size:14px;
        }
      }
    }
  Css:
    .main-sec {
      font-size:12px;
    }
    .main-sec-headline {　　　　　　　　　// 編譯後成功輸出到樣式表的頂層; 
      font-size:16px;
    }
    .main-sec-detail {
      font-size:14px;
    }

3.if操做符
  @mixin col-sa ($width:50%){
      // 使用type-of()方法:檢測$width是不是數值類型;
      @if type-of($width) != number {
          // #{}:能夠引用Sass的變量;--Ruby語法;
          // @error:表示錯誤信息;
          @error "$width必須是一個數值類型,你輸入的width是:#{$width}.";
      }

      // 使用unitless()方法:判斷當前的數值是否跟有單位;
      // 前置not表示否認,雙重否認表示確定;
      @if not unitless($width){             // 判斷數值有單位;
          @if unit($width) != "%" {         // 若是單位不是%;
              @error "$width必須是一個數值類型,你輸入的width是:#{$width}.";
          }
      } @else {                             // 判斷數值沒有單位;
          @warn "$width必須是一個數值類型,你輸入的width是:#{$width}.";
          $width:(percentage($width)/100);  // 換算成帶%單位的數值;
      }
      @media (min-width:768px){
          width:$width;
          float:left;
      }
  }

4.Sass的輸出格式
// 在config.rb配置文件裏;
  >1.output_style = :expanded or :nested or :compact or :compressed
    >>0.:expanded   => 編譯後的文件是展開的;
    >>1.:nested     => 根據嵌套,在輸出的時候代碼縮進;
    >>2.:compact    => 將全部的屬性彙總到一行;選擇器之間的關係更清晰;
    >>3.:compressed => 將全部的代碼壓縮以佔用最小的空間;