sass

当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。只需要在你的命令终端输入一行命令即可。

1、通过命令安装 Sass

打开电脑的命令终端,输入下面的命令:

gem install sass

sass -v //查看版本是否安装成功

gem update sass//更新到最新的sass版本

gem uninstall sass//卸载sass(不要点)

ws配置路径:program:C:\Ruby23-x64\bin\sass.bat

mixin

@mixinalert($color:blue){color:$color;}.block{margin:10px;padding:20px;  @includealert(#fff);}

扩展继承

.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{  @extend.message;border-color: green;}

运算

.a{width:100px+200px;}

颜色

$color1:red;.div{background: darken($color1,10%);}

$padding:10px5px10px5px;.div{padding:$padding;padding-left: nth($padding,2);}

$maps:(color:red,background:blue);.div{background:map-get($maps,background);}

@at-root.con{//跳出嵌套}

@functiondobule($cc){  @return$cc*2;}.ccc{width:dobule(5px);}

$aa:8;.c{content: #{$aa};}

$srceen:800;@if$srceen> 900{body{background: yellow;  }}@else{body{background: blue;  }}

@for$i from1to5{  .span#{$i}{    width:20% * $i;  }}

.#{content}{background: red;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基础 声明变量 普通变量 默认变量 变量覆盖:只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 5,084评论 0 1
  • 学习Sass(官网:Sass)之前需要了解什么是Sass,Sass全称:Syntactically Awesome...
    haoxilu阅读 3,550评论 0 3
  • Sass入门与实战 **Sass is the most mature, stable, and powerful...
    2f3abe35f5ac阅读 3,964评论 0 2
  • http://www.w3cplus.com/sassguide/http://www.ruanyifeng.co...
    简不简单_都好阅读 3,173评论 0 0
  • 职场过当 永远记不住自己该做的事情,让老员工追在屁股后面提醒;大毛病没有,小问题不断,毛毛躁躁没有消停的时候;同一...
    承思而行阅读 1,592评论 0 0