【前端12_CSS】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"); }