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

CarlBenjamin 发布于2019-08-29 18:37 / 899人阅读

摘要：先安装下载地址安装和创建文件变量通用样式方法继承缺点编译后在外面出现该占位符与继承的区别是不会在外面出现该继承使用占位符使用方法使用混合宏使用变量使用编译监听文件愉快的使用文件吧

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快速入门 r语言快速入门 nlp自然语言处理入门三分钟入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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