CSS語言預處理----SASS一分鐘快速入門

CarlBenjamin 發布于2019-08-29 18:37 / 1069人閱讀

摘要：先安裝下載地址安裝和創建文件變量通用樣式方法繼承缺點編譯后在外面出現該占位符與繼承的區別是不會在外面出現該繼承使用占位符使用方法使用混合宏使用變量使用編譯監聽文件愉快的使用文件吧

1.先安裝ruby

    下載地址https://rubyinstaller.org/

2.安裝sass和compass

     gem install sass
     gem install compass

3.創建scss文件

    @charset "utf-8";
    //變量
    $text-color:#000;
    //通用樣式
    @mixin el1 {
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        -ms-text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
    }
    //方法
    @mixin border-radius($width){
        border-radius:$width;
        -webkit-border-radius:$width;
        -moz-border-radius:$width;
        -o-border-radius:$width;
        -ms-border-radius:$width;
    }
    //繼承(缺點:編譯后在外面出現該css)
    .commonText {
        font-size:22px;
        font-weight:900;
    }
    //占位符(與繼承的區別是,不會在外面出現該css)
    %mt15 {
        margin-top:15px;
    }
    body {
      .box {
        @extend .commonText; // 繼承使用
        @extend %mt15; //占位符使用
        @include border-radius(5px); // 方法使用
        @include el1; // 混合宏使用
        color:$text-color; // 變量使用
        cursor:pointer;
        border:1px solid #ccc;
        width:124px;
        &:hover {
          color:red;
        }
      }    
    }

4.編譯監聽scss文件

    sass --watch index.scss:index.css

5.愉快的使用css文件吧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114449.html

20分鐘gulp快速入門

摘要：所以出現了各種前端構建化工具也應運而生等已經成為現在前端開發工程師的必備技能之一。結語今天的分享就告一段落啦希望能對大家有所幫助。在互聯網告訴發展的今天，自node出現后，我們前端也越來越大（心里美美噠~），同樣帶來的Web業務日益復雜化和多元化，模式也都想webPage模式轉向webApp模式，拼幾個頁面搞幾個jquery的插件就能搞一個完成一個項目的日子已經是很久遠的曾經了，而且...

RichardXG 2019-08-22 15:06 評論0 收藏0
前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

JouyPub 2019-08-02 10:10 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

vslam 2019-08-30 15:53 評論0 收藏0