【前端学习总结_14】Ruby：下载 & 安装 Sass & WebStorm 的适配 & Sass 基础语法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/u010263423/article/details/102657789

---

Ruby 引入

下载

去官网 https://rubyinstaller.org/downloads/

可能会比较慢，国外的

安装

然后安装(尽量不要安装在系统盘)，注意选择第一项

安装 sass

打开 cmd,快捷键 window + R，然后输入 cmd
检查是否安装好 Ruby：输入 ruby -v，如果你成功安装好 Ruby 的话，就会在下面弹出版本号
在 cmd 中输入gem install sass 等待几分钟

---

WebStorm 环境的配置

操作

概念

• Sass 是一种 预处理语言
  官网上给的是这样的：“世界上最成熟、最稳定、最强大的专业级CSS扩展语言！”
• Less 也是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

这里我用的是 Sass

声明 & 使用变量

用 $变量名:值; 来写变量

//示例
$pink:hotpink;
div{
  color:$pink;
}

值的运算

Sass 中的编译可以使用运算了！！

.box{
  margin:(14px)/2;
  top:20px + 50px;
  left: $num * 3;
}

在 Scss.scss 中写完之后，其子元素中的 Scss.css 就会自动算好值，然后渲染到页面上，如下图所示

后代

Sass 中的后代，可以跟 body 中的书写格式类似，如果你想写 div 下 h1 的属性，下面有几种方法可以实现

扫描二维码关注公众号，回复： 7604930 查看本文章

/*Descendants*/
/*can write like this*/
div h1{
  color: beige;
}
/*also this*/
div{
  h1{
    color:beige;
  }
}

父元素

比方说想给 a 标签加个 hover 属性，可以这么写

/*a hover use '&',this sign means father element*/
a{
  color:skyblue;
  &:hover{
    color: pink;
  }
}

其相应的 css 文件如下

a {
  color: skyblue; }
  a:hover {
    color: pink; 
}

继承

继承用关键字 @extend

.class1{
  border:1px solid deepskyblue;
}
.class3{
  margin: 22px 20px 30px 40px;
}
.class2{
  /*inherit*/
  @extend .class1,.class3;
}

相应的 css 文件如下

.class1, .class2 {
  border: 1px solid deepskyblue; }

.class3, .class2 {
  margin: 22px 20px 30px 40px; }

原理：它用的并集选择器

函数声明

• 函数定义 用关键字 @mixin 函数名(形参){函数体}
• 函数调用 用关键字 @include 函数名(实参)

这是第一个例子

/*write a function*/
@mixin test_plu($val:10px){
          width:$val;
       }

div{
  /*@include + function's name()*/
  @include test_plu(20px);
}

相应的 css 文件如下

div {
  /*include + function's name()*/
  width: 20px; }

这是第二个例子

@mixin routed($fon,$hon,$rad:10px){
  border-#{$fon}-#{$hon}-radius:$rad;
  -webkit-border-#{$fon}-#{$hon}-radius:$rad;
  -moz-border-#{$fon}-#{$hon}-radius:$rad;
}
div{
  @include routed(left,top,200px);
}

相应的 css 如下

div {
  border-left-top-radius: 200px;
  -webkit-border-left-top-radius: 200px;
  -moz-border-left-top-radius: 200px; }