sass

作者: 咪_ | 来源:发表于2017-03-21 11:57 被阅读0次

当你的电脑中安装好 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;}

相关文章

  • SASS - 简介

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 使用Sass程序

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 环境搭建

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 操作符

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS- 局部文件(Partial)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 函数

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 输出格式

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 语法

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 变量

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

网友评论

      本文标题:sass

      本文链接:https://www.haomeiwen.com/subject/cbawnttx.html