【前端12_Sass】Ruby下载安装 、Sass和WebStorm 的适配 & Sass 基础语法

---

Ruby 引入

下载

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

可能会比较慢，国外的

安装

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

安装 sass

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

---

WebStorm 环境的配置

Sass 操作

概念

• 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 就会自动算好值，然后渲染到页面上，如下图所示

乘法

scss 中的乘法，如果你这样乘 height: 100px * 10%; 他就会报错，错误如下

height: 100px * 10%;
//报错信息如下：
Error: 1000%*px isn’t a valid CSS value.

除法

除法要带着圆括号，不带括号的话就不会计算

判断 if

p{
  @if(1 + 1 == 2){
    border: 1px skyblue solid;
  }@else if(){

  }@else{
  }
}

相应的 css 文件如下

p {
  border: 1px skyblue solid; }

后代

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

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

这是第二个例子：如果你用层级关系去写的话，那么你也可以设置 fa 的属性，如果你写成后代的，纳尼只能设置 fa 中的 div 的属性

.fa div{}

.fa{
  /* that called nest,this is called element nest*/
  background-color: yellow;
  div{
    /* attribute can also nest*/
    background:{
      color: skyblue;
      repeat: no-repeat;
    };
  }
}

父元素（可设置伪类）

比方说想给 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*/
//the default value's statement is like that    $val : 10px
@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; }

函数

@function double($x:100px){
  @return $x * 2;
}

.div10{
  width : double(20px);
}

相应的 css 文件如下

.div10 {
  width: 40px; }

引入

引入外部文件需要写 @import

@import "demo1.css";

相应的 css 文件如下

@import url(demo1.css);

注释

• 单行注释 //
• 多行注释 /*
• 版本注释/*! ：这个就是在发布的时候需要一个精简的版本，用这个注释来写版本号

循环

for 循环

@for $i from 1 to 9{
  .border#{$i} {
      border: #{$i * 10}px solid skyblue;
  }
}

编译之后的 css 文件如下

.border1 {
  border: 10px solid skyblue; }

.border2 {
  border: 20px solid skyblue; }

.border3 {
  border: 30px solid skyblue; }

.border4 {
  border: 40px solid skyblue; }

.border5 {
  border: 50px solid skyblue; }

.border6 {
  border: 60px solid skyblue; }

.border7 {
  border: 70px solid skyblue; }

.border8 {
  border: 80px solid skyblue; }

while 循环

$x : 6;
@while($x > 0){
    .item#{$x}{
      width: 2px * $x;
    }
  $x:$x - 3;
}

相应的 css 如下

.item6 {
  width: 12px; }

.item3 {
  width: 6px; }

each 循环

@each $y in q,w,e,r{
  .#{$y}{
    background-image: url("../img/#{$y}.png");
  }
}

相应的 css 如下

.q {
  background-image: url("../img/q.png"); }

.w {
  background-image: url("../img/w.png"); }

.e {
  background-image: url("../img/e.png"); }

.r {
  background-image: url("../img/r.png"); }