認識sass和webstrom的sass配置

認識sass和webstrom的sass配置

我納悶啊！電腦當機，我剛才編寫的内容全沒了。

呵呵！

一.sass的使用

1.首先要到官網下載下傳個穩定的ruby版本，因為sass運作是需要ruby環境

它安裝的方法也不難。

隻需要輸入如下代碼就行

gem install sass      

2.接着在webstrom上設定，搜尋欄輸入file watchers，建立

然後根據相應的地方輸入如下代碼

 program：

F:\Program Files (x86)\Ruby24-x64\bin\scss.bat      

arguments：

--no-cache
--update
--sourcemap
--watch
$FileName$:$FileNameWithoutExtension$.css      

output paths to refresh：

Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map      

 3，一路确認就可以實作自動在scss檔案下自動生成.css和.css.map檔案了。

題外話：less實作在css文檔下自動生成自動生成.css和.css.map檔案，需要修改一下配置

arguments：

$FileName$

$FileParentDir$\css\$FileNameWithoutExtension$.css

--source-map

output paths to refresh：

lessc style.less ../css/style.css --source-map      

二。認識 sass

它舊的版本是以縮進的形式編寫的。

1.變量

Sass 的變量必須是 $ 開始，然後變量名和值使用冒号隔開，跟 CSS 的屬性一緻：

$base0:20px;
$base1:$base0+40px;
$global-color:blue;
  header{
    background:$global-color;
    padding:$base1;
  }      

我是直接拷貝我前一份日記的代碼，把@改為$.而生成的css樣式是這樣的：

header {
 background: blue;
 padding: 60px;
}      

2.Mixins (混入)

sass中可用mixin定義一些代碼片段，且可傳參數，友善日後根據需求調用

先放出less的代碼便于對比

@base0:20px;
@base1:@base0+40px;

@global-color:blue;

.bor-radius (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}


header{
 background:@global-color;
 padding:@base1;
 .bor-radius(30px);
}
#div1{
 background:pink;
 .bor-radius;
}      

而sass需要兩個關鍵字@mixin @include來定義和調用函數

$base0:20px;
$base1:$base0+40px;

$global-color:blue;

@mixin bor-radius ($radius: 5px) {
border-radius: $radius;
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
}


header{
background:$global-color;
 padding:$base1;
 @include bor-radius(30px);
}
#div1{
background:pink;
 @include bor-radius();
}      

可以發現在less中，定義函數的方法是直接原生css的形式（以.xxx的形式定義函數的。）

.bor-radius (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}      

而sass中，則是

@mixin bor-radius ($radius: 5px) {
border-radius: $radius;
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
}      

在調用的時候，less直接調用

#div1{
 background:pink;
 .bor-radius;
}      

而在sass中，是要使用@include關鍵字調用

#div1{
background:pink;
 @include bor-radius();
}      

而且sass是保留函數模式的（），而less預設參數時，是沒有括号的。

3.繼承

而在繼承方面，我認為less更原生。更接近于css。無論是函數mixin還是繼承都是直接嵌套調用。

而在sass還是需要使用關鍵字@extend

@extend來聲明繼承的。

#div1{
background:pink;
 @include bor-radius();
}
header{
@extend #div1;
 text-decoration: dashed;
}      

生成的css

#div1, header {
background: pink;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px; }

header {
text-decoration: dashed; }      

3.嵌套和導入@import

嵌套和導入也沒發現有什麼不一樣的。

bootstrap現在改用sass，而且現在sass一直在維護。我決定選擇可口可樂（sass），而不選擇百事可樂（less）

轉載于:https://www.cnblogs.com/hewasdrunk/p/7273357.html