CSS語言預(yù)處理----SASS一分鐘快速入門

CarlBenjamin 發(fā)布于2019-08-29 18:37 / 1057人閱讀

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

1.先安裝ruby

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

2.安裝sass和compass

     gem install sass
     gem install compass

3.創(chuàng)建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;
    }
    //繼承(缺點:編譯后在外面出現(xiàn)該css)
    .commonText {
        font-size:22px;
        font-weight:900;
    }
    //占位符(與繼承的區(qū)別是,不會在外面出現(xiàn)該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.編譯監(jiān)聽scss文件

    sass --watch index.scss:index.css

5.愉快的使用css文件吧

GPU云服務(wù)器云服務(wù)器 css快速入門 r語言快速入門 nlp自然語言處理入門三分鐘入門

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114449.html

相關(guān)文章

20分鐘gulp快速入門

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

RichardXG 2019-08-22 15:06 評論0 收藏0
前端相關(guān)匯總

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

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

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

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

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

vslam 2019-08-30 15:53 評論0 收藏0
前端資源分享-只為更好前端

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

zxhaaa 2019-08-22 16:11 評論0 收藏0