手機專用的自適應方案 以及sass安裝使用

1. 什麼是 REM

2. REM 和 EM 的區別是什麼

    

   圖片

    

3. 手機端方案的特色

   1. 全部手機顯示的界面都是同樣的，只是大小不一樣
   2. 1 rem == html font-size == viewport width
4. 使用 JS 動態調整 REM
   http://js.jirengu.com/xoqadocuqu/2/edit?html,css,output

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        var pageWidth = window.innerWidth
        document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
    </script>

5. REM 能夠與其餘單位同時存在

   font-size: 16px;
    border: 1px solid red;
    width: 0.5rem;

6. 1. 在 SCSS 裏使用 PX2REM

      • npm config set registry https://registry.npm.taobao.org/
      • touch ~/.bashrc
      • echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
      • source ~/.bashrc
      • npm i -g node-sass
      • mkdir ~/Desktop/scss-demo
      • cd ~/Desktop/scss-demo
      • mkdir scss css
      • touch scss/style.scss
      • start scss/style.scss

      • node-sass -wr scss -o css

        編輯 scss 文件就會自動獲得 css 文件

        在 scss 文件裏添加

        便可實現 px 自動變 rem@function px( $px ){
          @return $px/$designWidth*10 + rem;
        }
        
        $designWidth : 640; // 640 是設計稿的寬度，你要根據設計稿的寬度填寫。若是設計師的設計稿寬度不統一，就殺死設計師，換個新的。
        
        .child{
          width: px(320);
          height: px(160);
          margin: px(40) px(40);
          border: 1px solid red;
          float: left;
          font-size: 1.2em;
        }

 

 

 sass 安裝 https://www.sass.hk/install/ 打開sass中文教程

下面就可使用了。

1，在桌面新建一個文件夾。測試一下。打開編輯器新建前端三劍客。html，css，js。新建一個style.scss的文件。按照教程中的sass語法進行編譯便可

使用 Sass 進行開發，那麼是否是直接經過「<link>」引用「.scss」或「.sass」文件呢？

那麼這裏告訴你們，在項目中仍是引用「.css」文件，Sass 只不過是作爲一個預處理工具，提早幫你作事情，只有你須要時候，他纔有攻效。

這樣一來，也就有了這章須要介紹的內容—— Sass 的編譯。由於 Sass 開發以後，要讓 Web 頁面能調用 Sass 寫好的東西，就得有這麼一個過程，這個過程就稱之爲 Sass 編譯過程。Sass 的編譯有多種方法：命令行編譯，GUI圖形編譯 Koala (http://koala-app.com/)  自動動化編譯的同窗，應該都知道 Grunt 和 Gulp

運行命令行編譯;（我以爲是很簡單的）

//單文件轉換命令 sass input.scss output.css //單文件監聽命令 sass --watch input.scss:output.css //若是你有不少的sass文件的目錄，你也能夠告訴sass監聽整個目錄： sass --watch app/sass:public/stylesheets

到這裏，基本上就可使用sass了。這裏有一個很迷惑的地方。就是sass與scss的關係。咱們是學習sass的怎麼使用scss的。這就要往前說歷史了。喜歡探究的能夠GG一下。總之你知道scss所屬於sass就能夠了。

 

使用技巧：

1，css嵌套輸出方式（就是css縮進的方式）

1. 嵌套輸出方式 nested
2. 展開輸出方式 expanded  
3. 緊湊輸出方式 compact 
4. 壓縮輸出方式 compressed

 

編譯的時候能夠定義 sass --watch test.scss:test.css --style nested

2，在瀏覽器編輯直接更改、不須要在複製粘貼了，簡直是神器。

Sass 調試一直以來都是一件頭痛的事情，使用 Sass 的同窗都但願能在瀏覽器中直接調試 Sass 文件，能找到對應的行數。值得慶幸的是，如今實現並非一件難事，只要你的瀏覽器支持「sourcemap」功能便可。早一點的版本，須要在編譯的時候添加「--sourcemap」  參數：

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

在 Sass3.3 版本之上（我測試使用的版本是 3.4.7），不須要添加這個參數也能夠：

sass --watch style.scss:style.css

在命令終端，你將看到一個信息：

>>> Change detected to: style.scss
  write style.css
  write style.css.map

這時你就能夠像前面展現的 gif 圖同樣，調試你的 Sass 代碼

(這種方法可能有的人作會有問題)

下面有一種更簡單的

 

sass 使用教程

1.聲明變量用 「$」    $width:300px;  寫法與css同樣、聲明變量後下面都使用變量。後期維護草雞方便。

變量分爲普通變量和默認變量、  局部變量、全局變量、默認變量後面須要加  ！default；全局變量定義在上面。局部變量定義在選擇器內。調用方法都是同樣的、

那麼上面時候聲明變量呢？？？

個人建議，建立變量只適用於感受確有必要的狀況下。不要爲了某些駭客行爲而聲明新變量，這絲毫沒有做用。只有知足全部下述標準時方可建立新變量：

 

1. 該值至少重複出現了兩次；
2. 該值至少可能會被更新一次；
3. 該值全部的表現都與變量有關（非巧合）。

 

 

Sass]嵌套-選擇器嵌套

• 選擇器嵌套  原理就是省略父級。
• 屬性嵌套    一種熟悉有多種值的。好比font，border等等。
• 僞類嵌套     & 表明嵌套規則外層的父選擇器
• 若是你的整個網站中有幾處小樣式相似，好比顏色，字體等，在 Sass 可使用變量來統一處理，那麼這種選擇仍是不錯的。但當你的樣式變得愈來愈複雜，須要重複使用大段的樣式時，使用變量就沒法達到咱們目了。這個時候 Sass 中的混合宏就會變得很是有意義。在這一節中，主要向你們介紹 Sass 的混合宏。聲明時候調用的時候前面加上  @include  變量名。 聲明混合宏的時候還能夠傳參數
  
• @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; }       使用的時候就能夠 @include border-radius(10px); 聲明的時候也能夠給默認值：@mixin border-radius($radius（10px）){ -webkit-border-radius: $radius; border-radius: $radius; }        $radius;=10px(牛逼的是能夠傳多個參數)

• 佔位符

  Sass 中的佔位符 %placeholder 功能是一個很強大，很實用的一個功能，這也是我很是喜歡的功能。他能夠取代之前 CSS 中的基類形成的代碼冗餘的情形。由於 %placeholder 聲明的代碼，若是不被 @extend 調用的話，不會產生任何代碼。來看一個演示：

  %mt5 {
    margin-top: 5px;
  }
  %pt5{
    padding-top: 5px;
  }

• //SCSS
  %mt5 {
    margin-top: 5px;
  }
  %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }編譯出來的代碼相同的樣式會自動合併（.btn, .block { margin-top: 5px; }）

 今天又點看不下去了。暫停一下