demo1.scss

@import "css.css";    //導入css文件
@import "http://ss/xx";    //導入css文件
@import url(css.css);    //導入css文件
@import "a.scss";    //導入scss文件

$fontsize:14px ;
$fontsize:12px !default;//變量後面的值會覆蓋前面的值，默認值

$paddings: 5px 10px 5px 10px;//多值變量

$maps: (color:red,borderColor:blue);//多值變量

$className:main;//特殊變量
$text-info:lightgreen;//特殊變量

body
 
{
    $color:red !global; //定義全局變量，以便後面的footer可以訪問到，
    color:$color;
    font-size:$fontsize;
    padding:$paddings;
    padding-left:nth($paddings, 2);//下標從1開始
    
}
footer{
    color:$color;
    background-color:map-get($maps,borderColor);
}
.#{$className}{//使用main變量
    width:50px;
}

.text-info{
    color
 
:$text-info;
}

編譯後的demo1.css

@import url(css.css);
@import "http://ss/xx";
@import url(css.css);        //導入css文件原樣輸出
head {              //導入scss文件，會把scss文件的代碼編譯出來
  width: 100px; }

body {
  color: red;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  padding-left: 10px; }

footer {
  color: red;
  background-color
 
: blue; }

.main {
  width: 50px; }

.text-info {
  color: lightgreen; }

/*# sourceMappingURL=demo1.css.map */

a.scss

head{
    width:100px;
}

sass03 變量、樣式導入