CSS语言预处理----SASS一分钟快速入门

2019年9月13日 132次阅读 来源: 青火

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文件吧

《CSS语言预处理----SASS一分钟快速入门》

    原文作者：青火
    原文地址: https://segmentfault.com/a/1190000018883333
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞